import React, { useState, useEffect } from
"react"
;
import
"./App.css"
;
function
App() {
const [hShadow, setHShadow] = useState(0);
const [vShadow, setVShadow] = useState(0);
const [blurRadius, setBlurRadius] = useState(0);
const [
spreadRadius,
setSpreadRadius] = useState(0);
const [
shadowColor,
setShadowColor] = useState(
"#0075ff"
);
const [
shadowColorOpacity,
setShadowColorOpacity] = useState(1);
const [
shadowInset,
setShadowInset] = useState(
false
);
const [
boxShadow,
setBoxShadow] = useState(
""
);
const [
copiedMessageVisible,
setCopiedMessageVisible] = useState(
false
);
useEffect(() => {
generateShadow();
}, [
hShadow,
vShadow,
blurRadius,
spreadRadius,
shadowColor,
shadowColorOpacity,
shadowInset,
]);
const generateShadow = () => {
const boxShadowValue = shadowInset
? `inset ${hShadow}px ${vShadow}px ${blurRadius}px
${spreadRadius}px rgba(${hexToRgba(
shadowColor, shadowColorOpacity
)})`
: `${hShadow}px ${vShadow}px ${blurRadius}px
${spreadRadius}px rgba(${hexToRgba(
shadowColor, shadowColorOpacity
)})`;
setBoxShadow(boxShadowValue);
};
const hexToRgba = (color, opacity) => {
const r = parseInt(color.slice(1, 3), 16);
const g = parseInt(color.slice(3, 5), 16);
const b = parseInt(color.slice(5, 7), 16);
return
`${r},${g},${b},${opacity}`;
};
const copyCode = () => {
const codeElement = document.getElementById(
"code"
);
codeElement.select();
document.execCommand(
"copy"
);
setCopiedMessageVisible(
true
);
setTimeout(() => {
setCopiedMessageVisible(
false
);
}, 2000);
};
return
(
<div className=
"container"
>
<div className=
"result"
>
<div id=
"element"
style={{ boxShadow: boxShadow }}>
</div>
</div>
<div className=
"sliders"
>
<div className=
"slider-wrapper"
>
<label htmlFor=
"h-shadow"
>
Horizontal Shadow:
</label>
<input
type=
"range"
id=
"h-shadow"
max=
"100"
min=
"-100"
value={hShadow}
onChange={(e) =>
setHShadow(Number(e.target.value))}
/>
</div>
<div className=
"slider-wrapper"
>
<label htmlFor=
"v-shadow"
>
Vertical Shadow:
</label>
<input
type=
"range"
id=
"v-shadow"
max=
"100"
min=
"-100"
value={vShadow}
onChange={(e) =>
setVShadow(Number(e.target.value))}
/>
</div>
<div className=
"slider-wrapper"
>
<label htmlFor=
"blur-radius"
>
Blur Radius:
</label>
<input
type=
"range"
id=
"blur-radius"
max=
"100"
min=
"0"
value={blurRadius}
onChange={(e) =>
setBlurRadius(Number(e.target.value))}
/>
</div>
<div className=
"slider-wrapper"
>
<label htmlFor=
"spread-radius"
>
Spread Radius:
</label>
<input
type=
"range"
id=
"spread-radius"
max=
"50"
min=
"-50"
value={spreadRadius}
onChange={(e) =>
setSpreadRadius(Number(e.target.value))}
/>
</div>
<div className=
"slider-wrapper"
>
<label htmlFor=
"shadow-color"
>
Shadow Color:
</label>
<input
type=
"color"
id=
"shadow-color"
value={shadowColor}
onChange={(e) =>
setShadowColor(e.target.value)}
/>
</div>
<div className=
"slider-wrapper"
>
<label htmlFor=
"shadow-color-opacity"
>
Shadow Color Opacity:
</label>
<input
type=
"range"
id=
"shadow-color-opacity"
max=
"1"
min=
"0"
step=
"0.1"
value={shadowColorOpacity}
onChange={(e) =>
setShadowColorOpacity(Number(e.target.value))}
/>
</div>
<div className=
"input-wrapper"
>
<label htmlFor=
"shadow-inset"
>
Inset Shadow:
</label>
<input
type=
"checkbox"
id=
"shadow-inset"
checked={shadowInset}
onChange={(e) =>
setShadowInset(e.target.checked)}
/>
</div>
</div>
<div className=
"code-wrapper"
>
<textarea
rows=
"2"
id=
"code"
readOnly
value={`box-shadow: ${boxShadow};`}
/>
<button onClick={copyCode}>Copy</button>
{copiedMessageVisible && (
<div className=
"copy-message"
>
Code Copied To Clipboard!!
</div>
)}
</div>
</div>
);
}
export
default
App;