275 lines
11 KiB
TypeScript
275 lines
11 KiB
TypeScript
import { Box, Button, Container, Pagination, SxProps, Theme, Typography, useTheme } from "@mui/material";
|
||
import { PenaLink } from "../lib/components/PenaLink";
|
||
import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
|
||
import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
|
||
import jsx from "react-syntax-highlighter/dist/esm/languages/prism/tsx";
|
||
import { ReactNode } from "react";
|
||
import { BurgerButton, CloseButton, CloseButtonSmall, PenaTextField, WalletButton } from "../lib";
|
||
import { AvatarButton } from "../lib/components/AvatarButton";
|
||
import { LogoutButton } from "../lib/components/LogoutButton";
|
||
|
||
|
||
SyntaxHighlighter.registerLanguage("jsx", jsx);
|
||
|
||
export function App() {
|
||
const theme = useTheme();
|
||
|
||
return (
|
||
<Box sx={{
|
||
backgroundColor: theme.palette.bg.main,
|
||
minHeight: "100dvh",
|
||
width: "100%",
|
||
}}>
|
||
<Container sx={{
|
||
py: 4,
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: 3,
|
||
alignItems: "start",
|
||
color: "white",
|
||
}}>
|
||
<Typography variant="h4">Components</Typography>
|
||
<ComponentWithCode
|
||
code={`<Button variant="pena-contained-dark">Подробнее</Button>`}
|
||
element={<Button variant="pena-contained-dark">Подробнее</Button>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Button variant="pena-contained-light">Подробнее</Button>`}
|
||
element={<Button variant="pena-contained-light">Подробнее</Button>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Button variant="pena-outlined-dark">Подробнее</Button>`}
|
||
element={<Button variant="pena-outlined-dark">Подробнее</Button>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Button variant="pena-outlined-light">Подробнее</Button>`}
|
||
element={<Button variant="pena-outlined-light">Подробнее</Button>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Button variant="pena-outlined-purple">Перейти</Button>`}
|
||
element={<Button variant="pena-outlined-purple">Перейти</Button>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Button variant="pena-contained-white1">Купить</Button>`}
|
||
element={<Button variant="pena-contained-white1">Купить</Button>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Button variant="pena-contained-white2">Купить</Button>`}
|
||
element={<Button variant="pena-contained-white2">Выбрать</Button>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Button variant="pena-navitem-dark">Подробнее</Button>`}
|
||
element={<Button variant="pena-navitem-dark">Подробнее</Button>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Button variant="pena-navitem-light">Подробнее</Button>`}
|
||
element={<Button variant="pena-navitem-light">Подробнее</Button>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Button variant="pena-text">Подробнее</Button>`}
|
||
element={<Button variant="pena-text">Подробнее</Button>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<PenaLink>Подробнее</PenaLink>`}
|
||
element={<PenaLink href="/">Подробнее</PenaLink>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<PenaTextField />`}
|
||
element={<PenaTextField />}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<AvatarButton>AB</AvatarButton>`}
|
||
element={<AvatarButton>AB</AvatarButton>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<LogoutButton />`}
|
||
element={<LogoutButton />}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<WalletButton />`}
|
||
element={<WalletButton />}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<CloseButton />`}
|
||
element={<CloseButton />}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<CloseButtonSmall />`}
|
||
element={<CloseButtonSmall />}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<BurgerButton />`}
|
||
element={<BurgerButton />}
|
||
/>
|
||
<ComponentWithCode
|
||
sx={{
|
||
p: 1,
|
||
backgroundColor: theme.palette.background.default,
|
||
}}
|
||
code={`<Pagination variant="pena-pagination" />`}
|
||
element={<Pagination
|
||
variant="pena-pagination"
|
||
count={10}
|
||
page={1}
|
||
/>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Typography variant="infographic">Some text</Typography>`}
|
||
element={<Typography variant="infographic">Lorem ipsum dolor sit amet</Typography>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Typography variant="p1">Some text</Typography>`}
|
||
element={<Typography variant="p1">Lorem ipsum dolor sit amet</Typography>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Typography variant="price">Some text</Typography>`}
|
||
element={<Typography variant="price">Lorem ipsum dolor sit amet</Typography>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Typography variant="oldPrice">Some text</Typography>`}
|
||
element={<Typography variant="oldPrice">Lorem ipsum dolor sit amet</Typography>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Typography variant="t1">Some text</Typography>`}
|
||
element={<Typography variant="t1">Lorem ipsum dolor sit amet</Typography>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Typography variant="pena-card-header1">Some text</Typography>`}
|
||
element={<Typography variant="pena-card-header1">Lorem ipsum dolor sit amet</Typography>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Typography variant="pena-h1">Some text</Typography>`}
|
||
element={<Typography variant="pena-h1">Lorem ipsum dolor sit amet</Typography>}
|
||
/>
|
||
<ComponentWithCode
|
||
code={`<Typography variant="pena-h3">Some text</Typography>`}
|
||
element={<Typography variant="pena-h3">Lorem ipsum dolor sit amet</Typography>}
|
||
/>
|
||
<Typography variant="h4">Colors</Typography>
|
||
<Typography variant="body2">Click text to copy</Typography>
|
||
<Box sx={{
|
||
width: "100%",
|
||
display: "flex",
|
||
flexWrap: "wrap",
|
||
gap: 1,
|
||
}}>
|
||
<ColorShowcase
|
||
color={theme.palette.purple.light}
|
||
text1="theme.palette.purple.light"
|
||
text2="#944FEE"
|
||
/>
|
||
<ColorShowcase
|
||
color={theme.palette.purple.main}
|
||
text1="theme.palette.purple.main"
|
||
text2="#7E2AEA"
|
||
/>
|
||
<ColorShowcase
|
||
color={theme.palette.purple.dark}
|
||
text1="theme.palette.purple.dark"
|
||
text2="#581CA7"
|
||
/>
|
||
<ColorShowcase
|
||
color={theme.palette.background.default}
|
||
text1="theme.palette.background.default"
|
||
text2="#F2F3F7"
|
||
/>
|
||
<ColorShowcase
|
||
color={theme.palette.bg.main}
|
||
text1="theme.palette.bg.main"
|
||
text2="#333647"
|
||
/>
|
||
<ColorShowcase
|
||
color={theme.palette.bg.dark}
|
||
text1="theme.palette.bg.dark"
|
||
text2="#252734"
|
||
/>
|
||
<ColorShowcase
|
||
color={theme.palette.gray.main}
|
||
text1="theme.palette.gray.main"
|
||
text2="#9A9AAF"
|
||
/>
|
||
<ColorShowcase
|
||
color={theme.palette.gray.dark}
|
||
text1="theme.palette.gray.dark"
|
||
text2="#4D4D4D"
|
||
/>
|
||
<ColorShowcase
|
||
color={theme.palette.orange.main}
|
||
text1="theme.palette.orange.main"
|
||
text2="#FB5607"
|
||
/>
|
||
<ColorShowcase
|
||
color={theme.palette.orange.light}
|
||
text1="theme.palette.orange.light"
|
||
text2="#FC712F"
|
||
/>
|
||
</Box>
|
||
</Container>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
function ComponentWithCode({ sx, code, element }: {
|
||
sx?: SxProps<Theme>;
|
||
code: string;
|
||
element: ReactNode;
|
||
}) {
|
||
|
||
return (
|
||
<Box sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
gap: 1,
|
||
alignItems: "start",
|
||
...sx,
|
||
}}>
|
||
<SyntaxHighlighter
|
||
language="jsx"
|
||
style={oneDark}
|
||
customStyle={{
|
||
padding: "4px",
|
||
fontSize: "16px",
|
||
margin: 0,
|
||
}}
|
||
>
|
||
{code}
|
||
</SyntaxHighlighter>
|
||
{element}
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
function ColorShowcase({ color, text1, text2 }: {
|
||
text1: string;
|
||
text2: string;
|
||
color: string;
|
||
}) {
|
||
|
||
return (
|
||
<Box sx={{
|
||
backgroundColor: color,
|
||
width: "100%",
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
maxWidth: "350px",
|
||
p: 2,
|
||
gap: 1,
|
||
border: "1px solid white",
|
||
overflow: "hidden",
|
||
}}>
|
||
<Typography
|
||
onClick={() => navigator.clipboard.writeText(text1)}
|
||
sx={{
|
||
textShadow: "0 0 6px black",
|
||
}}
|
||
>{text1}</Typography>
|
||
<Typography
|
||
onClick={() => navigator.clipboard.writeText(text2)}
|
||
sx={{
|
||
textShadow: "0 0 6px black",
|
||
}}
|
||
>{text2}</Typography>
|
||
</Box>
|
||
);
|
||
}
|