opensource/tweakcn
3
0
Fork 0
mirror of https://github.com/jnsahaj/tweakcn.git synced 2026-09-24 23:31:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: Shadow control render

Browse Source
This commit is contained in:
Sahaj Jain
2025-05-09 18:37:18 +05:30
parent a5e1094a9a
commit a2c7f26d6c
1 changed files with 68 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/editor/shadow-control.tsx
+68 -71
View File
@@ -1,7 +1,6 @@
import React from "react";
import { SliderWithInput } from "./slider-with-input";
import ColorPicker from "./color-picker";
import ControlSection from "./control-section";
interface ShadowControlProps {
shadowColor: string;
@@ -23,77 +22,75 @@ const ShadowControl: React.FC<ShadowControlProps> = ({
onChange,
}) => {
return (
<ControlSection title="Shadow" expanded>
<div className="space-y-4">
<div>
<ColorPicker
color={shadowColor}
onChange={(color) => onChange("shadow-color", color)}
label="Shadow Color"
/>
</div>
<div>
<SliderWithInput
value={shadowOpacity}
onChange={(value) => onChange("shadow-opacity", value)}
min={0}
max={1}
step={0.01}
unit=""
label="Shadow Opacity"
/>
</div>
<div>
<SliderWithInput
value={shadowBlur}
onChange={(value) => onChange("shadow-blur", value)}
min={0}
max={50}
step={0.5}
unit="px"
label="Blur Radius"
/>
</div>
<div>
<SliderWithInput
value={shadowSpread}
onChange={(value) => onChange("shadow-spread", value)}
min={-50}
max={50}
step={0.5}
unit="px"
label="Spread"
/>
</div>
<div>
<SliderWithInput
value={shadowOffsetX}
onChange={(value) => onChange("shadow-offset-x", value)}
min={-50}
max={50}
step={0.5}
unit="px"
label="Offset X"
/>
</div>
<div>
<SliderWithInput
value={shadowOffsetY}
onChange={(value) => onChange("shadow-offset-y", value)}
min={-50}
max={50}
step={0.5}
unit="px"
label="Offset Y"
/>
</div>
<div className="space-y-4">
<div>
<ColorPicker
color={shadowColor}
onChange={(color) => onChange("shadow-color", color)}
label="Shadow Color"
/>
</div>
</ControlSection>
<div>
<SliderWithInput
value={shadowOpacity}
onChange={(value) => onChange("shadow-opacity", value)}
min={0}
max={1}
step={0.01}
unit=""
label="Shadow Opacity"
/>
</div>
<div>
<SliderWithInput
value={shadowBlur}
onChange={(value) => onChange("shadow-blur", value)}
min={0}
max={50}
step={0.5}
unit="px"
label="Blur Radius"
/>
</div>
<div>
<SliderWithInput
value={shadowSpread}
onChange={(value) => onChange("shadow-spread", value)}
min={-50}
max={50}
step={0.5}
unit="px"
label="Spread"
/>
</div>
<div>
<SliderWithInput
value={shadowOffsetX}
onChange={(value) => onChange("shadow-offset-x", value)}
min={-50}
max={50}
step={0.5}
unit="px"
label="Offset X"
/>
</div>
<div>
<SliderWithInput
value={shadowOffsetY}
onChange={(value) => onChange("shadow-offset-y", value)}
min={-50}
max={50}
step={0.5}
unit="px"
label="Offset Y"
/>
</div>
</div>
);
};