Skip to content

Commit

Permalink
refactor: Add fadeInLeft animation to Playground component
Browse files Browse the repository at this point in the history
  • Loading branch information
@HasanYahya101
HasanYahya101 committed Jul 23, 2024
1 parent a246ed1 commit ec0f06e
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 31 deletions.
104 changes: 73 additions & 31 deletions src/components/component/playground.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,9 @@ export function Playground() {

const [defaultHue, setDefaultHue] = useState(0);

const [defaultSaturation, setDefaultSaturation] = useState(100);
const [defaultSaturation, setDefaultSaturation] = useState(85);

const [defaultBrightness, setDefaultBrightness] = useState(100);
const [defaultBrightness, setDefaultBrightness] = useState(65);

const [rValue, setRValue] = useState(255);

Expand All @@ -31,7 +31,7 @@ export function Playground() {

const [hexValue, setHexValue] = useState("#FF0000");


const [sliderMode, setSliderMode] = useState("hsl");

const rgbToHex = (r, g, b) => {
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
Expand All @@ -41,6 +41,15 @@ export function Playground() {
localStorage.removeItem('uploadedImage');
}, []);

useEffect(() => {
const rgb = hslToRgb(defaultHue, defaultSaturation, defaultBrightness);
setRValue(rgb.r);
setGValue(rgb.g);
setBValue(rgb.b);

setHexValue(rgbToHex(rgb.r, rgb.g, rgb.b));
}, []);

useEffect(() => {
const storedImage = localStorage.getItem('uploadedImage');
if (storedImage) {
Expand Down Expand Up @@ -324,32 +333,61 @@ export function Playground() {
</div>
</div>
</div>
<div className="grid gap-4">
<div className="flex items-center gap-4">
<div
className="w-16 text-right text-sm font-medium text-gray-500 dark:text-gray-400">Hue</div>
<Slider className="flex-1" value={[defaultHue]} max={360} step={1} onValueChange={(value) => hvalueChanged(value)}
/>
<div
className="w-16 text-right text-sm font-medium text-gray-900 dark:text-gray-50">{defaultHue}°</div>
</div>
<div className="flex items-center gap-4">
<div
className="w-16 text-right text-sm font-medium text-gray-500 dark:text-gray-400">Saturation</div>
<Slider className="flex-1" value={[defaultSaturation]} max={100} step={1} onValueChange={(value) => svalueChanged(value)}
/>
<div
className="w-16 text-right text-sm font-medium text-gray-900 dark:text-gray-50">{defaultSaturation}%</div>
</div>
<div className="flex items-center gap-4">
<div
className="w-16 text-right text-sm font-medium text-gray-500 dark:text-gray-400">Lightness</div>
<Slider className="flex-1" value={[defaultBrightness]} max={100} step={1} onValueChange={(value) => _lvalueChanged(value)}
/>
<div
className="w-16 text-right text-sm font-medium text-gray-900 dark:text-gray-50">{defaultBrightness}%</div>
</div>
</div>
{sliderMode === "hsl" ? (
<div className="grid gap-4">

<div className="flex items-center gap-4">
<div
className="w-16 text-right text-sm font-medium text-gray-500 dark:text-gray-400">Hue</div>
<Slider className="flex-1" value={[defaultHue]} max={360} step={1} onValueChange={(value) => hvalueChanged(value)}
/>
<div
className="w-16 text-right text-sm font-medium text-gray-900 dark:text-gray-50">{defaultHue}°</div>
</div>
<div className="flex items-center gap-4">
<div
className="w-16 text-right text-sm font-medium text-gray-500 dark:text-gray-400">Saturation</div>
<Slider className="flex-1" value={[defaultSaturation]} max={100} step={1} onValueChange={(value) => svalueChanged(value)}
/>
<div
className="w-16 text-right text-sm font-medium text-gray-900 dark:text-gray-50">{defaultSaturation}%</div>
</div>
<div className="flex items-center gap-4">
<div
className="w-16 text-right text-sm font-medium text-gray-500 dark:text-gray-400">Lightness</div>
<Slider className="flex-1" value={[defaultBrightness]} max={100} step={1} onValueChange={(value) => _lvalueChanged(value)}
/>
<div
className="w-16 text-right text-sm font-medium text-gray-900 dark:text-gray-50">{defaultBrightness}%</div>
</div>
</div>) : sliderMode === "rgb" ? (
<div className="grid gap-4">

<div className="flex items-center gap-4">
<div
className="w-16 text-right text-sm font-medium text-gray-500 dark:text-gray-400">Red</div>
<Slider className="flex-1" value={[defaultHue]} max={255} step={1} onValueChange={(value) => hvalueChanged(value)}
/>
<div
className="w-16 text-right text-sm font-medium text-gray-900 dark:text-gray-50">{defaultHue}°</div>
</div>
<div className="flex items-center gap-4">
<div
className="w-16 text-right text-sm font-medium text-gray-500 dark:text-gray-400">Green</div>
<Slider className="flex-1" value={[defaultSaturation]} max={255} step={1} onValueChange={(value) => svalueChanged(value)}
/>
<div
className="w-16 text-right text-sm font-medium text-gray-900 dark:text-gray-50">{defaultSaturation}%</div>
</div>
<div className="flex items-center gap-4">
<div
className="w-16 text-right text-sm font-medium text-gray-500 dark:text-gray-400">Blue</div>
<Slider className="flex-1" value={[defaultBrightness]} max={255} step={1} onValueChange={(value) => _lvalueChanged(value)}
/>
<div
className="w-16 text-right text-sm font-medium text-gray-900 dark:text-gray-50">{defaultBrightness}%</div>
</div>
</div>) : null}
<div className="grid gap-2">
<div className="flex items-center gap-4 group">
<TooltipProvider>
Expand All @@ -367,7 +405,9 @@ export function Playground() {
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Button variant="outline" size="icon" className="h-8 w-8 text-right opacity-100 group-hover:opacity-100">
<Button variant="outline" size="icon" className="h-8 w-8 text-right opacity-0 group-hover:opacity-100 group-hover:animate-fadeInLeft"
onClick={() => setSliderMode("rgb")}
>
<ArrowRightLeft className="w-4 h-4" />
</Button>
</TooltipTrigger>
Expand All @@ -393,7 +433,9 @@ export function Playground() {
<TooltipProvider>
<Tooltip>
<TooltipTrigger>
<Button variant="outline" size="icon" className="h-8 w-8 text-right opacity-100 group-hover:opacity-100">
<Button variant="outline" size="icon" className="h-8 w-8 text-right opacity-0 group-hover:opacity-100 group-hover:animate-fadeInLeft"
onClick={() => setSliderMode("hsl")}
>
<ArrowRightLeft className="w-4 h-4" />
</Button>
</TooltipTrigger>
Expand Down
5 changes: 5 additions & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,15 @@ module.exports = {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
fadeInLeft: {
'0%': { opacity: '0', transform: 'translateX(-10px)' },
'100%': { opacity: '1', transform: 'translateX(0)' },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
fadeInLeft: 'fadeInLeft 0.5s ease-in-out',
},
},
},
Expand Down

0 comments on commit ec0f06e

Please sign in to comment.