Skip to content

Commit 3b4f1f8

Browse files
bishalshrestha013bishalshrestha013
committed
feat: add example using size component
1 parent 79c4e7c commit 3b4f1f8

3 files changed

Lines changed: 86 additions & 18 deletions

File tree

‎apps/demo/src/Views/Ui/components/ModalDemo.tsx‎

Lines changed: 84 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Button, Modal, Page } from "@prefabs.tech/react-ui";
33
import { useState } from "react";
44
import { useNavigate } from "react-router-dom";
55

6-
import { Section } from "../../../components/Demo";
6+
import { CodeBlock, Section } from "../../../components/Demo";
77

88
const Header = () => {
99
const [t] = useTranslation("ui");
@@ -15,10 +15,14 @@ export const ModalDemo = () => {
1515
const [isOpen, setIsOpen] = useState<boolean>(false);
1616
const [isOpen2, setIsOpen2] = useState<boolean>(false);
1717
const [isOpen3, setIsOpen3] = useState<boolean>(false);
18+
const [isOpen4, setIsOpen4] = useState<boolean>(false);
1819

1920
const [t] = useTranslation("ui");
2021
const navigate = useNavigate();
2122

23+
const content =
24+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
25+
2226
return (
2327
<Page
2428
title={t("modal.title")}
@@ -31,40 +35,104 @@ export const ModalDemo = () => {
3135
/>
3236
}
3337
>
38+
<Section title={t("headers.usage")}>
39+
<p>{t("common.usage", { component: "Modal" })}</p>
40+
<CodeBlock exampleCode='import { Modal } from "@prefabs.tech/react-ui"' />
41+
</Section>
42+
3443
<Section title={t("modal.usage.withoutHeader")}>
35-
<Button
36-
label={t("modal.showButton")}
37-
onClick={() => setIsOpen(true)}
38-
></Button>
44+
<Button label="Open modal" onClick={() => setIsOpen(true)}></Button>
3945
<Modal onHide={() => setIsOpen(false)} visible={isOpen}>
40-
<p style={{ lineHeight: 1.6 }}>{t("modal.content")}</p>
46+
<p style={{ lineHeight: 1.6 }}>{content}</p>
4147
</Modal>
48+
<CodeBlock
49+
exampleCode='const [isOpen, setIsOpen] = useState<boolean>(false);
50+
51+
<Button
52+
label="Open modal"
53+
onClick={() => setIsOpen(true)}
54+
></Button>
55+
<Modal onHide={() => setIsOpen(false)} visible={isOpen}>
56+
<p style={{ lineHeight: 1.6 }}>Lorem ipsum ...</p>
57+
</Modal>'
58+
/>
4259
</Section>
4360
<Section title={t("modal.usage.withHeader")}>
44-
<Button
45-
label={t("modal.showButton")}
46-
onClick={() => setIsOpen2(true)}
47-
></Button>
61+
<Button label="Open modal" onClick={() => setIsOpen2(true)}></Button>
4862
<Modal
4963
header={t("modal.header")}
5064
onHide={() => setIsOpen2(false)}
5165
visible={isOpen2}
5266
>
53-
<p style={{ lineHeight: 1.6 }}>{t("modal.content")}</p>
67+
<p style={{ lineHeight: 1.6 }}>{content}</p>
5468
</Modal>
69+
<CodeBlock
70+
exampleCode='const [isOpen, setIsOpen] = useState<boolean>(false);
71+
72+
<Button
73+
label="Open modal"
74+
onClick={() => setIsOpen(true)}
75+
></Button>
76+
<Modal
77+
header={t("modal.header")}
78+
onHide={() => setIsOpen(false)}
79+
visible={isOpen}
80+
>
81+
<p style={{ lineHeight: 1.6 }}>Lorem ipsum ...</p>
82+
</Modal>'
83+
/>
5584
</Section>
5685
<Section title={t("modal.usage.headerAsFC")}>
57-
<Button
58-
label={t("modal.showButton")}
59-
onClick={() => setIsOpen3(true)}
60-
></Button>
86+
<Button label="Open modal" onClick={() => setIsOpen3(true)}></Button>
6187
<Modal
6288
header={<Header />}
6389
onHide={() => setIsOpen3(false)}
6490
visible={isOpen3}
6591
>
66-
<p style={{ lineHeight: 1.6 }}>{t("modal.content")}</p>
92+
<p style={{ lineHeight: 1.6 }}>{content}</p>
6793
</Modal>
94+
<CodeBlock
95+
exampleCode='const [isOpen, setIsOpen] = useState<boolean>(false);
96+
97+
<Button
98+
label="Open modal"
99+
onClick={() => setIsOpen(true)}
100+
></Button>
101+
<Modal
102+
header={<Header />}
103+
onHide={() => setIsOpen(false)}
104+
visible={isOpen}
105+
>
106+
<p style={{ lineHeight: 1.6 }}>Lorem ipsum ...</p>
107+
</Modal>'
108+
/>
109+
</Section>
110+
<Section title={t("modal.usage.size")}>
111+
<Button label="Open modal" onClick={() => setIsOpen4(true)}></Button>
112+
<Modal
113+
header={<Header />}
114+
onHide={() => setIsOpen4(false)}
115+
size="large"
116+
visible={isOpen4}
117+
>
118+
<p style={{ lineHeight: 1.6 }}>{content}</p>
119+
</Modal>
120+
<CodeBlock
121+
exampleCode='const [isOpen, setIsOpen] = useState<boolean>(false);
122+
123+
<Button
124+
label="Open modal"
125+
onClick={() => setIsOpen(true)}
126+
></Button>
127+
<Modal
128+
header={<Header />}
129+
onHide={() => setIsOpen(false)}
130+
size="large"
131+
visible={isOpen}
132+
>
133+
<p style={{ lineHeight: 1.6 }}>Lorem ipsum ...</p>
134+
</Modal>'
135+
/>
68136
</Section>
69137
</Page>
70138
);

‎apps/demo/src/locales/en/ui.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,10 +249,10 @@
249249
"modal": {
250250
"title": "Modal",
251251
"header": "Header",
252-
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
253252
"showButton": "Open modal",
254253
"usage": {
255254
"headerAsFC": "Header as functional component",
255+
"size": "Size",
256256
"withHeader": "With header",
257257
"withoutHeader": "Without header"
258258
}

‎apps/demo/src/locales/fr/ui.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,10 +249,10 @@
249249
"modal": {
250250
"title": "Modal (fr)",
251251
"header": "Header (fr)",
252-
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. (fr)",
253252
"showButton": "Open modal (fr)",
254253
"usage": {
255254
"headerAsFC": "Header as functional component (fr)",
255+
"size":"Size (fr)",
256256
"withHeader": "With header (fr)",
257257
"withoutHeader": "Without header (fr)"
258258
}

0 commit comments

Comments
 (0)