lecoffre-front/src/front/Components/Layouts/DesignSystem/index.tsx

import Button, { EButtonSize, EButtonStyleType, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
import Newsletter from "@Front/Components/DesignSystem/Newsletter";
import Table from "@Front/Components/DesignSystem/Table";
import Tag, { ETagColor, ETagVariant } from "@Front/Components/DesignSystem/Tag";
import Typography, { ETypo } from "@Front/Components/DesignSystem/Typography";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";

import classes from "./classes.module.scss";
import Tabs from "@Front/Components/Elements/Tabs";
import { useCallback, useState } from "react";

export default function DesignSystem() {
	const userDb = [
		{
			username: "Maxime",
			id: 1,
		},
		{
			username: "Vincent",
			id: 2,
		},
		{
			username: "Massi",
			id: 3,
		},
		{
			username: "Maxime",
			id: 4,
		},
		{
			username: "Arnaud",
			id: 5,
		},
	];

	const [selectedTab, setSelectedTab] = useState<(typeof userDb)[number]>(userDb[0]!);

	const onSelect = useCallback((value: (typeof userDb)[number]) => {
		setSelectedTab(value);
	}, []);

	return (
		<DefaultTemplate title={"DesignSystem"}>
			<Typography typo={ETypo.DISPLAY_LARGE}>DesignSystem</Typography>
			<Newsletter isOpen />
			<Typography typo={ETypo.TEXT_LG_BOLD}>Tabs</Typography>
			<Tabs<(typeof userDb)[number]>
				tabs={userDb.map((user) => ({
					label: user.username,
					key: user.id.toString(),
					value: user,
				}))}
				onSelect={onSelect}
			/>
			<div className={classes["tab-content"]}>
				<Typography typo={ETypo.TEXT_MD_REGULAR}>
					{selectedTab.id} - {selectedTab.username}
				</Typography>
			</div>
			<div className={classes["root"]}>
				<div className={classes["components"]}>
					<Typography typo={ETypo.TEXT_LG_BOLD}>Circle Progress</Typography>
					<div className={classes["rows"]}>
						<CircleProgress percentage={0} />
						<CircleProgress percentage={30} />
						<CircleProgress percentage={60} />
						<CircleProgress percentage={100} />
					</div>

					<Typography typo={ETypo.TEXT_LG_BOLD}>Tags</Typography>
					<div className={classes["rows"]}>
						<Tag color={ETagColor.INFO} variant={ETagVariant.REGULAR} label="Info" />
						<Tag color={ETagColor.SUCCESS} variant={ETagVariant.REGULAR} label="Success" />
						<Tag color={ETagColor.WARNING} variant={ETagVariant.REGULAR} label="Warning" />
						<Tag color={ETagColor.ERROR} variant={ETagVariant.REGULAR} label="Error" />
					</div>

					<Typography typo={ETypo.TEXT_LG_BOLD}>Table Tags</Typography>
					<div className={classes["rows"]}>
						<Tag color={ETagColor.INFO} variant={ETagVariant.SEMI_BOLD} label="INFO" />
						<Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="SUCCESS" />
						<Tag color={ETagColor.WARNING} variant={ETagVariant.SEMI_BOLD} label="WARNING" />
						<Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="ERROR" />
					</div>

					<Typography typo={ETypo.TEXT_LG_BOLD}>Table</Typography>
					<Table
						className={classes["table"]}
						header={[
							{
								key: "name",
								title: "Nom",
							},
							{
								key: "firstname",
								title: "Prénom",
							},
							{
								key: "button",
							},
						]}
						rows={[
							{
								key: "1",
								name: "Doe",
								firstname: "John",
								button: (
									<Button size={EButtonSize.SM} variant={EButtonVariant.PRIMARY}>
										Send email
									</Button>
								),
							},
							{
								key: "2",
								name: "Doe",
								firstname: "Jane",
								button: <Tag color={ETagColor.SUCCESS} variant={ETagVariant.SEMI_BOLD} label="Actif" />,
							},
							{
								key: "3",
								name: "Doe",
								firstname: "Jack",
								button: <Tag color={ETagColor.ERROR} variant={ETagVariant.SEMI_BOLD} label="Inactif" />,
							},
						]}
					/>

					<Typography typo={ETypo.TEXT_LG_BOLD}>Buttons</Typography>
					<div className={classes["rows"]}>
						<Button variant={EButtonVariant.PRIMARY}>Primary</Button>
						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.OUTLINED}>
							Primary
						</Button>
						<Button variant={EButtonVariant.PRIMARY} styleType={EButtonStyleType.TEXT}>
							Primary
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button variant={EButtonVariant.SECONDARY}>Secondary</Button>
						<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.OUTLINED}>
							Secondary
						</Button>
						<Button variant={EButtonVariant.SECONDARY} styleType={EButtonStyleType.TEXT}>
							Secondary
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button variant={EButtonVariant.NEUTRAL}>Neutral</Button>
						<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.OUTLINED}>
							Neutral
						</Button>
						<Button variant={EButtonVariant.NEUTRAL} styleType={EButtonStyleType.TEXT}>
							Neutral
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button variant={EButtonVariant.ERROR}>Error</Button>
						<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.OUTLINED}>
							Error
						</Button>
						<Button variant={EButtonVariant.ERROR} styleType={EButtonStyleType.TEXT}>
							Error
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button variant={EButtonVariant.WARNING}>Warning</Button>
						<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.OUTLINED}>
							Warning
						</Button>
						<Button variant={EButtonVariant.WARNING} styleType={EButtonStyleType.TEXT}>
							Warning
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button variant={EButtonVariant.SUCCESS}>SUCCESS</Button>
						<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.OUTLINED}>
							SUCCESS
						</Button>
						<Button variant={EButtonVariant.SUCCESS} styleType={EButtonStyleType.TEXT}>
							SUCCESS
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button variant={EButtonVariant.INFO}>INFO</Button>
						<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.OUTLINED}>
							INFO
						</Button>
						<Button variant={EButtonVariant.INFO} styleType={EButtonStyleType.TEXT}>
							INFO
						</Button>
					</div>
				</div>
			</div>
		</DefaultTemplate>
	);
}