Skip to content

Commit

Permalink
border radius
Browse files Browse the repository at this point in the history
  • Loading branch information
@lifeparticle
lifeparticle committed Sep 7, 2023
1 parent 5a8e03c commit 3a36cd4
Show file tree
Hide file tree
Showing 9 changed files with 414 additions and 128 deletions.
8 changes: 8 additions & 0 deletions ui/src/components/Layouts/Menu/utils/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { MenuProps } from "antd";
import { IconName } from "components/General/Icon/utils/types";
import { getItem } from "components/Layouts/Menu/utils/helper";

const IN_DEVELOPMENT = import.meta.env.DEV;

export const MENU_ITEMS = [
{
name: "Colors",
Expand Down Expand Up @@ -33,6 +35,12 @@ export const MENU_ITEMS = [
icon: "Square",
show: true,
},
{
name: "Border Shadow",
url: "/css/bs",
icon: "Box",
show: IN_DEVELOPMENT,
},
],
},
{
Expand Down
4 changes: 4 additions & 0 deletions ui/src/pages/CSS/BorderRadius/BorderRadius.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
.br {
&__input,
&__output {
min-height: 550px;
}
&__output {
display: flex;
justify-content: center;
Expand Down
270 changes: 142 additions & 128 deletions ui/src/pages/CSS/BorderRadius/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,17 +16,17 @@ import InputGrid from "components/Layouts/InputGrid";
const PARAGRAPHS = faker.lorem.paragraph(7);

const BorderRadius = () => {
const [border, setBorder] = useState(0);
const [border, setBorder] = useState(5);
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 [borderWidth, setBorderWidth] = useState(5);
const [borderStyle, setBorderStyle] = useState(BORDER_STYLES[4].value);
const [borderColor, setBorderColor] = useState("rgba(0, 0, 0, 1)");
const [borderColor, setBorderColor] = useState("rgba(158, 158, 158, 1)");

const [borderType, setBorderType] = useState("rgba(0, 0, 0, 1)");
const [borderType, setBorderType] = useState("");

const generateCSSCodeString = () => {
const borderRadiusString = `border-radius: ${borderRadiusTopLeft}px ${borderRadiusTopRight}px ${borderRadiusBottomRight}px ${borderRadiusBottomLeft}px;`;
Expand All @@ -40,137 +40,151 @@ const BorderRadius = () => {
};

return (
<PageGrid className={style.br}>
<Card>
<Form layout="vertical">
<InputGrid>
<ColorPickerWithInput
label="Color"
value={borderColor}
setValue={(e) => setBorderColor(e.target.value)}
setColor={setBorderColor}
/>
<Form.Item label="Border style">
<ResponsiveSelectWithLabel
value={borderStyle}
defaultActiveFirstOption
onSelect={(_, option) =>
setBorderStyle(option.value)
}
options={BORDER_STYLES}
<Space direction="vertical">
<PageGrid className={style.br}>
<Card className={style.br__input}>
<Form layout="vertical">
<InputGrid>
<ColorPickerWithInput
label="Color"
value={borderColor}
setValue={(e) => setBorderColor(e.target.value)}
setColor={setBorderColor}
/>
</Form.Item>
</InputGrid>
<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">
<Slider
defaultValue={0}
value={border}
onChange={(value: number) => {
if (value) {
setBorder(value);
setBorderRadiusTopLeft(value);
setBorderRadiusTopRight(value);
setBorderRadiusBottomLeft(value);
setBorderRadiusBottomRight(value);
}
}}
/>
</Form.Item>
<Form.Item label="Top left border">
<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)
}
/>
</Form.Item>
<Form.Item label="Bottom left border">
<Slider
defaultValue={0}
value={borderRadiusBottomLeft}
onChange={(value) =>
value !== null &&
setBorderRadiusBottomLeft(value)
}
/>
</Form.Item>
<Form.Item label="Bottom right border">
<Slider
defaultValue={0}
value={borderRadiusBottomRight}
onChange={(value) =>
value !== null &&
setBorderRadiusBottomRight(value)
<ResponsiveSegementWithLabel
label="Border type"
value={borderType}
onChange={(value: string | number) =>
setBorderType(value as string)
}
options={SEGMENTED_OPTIONS}
/>
</Form.Item>
<Form.Item label="Border width">
<Slider
defaultValue={0}
value={borderWidth}
onChange={(value) =>
value !== null && setBorderWidth(value)
<InputGrid>
<Form.Item label="Border">
<Slider
defaultValue={0}
value={border}
onChange={(value: number) => {
if (value) {
setBorder(value);
setBorderRadiusTopLeft(value);
setBorderRadiusTopRight(value);
setBorderRadiusBottomLeft(value);
setBorderRadiusBottomRight(value);
}
}}
/>
</Form.Item>

<Form.Item label="Border width">
<Slider
defaultValue={0}
value={borderWidth}
onChange={(value) =>
value !== null && setBorderWidth(value)
}
/>
</Form.Item>
</InputGrid>

<InputGrid>
<Form.Item label="Top left border">
<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)
}
/>
</Form.Item>
</InputGrid>
<InputGrid>
<Form.Item label="Bottom left border">
<Slider
defaultValue={0}
value={borderRadiusBottomLeft}
onChange={(value) =>
value !== null &&
setBorderRadiusBottomLeft(value)
}
/>
</Form.Item>
<Form.Item label="Bottom right border">
<Slider
defaultValue={0}
value={borderRadiusBottomRight}
onChange={(value) =>
value !== null &&
setBorderRadiusBottomRight(value)
}
/>
</Form.Item>
</InputGrid>
</Form>
</Card>

<Card className={style.br__output}>
<Space direction="vertical">
<img
src={about}
onClick={() =>
window.open(
"https://unsplash.com/photos/AaqI2ao96KM",
"_blank"
)
}
style={{
borderRadius: `${borderRadiusTopLeft}px ${borderRadiusTopRight}px ${borderRadiusBottomRight}px ${borderRadiusBottomLeft}px`,
borderWidth: `${borderWidth}px`,
borderColor: `${borderColor}`,
borderStyle: `${borderStyle}`,
}}
className={style.br__output_img}
/>
</Form.Item>
</Form>
</Card>

<Card className={style.br__output}>
<Space direction="vertical">
<img
src={about}
onClick={() =>
window.open(
"https://unsplash.com/photos/AaqI2ao96KM",
"_blank"
)
}
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}`,
}}
>
{PARAGRAPHS}
</Card>
<CodeHighlightWithCopy
codeString={generateCSSCodeString()}
language="css"
/>
</Space>
<Card
className={style.br__output_text}
style={{
borderRadius: `${borderRadiusTopLeft}px ${borderRadiusTopRight}px ${borderRadiusBottomRight}px ${borderRadiusBottomLeft}px`,
borderWidth: `${borderWidth}px`,
borderColor: `${borderColor}`,
borderStyle: `${borderStyle}`,
}}
>
{PARAGRAPHS}
</Card>
</Space>
</Card>
</PageGrid>
<Card>
<CodeHighlightWithCopy
codeString={generateCSSCodeString()}
language="css"
/>
</Card>
</PageGrid>
</Space>
);
};

Expand Down
19 changes: 19 additions & 0 deletions ui/src/pages/CSS/BoxShadow/BoxShadow.module.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.br {
&__output {
display: flex;
justify-content: center;

&_text,
&_img {
width: 100%;
aspect-ratio: 7 / 3;
display: flex;
align-items: center;
justify-content: center;
}

&_text {
overflow: hidden;
}
}
}
Loading

0 comments on commit 3a36cd4

Please sign in to comment.