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

import Alert, { EAlertVariant } from "@Front/Components/DesignSystem/Alert";
import Button, { EButtonSize, EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
import CircleProgress from "@Front/Components/DesignSystem/CircleProgress";
import Form from "@Front/Components/DesignSystem/Form";
import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
import TextField from "@Front/Components/DesignSystem/Form/TextField";
import IconButton, { EIconButtonVariant } from "@Front/Components/DesignSystem/IconButton";
import Modal from "@Front/Components/DesignSystem/Modal";
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, ETypoColor } from "@Front/Components/DesignSystem/Typography";
import NumberPicker from "@Front/Components/Elements/NumberPicker";
import Tabs from "@Front/Components/Elements/Tabs";
import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import useOpenable from "@Front/Hooks/useOpenable";
import Footer from "@Front/Components/DesignSystem/Footer";
import {
	ArchiveBoxIcon,
	ArrowLongLeftIcon,
	ArrowLongRightIcon,
	EllipsisHorizontalIcon,
	PencilSquareIcon,
	UsersIcon,
	XMarkIcon,
} from "@heroicons/react/24/outline";
import { useCallback, useMemo, useState } from "react";

import classes from "./classes.module.scss";
import ButtonWithSubMenu from "@Front/Components/Elements/ButtonWithSubMenu";

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

	const userDbArray = useMemo(
		() =>
			userDb.map((user) => ({
				label: user.username,
				key: user.id.toString(),
				value: user,
			})),
		[userDb],
	);

	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 />
			<div className={classes["root"]}>
				<div className={classes["components"]}>
					<Typography typo={ETypo.TEXT_LG_BOLD}>Button icon with menu</Typography>
					<ButtonWithSubMenu
						icon={<EllipsisHorizontalIcon />}
						subElements={[
							{
								icon: <UsersIcon />,
								text: "Modifier les collaborateurs",
								onClick: () => alert("yo"),
								hasSeparator: true,
							},
							{
								icon: <PencilSquareIcon />,
								text: "Modifier les informations du dossier",
								link: "/",
								hasSeparator: true,
							},
							{
								icon: <ArchiveBoxIcon />,
								text: "Archiver le dossier",
								link: "/",
								color: ETypoColor.ERROR_WEAK_CONTRAST,
							},
						]}
					/>
					<Typography typo={ETypo.TEXT_LG_BOLD}>Inputs</Typography>
					<Typography typo={ETypo.TEXT_SM_REGULAR}>Number picker avec min à 1 et max à 10</Typography>
					<NumberPicker defaultValue={1} onChange={() => {}} min={1} max={10} />
					<Form className={classes["inputs"]}>
						<TextField label="Label" placeholder="Placeholder" canCopy />
						<TextField label="Without copy" placeholder="Placeholder" />
						<TextField label="Disabled" placeholder="Placeholder" disabled canCopy />
						<TextField label="Disabled without copy" placeholder="Placeholder" disabled />
						<TextAreaField label="Textarea" placeholder="Placeholder" />
					</Form>

					<Typography typo={ETypo.TEXT_LG_BOLD}>Modal</Typography>
					<Button onClick={open}>Open Modal</Button>
					<Modal
						isOpen={isOpen}
						onClose={close}
						title={"Modal"}
						firstButton={{ children: "Annuler", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
						secondButton={{ children: "Confirmer", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}>
						<Typography typo={ETypo.TEXT_LG_REGULAR}>Modal Content</Typography>
					</Modal>

					<Typography typo={ETypo.TEXT_LG_BOLD}>Tabs</Typography>
					<Tabs<(typeof userDb)[number]> tabs={userDbArray} onSelect={onSelect} />
					<Typography typo={ETypo.TEXT_MD_REGULAR}>
						{selectedTab.id} - {selectedTab.username}
					</Typography>

					<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
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.PRIMARY}
							size={EButtonSize.SM}>
							Primary SM
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.PRIMARY}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.SM}>
							Primary SM
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.PRIMARY}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.SM}>
							Primary SM
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.PRIMARY}
							size={EButtonSize.MD}>
							Primary MD
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.PRIMARY}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.MD}>
							Primary MD
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.PRIMARY}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.MD}>
							Primary MD
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.PRIMARY}
							size={EButtonSize.LG}>
							Primary LG
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.PRIMARY}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.LG}>
							Primary LG
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.PRIMARY}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.LG}>
							Primary LG
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SECONDARY}
							size={EButtonSize.SM}>
							Secondary SM
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SECONDARY}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.SM}>
							Secondary SM
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SECONDARY}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.SM}>
							Secondary SM
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SECONDARY}
							size={EButtonSize.MD}>
							Secondary MD
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SECONDARY}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.MD}>
							Secondary MD
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SECONDARY}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.MD}>
							Secondary MD
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SECONDARY}
							size={EButtonSize.LG}>
							Secondary LG
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SECONDARY}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.LG}>
							Secondary LG
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SECONDARY}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.LG}>
							Secondary LG
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.NEUTRAL}
							size={EButtonSize.SM}>
							Neutral SM
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.NEUTRAL}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.SM}>
							Neutral SM
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.NEUTRAL}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.SM}>
							Neutral SM
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.NEUTRAL}
							size={EButtonSize.MD}>
							Neutral MD
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.NEUTRAL}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.MD}>
							Neutral MD
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.NEUTRAL}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.MD}>
							Neutral MD
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.NEUTRAL}
							size={EButtonSize.LG}>
							Neutral LG
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.NEUTRAL}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.LG}>
							Neutral LG
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.NEUTRAL}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.LG}>
							Neutral LG
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.ERROR}
							size={EButtonSize.SM}>
							Error SM
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.ERROR}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.SM}>
							Error SM
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.ERROR}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.SM}>
							Error SM
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.ERROR}
							size={EButtonSize.MD}>
							Error MD
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.ERROR}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.MD}>
							Error MD
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.ERROR}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.MD}>
							Error MD
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.ERROR}
							size={EButtonSize.LG}>
							Error LG
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.ERROR}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.LG}>
							Error LG
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.ERROR}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.LG}>
							Error LG
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.WARNING}
							size={EButtonSize.SM}>
							Warning SM
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.WARNING}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.SM}>
							Warning SM
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.WARNING}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.SM}>
							Warning SM
						</Button>
					</div>

					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.WARNING}
							size={EButtonSize.MD}>
							Warning MD
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.WARNING}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.MD}>
							Warning MD
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.WARNING}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.MD}>
							Warning MD
						</Button>
					</div>

					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.WARNING}
							size={EButtonSize.LG}>
							Warning LG
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.WARNING}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.LG}>
							Warning LG
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.WARNING}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.LG}>
							Warning LG
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SUCCESS}
							size={EButtonSize.SM}>
							Success SM
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SUCCESS}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.SM}>
							Success SM
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SUCCESS}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.SM}>
							Success SM
						</Button>
					</div>

					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SUCCESS}
							size={EButtonSize.MD}>
							Success MD
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SUCCESS}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.MD}>
							Success MD
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SUCCESS}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.MD}>
							Success MD
						</Button>
					</div>

					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SUCCESS}
							size={EButtonSize.LG}>
							Success LG
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SUCCESS}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.LG}>
							Success LG
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.SUCCESS}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.LG}>
							Success LG
						</Button>
					</div>
					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.INFO}
							size={EButtonSize.SM}>
							Info SM
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.INFO}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.SM}>
							Info SM
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.INFO}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.SM}>
							Info SM
						</Button>
					</div>

					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.INFO}
							size={EButtonSize.MD}>
							Info MD
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.INFO}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.MD}>
							Info MD
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.INFO}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.MD}>
							Info MD
						</Button>
					</div>

					<div className={classes["rows"]}>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.INFO}
							size={EButtonSize.LG}>
							Info LG
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.INFO}
							styletype={EButtonstyletype.OUTLINED}
							size={EButtonSize.LG}>
							Info LG
						</Button>
						<Button
							leftIcon={<ArrowLongLeftIcon />}
							rightIcon={<ArrowLongRightIcon />}
							variant={EButtonVariant.INFO}
							styletype={EButtonstyletype.TEXT}
							size={EButtonSize.LG}>
							Info LG
						</Button>
					</div>
					<div className={classes["rows"]}>
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.DEFAULT} />
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.NEUTRAL} />
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.PRIMARY} />
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.ERROR} />
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.SUCCESS} />
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.WARNING} />
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.INFO} />
						<IconButton icon={<XMarkIcon />} variant={EIconButtonVariant.INFO} disabled />
					</div>

					<Typography typo={ETypo.TEXT_LG_BOLD}>Alerts</Typography>
					<Alert
						title="Alert line which displays the main function or reason of the alert."
						description="Description"
						firstButton={{
							children: "Button",
							leftIcon: <ArrowLongLeftIcon />,
							rightIcon: <ArrowLongRightIcon />,
						}}
						secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
						variant={EAlertVariant.INFO}
						closeButton
					/>
					<Alert
						title="Alert line which displays the main function or reason of the alert."
						description="Description"
						firstButton={{
							children: "Button",
							leftIcon: <ArrowLongLeftIcon />,
							rightIcon: <ArrowLongRightIcon />,
						}}
						secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
						variant={EAlertVariant.ERROR}
					/>
					<Alert
						title="Alert line which displays the main function or reason of the alert."
						description="Description"
						firstButton={{
							children: "Button",
							leftIcon: <ArrowLongLeftIcon />,
							rightIcon: <ArrowLongRightIcon />,
						}}
						secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
						variant={EAlertVariant.WARNING}
					/>
					<Alert
						title="Alert line which displays the main function or reason of the alert."
						description="Description"
						firstButton={{
							children: "Button",
							leftIcon: <ArrowLongLeftIcon />,
							rightIcon: <ArrowLongRightIcon />,
						}}
						secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
						variant={EAlertVariant.SUCCESS}
					/>
					<Alert
						title="Alert line which displays the main function or reason of the alert."
						description="Description"
						firstButton={{
							children: "Button",
							leftIcon: <ArrowLongLeftIcon />,
							rightIcon: <ArrowLongRightIcon />,
						}}
						secondButton={{ children: "Button", leftIcon: <ArrowLongLeftIcon />, rightIcon: <ArrowLongRightIcon /> }}
						variant={EAlertVariant.NEUTRAL}
					/>
				</div>
				<Footer />
			</div>
		</DefaultTemplate>
	);
}