Skip to content

Commit

Permalink
add boxshadow
Browse files Browse the repository at this point in the history
  • Loading branch information
@ashik-75
ashik-75 committed Oct 7, 2023
1 parent e63119d commit 32a018f
Showing 1 changed file with 64 additions and 112 deletions.
176 changes: 64 additions & 112 deletions ui/src/pages/CSS/BoxShadow/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,41 +2,21 @@ import { useState } from "react";
import { Card, Form, Slider, Space } from "antd";
import PageGrid from "components/Layouts/PageGrid";
import CodeHighlightWithCopy from "components/General/CodeHighlightWithCopy";
import about from "assets/sample.jpg";
import style from "./BoxShadow.module.scss";
import { faker } from "@faker-js/faker";
import {
ResponsiveSegementWithLabel,
ResponsiveSelectWithLabel,
} from "components/General/FormComponents";
import { BORDER_STYLES, SEGMENTED_OPTIONS } from "./utils/constants";
import ColorPickerWithInput from "components/General/ColorPickerWithInput";
import InputGrid from "components/Layouts/InputGrid";

const PARAGRAPHS = faker.lorem.paragraph(7);

const BoxShadow = () => {
const [border, setBorder] = useState(0);
const [borderRadiusTopLeft, setBorderRadiusTopLeft] = useState(0);
const [borderRadiusTopRight, setBorderRadiusTopRight] = useState(0);
const [borderRadiusBottomLeft, setBorderRadiusBottomLeft] = useState(0);
const [borderRadiusBottomRight, setBorderRadiusBottomRight] = useState(0);

const [borderWidth, setBorderWidth] = useState(0);
const [borderStyle, setBorderStyle] = useState(BORDER_STYLES[4].value);
const [borderColor, setBorderColor] = useState("rgba(0, 0, 0, 1)");

const [borderType, setBorderType] = useState("rgba(0, 0, 0, 1)");
const [shadowColor, setShadowColor] = useState("#ddd");
const [boxColor, setBoxColor] = useState("#df6a0b77");
const [horizontalLength, setHorizontalLength] = useState(0);
const [verticalLength, setVerticalLength] = useState(0);
const [blurRadius, setBlurRadius] = useState(0);
const [spreadRadius, setSpreadRadius] = useState(0);
const [opacity, setOpacity] = useState(0);

const generateCSSCodeString = () => {
const borderRadiusString = `border-radius: ${borderRadiusTopLeft}px ${borderRadiusTopRight}px ${borderRadiusBottomRight}px ${borderRadiusBottomLeft}px;`;
const borderWidthString = `border-width: ${borderWidth}px;`;
const borderColorString = `border-color: ${borderColor};`;
const borderStyleString = `border-style: ${borderStyle};`;

const borderShorthandString = `border: ${borderWidth}px ${borderStyle} ${borderColor};`;

return `${borderRadiusString}\n${borderWidthString}\n${borderColorString}\n${borderStyleString}\n\n// Shorthand Property\n${borderRadiusString}\n${borderShorthandString}`;
return "";
};

return (
Expand All @@ -45,125 +25,97 @@ const BoxShadow = () => {
<Form layout="vertical">
<InputGrid>
<ColorPickerWithInput
label="Color"
value={borderColor}
setValue={(e) => setBorderColor(e.target.value)}
setColor={setBorderColor}
label="Shadow color"
value={shadowColor}
setValue={(e) => setShadowColor(e.target.value)}
setColor={setShadowColor}
/>
<ColorPickerWithInput
label="Box color"
value={boxColor}
setValue={(e) => setBoxColor(e.target.value)}
setColor={setBoxColor}
/>
<Form.Item label="Border style">
<ResponsiveSelectWithLabel
value={borderStyle}
defaultActiveFirstOption
onSelect={(_, option) =>
setBorderStyle(option.value)
}
options={BORDER_STYLES}
/>
</Form.Item>
</InputGrid>

<ResponsiveSegementWithLabel
label="Radius type"
value={borderType}
onChange={(value: string | number) =>
setBorderType(value as string)
}
options={SEGMENTED_OPTIONS}
/>
<Form.Item label="Border">
<Form.Item label="Horizontal length">
<Slider
defaultValue={0}
value={border}
value={horizontalLength}
onChange={(value: number) => {
if (value) {
setBorder(value);
setBorderRadiusTopLeft(value);
setBorderRadiusTopRight(value);
setBorderRadiusBottomLeft(value);
setBorderRadiusBottomRight(value);
setHorizontalLength(value);
}
}}
/>
</Form.Item>
<Form.Item label="Top left border">
<Form.Item label="Vertical length">
<Slider
defaultValue={0}
value={borderRadiusTopLeft}
onChange={(value) =>
value !== null && setBorderRadiusTopLeft(value)
}
/>
</Form.Item>
<Form.Item label="Top right border">
<Slider
defaultValue={0}
value={borderRadiusTopRight}
onChange={(value) =>
value !== null && setBorderRadiusTopRight(value)
}
value={verticalLength}
onChange={(value) => {
if (value) {
setVerticalLength(value);
}
}}
/>
</Form.Item>
<Form.Item label="Bottom left border">
<Form.Item label="Blur radius">
<Slider
defaultValue={0}
value={borderRadiusBottomLeft}
onChange={(value) =>
value !== null &&
setBorderRadiusBottomLeft(value)
}
value={blurRadius}
onChange={(value) => {
if (value) {
setBlurRadius(value);
}
}}
/>
</Form.Item>
<Form.Item label="Bottom right border">
<Form.Item label="Spread radius">
<Slider
defaultValue={0}
value={borderRadiusBottomRight}
onChange={(value) =>
value !== null &&
setBorderRadiusBottomRight(value)
}
value={spreadRadius}
onChange={(value) => {
if (value) {
setSpreadRadius(value);
}
}}
/>
</Form.Item>
<Form.Item label="Border width">
<Form.Item label="Opacity">
<Slider
defaultValue={0}
value={borderWidth}
onChange={(value) =>
value !== null && setBorderWidth(value)
}
value={opacity}
onChange={(value) => {
if (value) {
setOpacity(value);
}
}}
/>
</Form.Item>
</Form>
</Card>

<Card className={style.br__output}>
<Space direction="vertical">
<img
src={about}
onClick={() =>
window.open(
"https://unsplash.com/photos/AaqI2ao96KM",
"_blank"
)
}
<div
style={{
borderRadius: `${borderRadiusTopLeft}px ${borderRadiusTopRight}px ${borderRadiusBottomRight}px ${borderRadiusBottomLeft}px`,
borderWidth: `${borderWidth}px`,
borderColor: `${borderColor}`,
borderStyle: `${borderStyle}`,
}}
className={style.br__output_img}
/>
<Card
className={style.br__output_text}
style={{
borderRadius: `${borderRadiusTopLeft}px ${borderRadiusTopRight}px ${borderRadiusBottomRight}px ${borderRadiusBottomLeft}px`,
borderWidth: `${borderWidth}px`,
borderColor: `${borderColor}`,
borderStyle: `${borderStyle}`,
width: 400,
height: 300,
backgroundColor: shadowColor,
transform: `translate(${horizontalLength}px, ${verticalLength}px)`,
}}
>
{PARAGRAPHS}
</Card>
<div
style={{
width: 400,
height: 300,
backgroundColor: boxColor,
position: "absolute",
}}
></div>
</div>
<br />
<CodeHighlightWithCopy
codeString={generateCSSCodeString()}
language="css"
Expand Down

0 comments on commit 32a018f

Please sign in to comment.