UIKit/src/App.tsx

import { Box, Button, Container, 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-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={`<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 />}
                />
                <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.main}
                        text1="theme.palette.purple.main"
                        text2="#944FEE"
                    />
                    <ColorShowcase
                        color={theme.palette.purple.dark}
                        text1="theme.palette.purple.dark"
                        text2="#7E2AEA"
                    />
                    <ColorShowcase
                        color={theme.palette.purple.light}
                        text1="theme.palette.purple.light"
                        text2="#C19AF5"
                    />
                    <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({ code, element }: {
    code: string;
    element: ReactNode;
}) {

    return (
        <Box sx={{
            display: "flex",
            flexDirection: "column",
            gap: 1,
            alignItems: "start",
        }}>
            <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>
    );
}