1060 lines
39 KiB
TypeScript
1060 lines
39 KiB
TypeScript
import { GetStaticProps } from "next";
|
|
import { ReactNode, useState } from "react";
|
|
import Slider from "rc-slider";
|
|
import { AppLayout, AppLayoutRequired } from "components/AppLayout";
|
|
import { getOpenGraph } from "helpers/openGraph";
|
|
import { ContentPanel, ContentPanelWidthSizes } from "components/Containers/ContentPanel";
|
|
import { Button } from "components/Inputs/Button";
|
|
import { cIf, cJoin } from "helpers/className";
|
|
import { HorizontalLine } from "components/HorizontalLine";
|
|
import { Switch } from "components/Inputs/Switch";
|
|
import { TextInput } from "components/Inputs/TextInput";
|
|
import { Select } from "components/Inputs/Select";
|
|
import { WithLabel } from "components/Inputs/WithLabel";
|
|
import { NavOption } from "components/PanelComponents/NavOption";
|
|
import { ButtonGroup } from "components/Inputs/ButtonGroup";
|
|
import { PreviewCard } from "components/PreviewCard";
|
|
import { ChroniclePreview } from "components/Chronicles/ChroniclePreview";
|
|
import { PreviewFolder } from "components/Contents/PreviewFolder";
|
|
import { getFormat } from "helpers/i18n";
|
|
import { AudioPlayer, VideoPlayer } from "components/Player";
|
|
|
|
/*
|
|
* ╭────────╮
|
|
* ──────────────────────────────────────────╯ PAGE ╰─────────────────────────────────────────────
|
|
*/
|
|
|
|
interface Props extends AppLayoutRequired {}
|
|
|
|
const DesignSystem = (props: Props): JSX.Element => {
|
|
const [switchState, setSwitchState] = useState(false);
|
|
const [selectState, setSelectState] = useState(0);
|
|
const [sliderState, setSliderState] = useState(5);
|
|
const [textInputState, setTextInputState] = useState("");
|
|
const [textAreaState, setTextAreaState] = useState("");
|
|
const [buttonGroupState, setButtonGroupState] = useState(0);
|
|
const [verticalButtonGroupState, setVerticalButtonGroupState] = useState(0);
|
|
|
|
const contentPanel = (
|
|
<ContentPanel
|
|
className="grid place-items-center text-center"
|
|
width={ContentPanelWidthSizes.Full}>
|
|
<h1 className="mb-8 text-4xl">Design System</h1>
|
|
|
|
<h2 className="mb-4 text-3xl">Colors</h2>
|
|
<WhiteSection className="grid grid-cols-[repeat(7,auto)] place-items-center gap-4">
|
|
<p />
|
|
<p>Highlight</p>
|
|
<p>Light</p>
|
|
<p>Mid</p>
|
|
<p>Dark</p>
|
|
<p>Shade</p>
|
|
<p>Black</p>
|
|
|
|
<p>Light theme</p>
|
|
<ColorSquare className="bg-highlight" />
|
|
<ColorSquare className="bg-light" />
|
|
<ColorSquare className="bg-mid" />
|
|
<ColorSquare className="bg-dark" />
|
|
<ColorSquare className="bg-shade" />
|
|
<ColorSquare className="bg-black" />
|
|
|
|
<p>Dark theme</p>
|
|
<ColorSquare className="bg-highlight set-theme-dark" />
|
|
<ColorSquare className="bg-light set-theme-dark" />
|
|
<ColorSquare className="bg-mid set-theme-dark" />
|
|
<ColorSquare className="bg-dark set-theme-dark" />
|
|
<ColorSquare className="bg-shade set-theme-dark" />
|
|
<ColorSquare className="bg-black set-theme-dark" />
|
|
</WhiteSection>
|
|
|
|
<h2 className="mb-4 text-3xl">Fonts</h2>
|
|
<WhiteSection className="grid grid-cols-[repeat(5,auto)] place-items-start gap-x-12 gap-y-2">
|
|
<p />
|
|
<p className="font-headers text-xl text-black/50">Vollkorn</p>
|
|
<p className="font-body text-xl text-black/50">Zen Maru Gothic</p>
|
|
<p className="font-mono text-xl text-black/50">Share Tech Mono</p>
|
|
<p className="font-openDyslexic text-xl text-black/50">Open Dyslexic</p>
|
|
|
|
<p className="text-3xl text-black/30">3XL</p>
|
|
<p className="font-headers text-3xl">Header H3XL</p>
|
|
<p />
|
|
<p />
|
|
<p className="font-openDyslexic text-3xl">Dyslexia D3XL</p>
|
|
|
|
<p className="text-2xl text-black/30">2XL</p>
|
|
<p className="font-headers text-2xl">Header H2XL</p>
|
|
<p />
|
|
<p />
|
|
<p className="font-openDyslexic text-2xl">Dyslexia D2XL</p>
|
|
|
|
<p className="text-xl text-black/30">XL</p>
|
|
<p className="font-headers text-xl">Header HXL</p>
|
|
<p className="font-body text-xl">Body BXL</p>
|
|
<p className="font-mono text-xl">Mono MXL</p>
|
|
<p className="font-openDyslexic text-xl">Dyslexia DXL</p>
|
|
|
|
<p className="text-lg text-black/30">LG</p>
|
|
<p className="font-headers text-lg">Header HLG</p>
|
|
<p className="font-body text-lg">Body BLG</p>
|
|
<p className="font-mono text-lg">Mono MLG</p>
|
|
<p className="font-openDyslexic text-lg">Dyslexia DLG</p>
|
|
|
|
<p className="text-base text-black/30">B</p>
|
|
<p />
|
|
<p className="font-body text-base">Body BB</p>
|
|
<p className="font-mono text-base">Mono MB</p>
|
|
<p className="font-openDyslexic text-base">Dyslexia DB</p>
|
|
|
|
<p className="text-sm text-black/30">SM</p>
|
|
<p />
|
|
<p className="font-body text-sm">Body BSM</p>
|
|
<p />
|
|
<p className="font-openDyslexic text-sm">Dyslexia DSM</p>
|
|
|
|
<p className="text-xs text-black/30">XS</p>
|
|
<p />
|
|
<p />
|
|
<p />
|
|
<p className="font-openDyslexic text-xs">Dyslexia DXS</p>
|
|
</WhiteSection>
|
|
|
|
<h2 className="mb-4 text-3xl">Elevations</h2>
|
|
<TwoThemedSection
|
|
className="grid grid-cols-[repeat(7,auto)] place-content-center gap-4
|
|
text-left">
|
|
<ShadowSquare className="bg-light shadow-inner shadow-shade" text="IN" />
|
|
<ShadowSquare className="bg-light shadow-inner-sm shadow-shade" text="IN/SM" />
|
|
<ShadowSquare className="bg-light shadow-sm shadow-shade" text="SM" />
|
|
<ShadowSquare className="bg-light shadow-md shadow-shade" text="MD" />
|
|
<ShadowSquare className="bg-light shadow-lg shadow-shade" text="LG" />
|
|
<ShadowSquare className="bg-light shadow-xl shadow-shade" text="XL" />
|
|
<ShadowSquare className="bg-light shadow-2xl shadow-shade" text="2XL" />
|
|
|
|
<p className="mt-6">Drop shadow</p>
|
|
<p />
|
|
<ShadowSquare className="bg-light drop-shadow-sm shadow-shade" text="SM" />
|
|
<ShadowSquare className="bg-light drop-shadow-md shadow-shade" text="MD" />
|
|
<ShadowSquare className="bg-light drop-shadow-lg shadow-shade" text="LG" />
|
|
<ShadowSquare className="bg-light drop-shadow-xl shadow-shade" text="XL" />
|
|
<ShadowSquare className="bg-light drop-shadow-2xl shadow-shade" text="2XL" />
|
|
|
|
<p className="mt-6">Black</p>
|
|
<p />
|
|
<ShadowSquare className="bg-black text-light shadow-sm shadow-black" text="SM" />
|
|
<ShadowSquare className="bg-black text-light shadow-md shadow-black" text="MD" />
|
|
<ShadowSquare className="bg-black text-light shadow-lg shadow-black" text="LG" />
|
|
<ShadowSquare className="bg-black text-light shadow-xl shadow-black" text="XL" />
|
|
<ShadowSquare className="bg-black text-light shadow-2xl shadow-black" text="2XL" />
|
|
|
|
<p className="mt-6">
|
|
Drop shadow
|
|
<br />
|
|
black
|
|
</p>
|
|
<p />
|
|
<ShadowSquare className="bg-black text-light drop-shadow-sm shadow-black" text="SM" />
|
|
<ShadowSquare className="bg-black text-light drop-shadow-md shadow-black" text="MD" />
|
|
<ShadowSquare className="bg-black text-light drop-shadow-lg shadow-black" text="LG" />
|
|
<ShadowSquare className="bg-black text-light drop-shadow-xl shadow-black" text="XL" />
|
|
<ShadowSquare className="bg-black text-light drop-shadow-2xl shadow-black" text="2XL" />
|
|
</TwoThemedSection>
|
|
|
|
<h2 className="mb-4 text-3xl">Buttons</h2>
|
|
<TwoThemedSection className="grid gap-4">
|
|
<h3 className="text-xl">Normal sized</h3>
|
|
|
|
<div className="grid grid-cols-[repeat(4,auto)] place-content-center gap-4">
|
|
<p />
|
|
<p>Icon</p>
|
|
<p>Text</p>
|
|
<p>Icon + Text</p>
|
|
|
|
<p className="self-center justify-self-start">Normal</p>
|
|
<Button icon="check" />
|
|
<Button text="Label" />
|
|
<Button icon="navigate_before" text="Label" />
|
|
|
|
<p className="self-center justify-self-start">Active</p>
|
|
<Button icon="camera" active />
|
|
<Button text="Label" active />
|
|
<Button icon="navigate_before" text="Label" active />
|
|
|
|
<p className="self-center justify-self-start">Disabled</p>
|
|
<Button icon="air" disabled />
|
|
<Button text="Label" disabled />
|
|
<Button icon="navigate_before" text="Label" disabled />
|
|
|
|
<p className="self-center justify-self-start">Badge</p>
|
|
<Button icon="snooze" badgeNumber={5} />
|
|
<Button text="Label" badgeNumber={12} />
|
|
<Button icon="navigate_before" text="Label" badgeNumber={201} />
|
|
</div>
|
|
|
|
<HorizontalLine />
|
|
<h3 className="-mt-6 text-xl">Small sized</h3>
|
|
|
|
<div className="grid grid-cols-[repeat(4,auto)] place-content-center gap-4">
|
|
<p className="self-center justify-self-start">Normal</p>
|
|
<Button icon="check" size={"small"} />
|
|
<Button text="Label" size={"small"} />
|
|
<Button icon="navigate_before" text="Label" size={"small"} />
|
|
|
|
<p className="self-center justify-self-start">Active</p>
|
|
<Button icon="camera" active size={"small"} />
|
|
<Button text="Label" active size={"small"} />
|
|
<Button icon="navigate_before" text="Label" active size={"small"} />
|
|
|
|
<p className="self-center justify-self-start">Disabled</p>
|
|
<Button icon="air" disabled size={"small"} />
|
|
<Button text="Label" disabled size={"small"} />
|
|
<Button icon="navigate_before" text="Label" disabled size={"small"} />
|
|
|
|
<p className="self-center justify-self-start">Badge</p>
|
|
<Button icon="snooze" badgeNumber={5} size={"small"} />
|
|
<Button text="Label" badgeNumber={12} size={"small"} />
|
|
<Button icon="navigate_before" text="Label" badgeNumber={201} size={"small"} />
|
|
</div>
|
|
|
|
<HorizontalLine />
|
|
<h3 className="-mt-6 text-xl">Groups</h3>
|
|
<div className="grid grid-cols-2 place-items-center gap-4">
|
|
<p>Normal sized</p>
|
|
<p>Small sized</p>
|
|
<ButtonGroup buttonsProps={[{ icon: "call_end" }, { icon: "zoom_in_map" }]} />
|
|
<ButtonGroup
|
|
buttonsProps={[{ icon: "call_end" }, { icon: "zoom_in_map" }]}
|
|
size="small"
|
|
/>
|
|
<ButtonGroup
|
|
buttonsProps={[{ icon: "car_crash" }, { icon: "timelapse" }, { icon: "leak_add" }]}
|
|
/>
|
|
<ButtonGroup
|
|
buttonsProps={[{ icon: "car_crash" }, { icon: "timelapse" }, { icon: "leak_add" }]}
|
|
size="small"
|
|
/>
|
|
<ButtonGroup
|
|
buttonsProps={[
|
|
{ icon: "car_crash" },
|
|
{ icon: "timelapse", text: "Label", active: true },
|
|
{ text: "Another Label" },
|
|
{ icon: "cable" },
|
|
]}
|
|
/>
|
|
<ButtonGroup
|
|
buttonsProps={[
|
|
{ icon: "car_crash" },
|
|
{ icon: "timelapse", text: "Label", active: true },
|
|
{ text: "Another Label" },
|
|
{ icon: "cable" },
|
|
]}
|
|
size="small"
|
|
/>
|
|
<ButtonGroup
|
|
buttonsProps={[
|
|
{
|
|
text: "Try me!",
|
|
active: buttonGroupState === 0,
|
|
onClick: () => setButtonGroupState(0),
|
|
},
|
|
{
|
|
icon: "ad_units",
|
|
text: "Label",
|
|
active: buttonGroupState === 1,
|
|
onClick: () => setButtonGroupState(1),
|
|
},
|
|
{
|
|
text: "Yet another label",
|
|
active: buttonGroupState === 2,
|
|
onClick: () => setButtonGroupState(2),
|
|
},
|
|
{
|
|
icon: "security",
|
|
active: buttonGroupState === 3,
|
|
onClick: () => setButtonGroupState(3),
|
|
},
|
|
]}
|
|
/>
|
|
<ButtonGroup
|
|
buttonsProps={[
|
|
{
|
|
text: "Try me!",
|
|
active: buttonGroupState === 0,
|
|
onClick: () => setButtonGroupState(0),
|
|
},
|
|
{
|
|
icon: "ad_units",
|
|
text: "Label",
|
|
active: buttonGroupState === 1,
|
|
onClick: () => setButtonGroupState(1),
|
|
},
|
|
{
|
|
text: "Yet another label",
|
|
active: buttonGroupState === 2,
|
|
onClick: () => setButtonGroupState(2),
|
|
},
|
|
{
|
|
icon: "security",
|
|
active: buttonGroupState === 3,
|
|
onClick: () => setButtonGroupState(3),
|
|
},
|
|
]}
|
|
size="small"
|
|
/>
|
|
</div>
|
|
|
|
<HorizontalLine />
|
|
|
|
<h3 className="-mt-6 text-xl">Vertical groups</h3>
|
|
<div className="grid grid-cols-2 place-items-center gap-4">
|
|
<p>Normal sized</p>
|
|
<p>Small sized</p>
|
|
<ButtonGroup buttonsProps={[{ icon: "call_end" }, { icon: "zoom_in_map" }]} vertical />
|
|
<ButtonGroup
|
|
buttonsProps={[{ icon: "call_end" }, { icon: "zoom_in_map" }]}
|
|
vertical
|
|
size="small"
|
|
/>
|
|
<ButtonGroup
|
|
buttonsProps={[{ icon: "car_crash" }, { icon: "timelapse" }, { icon: "leak_add" }]}
|
|
vertical
|
|
/>
|
|
<ButtonGroup
|
|
buttonsProps={[{ icon: "car_crash" }, { icon: "timelapse" }, { icon: "leak_add" }]}
|
|
vertical
|
|
size="small"
|
|
/>
|
|
<ButtonGroup
|
|
buttonsProps={[
|
|
{ icon: "car_crash" },
|
|
{ icon: "timelapse", text: "Label", active: true },
|
|
{ text: "Another Label" },
|
|
{ icon: "cable" },
|
|
]}
|
|
vertical
|
|
/>
|
|
<ButtonGroup
|
|
buttonsProps={[
|
|
{ icon: "car_crash" },
|
|
{ icon: "timelapse", text: "Label", active: true },
|
|
{ text: "Another Label" },
|
|
{ icon: "cable" },
|
|
]}
|
|
vertical
|
|
size="small"
|
|
/>
|
|
<ButtonGroup
|
|
buttonsProps={[
|
|
{
|
|
text: "Try me!",
|
|
active: verticalButtonGroupState === 0,
|
|
onClick: () => setVerticalButtonGroupState(0),
|
|
},
|
|
{
|
|
icon: "ad_units",
|
|
text: "Label",
|
|
active: verticalButtonGroupState === 1,
|
|
onClick: () => setVerticalButtonGroupState(1),
|
|
},
|
|
{
|
|
text: "Yet another label",
|
|
active: verticalButtonGroupState === 2,
|
|
onClick: () => setVerticalButtonGroupState(2),
|
|
},
|
|
{
|
|
icon: "security",
|
|
active: verticalButtonGroupState === 3,
|
|
onClick: () => setVerticalButtonGroupState(3),
|
|
},
|
|
]}
|
|
vertical
|
|
/>
|
|
<ButtonGroup
|
|
buttonsProps={[
|
|
{
|
|
text: "Try me!",
|
|
active: verticalButtonGroupState === 0,
|
|
onClick: () => setVerticalButtonGroupState(0),
|
|
},
|
|
{
|
|
icon: "ad_units",
|
|
text: "Label",
|
|
active: verticalButtonGroupState === 1,
|
|
onClick: () => setVerticalButtonGroupState(1),
|
|
},
|
|
{
|
|
text: "Yet another label",
|
|
active: verticalButtonGroupState === 2,
|
|
onClick: () => setVerticalButtonGroupState(2),
|
|
},
|
|
{
|
|
icon: "security",
|
|
active: verticalButtonGroupState === 3,
|
|
onClick: () => setVerticalButtonGroupState(3),
|
|
},
|
|
]}
|
|
vertical
|
|
size="small"
|
|
/>
|
|
</div>
|
|
</TwoThemedSection>
|
|
|
|
<h2 className="mb-4 text-3xl">Inputs</h2>
|
|
<TwoThemedSection className="grid place-content-center gap-4">
|
|
<h3 className="text-xl">Switches</h3>
|
|
<WithLabel label="Off">
|
|
<Switch value={false} onClick={() => null} />
|
|
</WithLabel>
|
|
<WithLabel label="On">
|
|
<Switch value={true} onClick={() => null} />
|
|
</WithLabel>
|
|
<WithLabel label="Disabled (Off)">
|
|
<Switch value={false} onClick={() => null} disabled />
|
|
</WithLabel>
|
|
<WithLabel label="Disabled (On)">
|
|
<Switch value={true} onClick={() => null} disabled />
|
|
</WithLabel>
|
|
<WithLabel label={`Try me! (${switchState ? "On" : "Off"})`}>
|
|
<Switch value={switchState} onClick={() => setSwitchState((current) => !current)} />
|
|
</WithLabel>
|
|
|
|
<HorizontalLine />
|
|
<h3 className="-mt-6 mb-2 text-xl">Selects</h3>
|
|
|
|
<WithLabel label="Empty">
|
|
<Select
|
|
value={-1}
|
|
options={["Option 1", "Option 2", "Option 3", "Option 4"]}
|
|
onChange={() => null}
|
|
/>
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Filled">
|
|
<Select
|
|
value={0}
|
|
options={["Option 1", "Option 2", "Option 3", "Option 4"]}
|
|
onChange={() => null}
|
|
/>
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Filled + allow empty">
|
|
<Select
|
|
value={0}
|
|
options={["Option 1", "Option 2", "Option 3", "Option 4"]}
|
|
onChange={() => null}
|
|
allowEmpty
|
|
/>
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Disabled">
|
|
<Select
|
|
value={0}
|
|
options={["Option 1", "Option 2", "Option 3", "Option 4"]}
|
|
onChange={() => null}
|
|
allowEmpty
|
|
disabled
|
|
/>
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Try me!">
|
|
<Select
|
|
value={selectState}
|
|
options={["Option 1", "Option 2", "Option 3", "Option 4"]}
|
|
onChange={(index) => setSelectState(index)}
|
|
allowEmpty
|
|
/>
|
|
</WithLabel>
|
|
|
|
<HorizontalLine />
|
|
<h3 className="-mt-6 mb-2 text-xl">Text inputs</h3>
|
|
|
|
<WithLabel label="Empty">
|
|
<TextInput value="" onChange={() => null} />
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Placeholder">
|
|
<TextInput value="" placeholder="Placeholder..." onChange={() => null} />
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Filled">
|
|
<TextInput value="Value" onChange={() => null} />
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Disabled">
|
|
<TextInput value="Value" onChange={() => null} disabled />
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Try me!">
|
|
<TextInput
|
|
value={textInputState}
|
|
onChange={setTextInputState}
|
|
placeholder={"Placeholder..."}
|
|
/>
|
|
</WithLabel>
|
|
|
|
<HorizontalLine />
|
|
|
|
<h3 className="-mt-6 mb-2 text-xl">Text area</h3>
|
|
|
|
<WithLabel label="Empty">
|
|
<textarea value="" name="test" title="aria" readOnly />
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Placeholder">
|
|
<textarea value="" placeholder="Placeholder..." readOnly />
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Filled">
|
|
<textarea
|
|
value="Eveniet occaecati qui dicta explicabo dolor.
|
|
Ipsum quam dolorum dolores.
|
|
Neque dolor nihil neque tempora.
|
|
Mollitia voluptates iste qui et temporibus eum omnis.
|
|
Itaque atque architecto maiores qui et optio.
|
|
Et consequatur dolorem omnis cupiditate."
|
|
placeholder="Placeholder..."
|
|
readOnly
|
|
/>
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Not resizable">
|
|
<textarea
|
|
className="resize-none"
|
|
value="Eveniet occaecati qui dicta explicabo dolor.
|
|
Ipsum quam dolorum dolores.
|
|
Neque dolor nihil neque tempora.
|
|
Mollitia voluptates iste qui et temporibus eum omnis.
|
|
Itaque atque architecto maiores qui et optio.
|
|
Et consequatur dolorem omnis cupiditate."
|
|
placeholder="Placeholder..."
|
|
readOnly
|
|
/>
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Disabled">
|
|
<textarea
|
|
value="Eveniet occaecati qui dicta explicabo dolor.
|
|
Ipsum quam dolorum dolores.
|
|
Neque dolor nihil neque tempora.
|
|
Mollitia voluptates iste qui et temporibus eum omnis.
|
|
Itaque atque architecto maiores qui et optio.
|
|
Et consequatur dolorem omnis cupiditate."
|
|
placeholder="Placeholder..."
|
|
disabled
|
|
readOnly
|
|
/>
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Try me!">
|
|
<textarea
|
|
value={textAreaState}
|
|
onChange={(event) => setTextAreaState(event.target.value)}
|
|
placeholder="Placeholder..."
|
|
/>
|
|
</WithLabel>
|
|
|
|
<HorizontalLine />
|
|
|
|
<h3 className="-mt-6 mb-2 text-xl">Slider</h3>
|
|
<WithLabel label="Normal">
|
|
<Slider value={5} />
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Disabled">
|
|
<Slider value={5} disabled />
|
|
</WithLabel>
|
|
|
|
<WithLabel label="Try me!">
|
|
<Slider
|
|
value={sliderState}
|
|
max={100}
|
|
onChange={(event) => {
|
|
const value = (Array.isArray(event) ? event[0] : event) ?? 0;
|
|
setSliderState(() => value);
|
|
}}
|
|
/>
|
|
</WithLabel>
|
|
</TwoThemedSection>
|
|
|
|
<h2 className="mb-4 text-3xl">Down-Pressables</h2>
|
|
<TwoThemedSection className="grid gap-4">
|
|
<h3 className="mb-2 text-xl">Navigation Options</h3>
|
|
|
|
<div className="grid grid-cols-[repeat(6,auto)] place-items-center gap-4">
|
|
<p />
|
|
<p>Title</p>
|
|
<p>
|
|
Title
|
|
<br />+ Icon
|
|
</p>
|
|
<p>
|
|
Title
|
|
<br />+ Subtitle
|
|
</p>
|
|
<p>
|
|
Title
|
|
<br />+ Subtitle
|
|
<br />+ Icon
|
|
</p>
|
|
<p>Reduced</p>
|
|
|
|
<p>Normal</p>
|
|
<NavOption title="Title" url="#" />
|
|
<NavOption icon="home" title="Title" url="#" />
|
|
<NavOption title="Title" subtitle="This is a subtitle" url="#" />
|
|
<NavOption title="Title" subtitle="This is a subtitle" url="#" icon="calendar_month" />
|
|
<NavOption
|
|
title="Title"
|
|
subtitle="This is a subtitle"
|
|
url="#"
|
|
icon="account_balance"
|
|
reduced
|
|
/>
|
|
|
|
<p>Border</p>
|
|
<NavOption title="Title" url="#" border />
|
|
<NavOption icon="travel_explore" title="Title" url="#" border />
|
|
<NavOption title="Title" subtitle="This is a subtitle" url="#" border />
|
|
<NavOption title="Title" subtitle="This is a subtitle" url="#" icon="help" border />
|
|
<NavOption
|
|
title="Title"
|
|
subtitle="This is a subtitle"
|
|
url="#"
|
|
icon="table_restaurant"
|
|
border
|
|
reduced
|
|
/>
|
|
|
|
<p>Active</p>
|
|
<NavOption title="Title" url="#" active />
|
|
<NavOption icon="hail" title="Title" url="#" active />
|
|
<NavOption title="Title" subtitle="This is a subtitle" url="#" active />
|
|
<NavOption title="Title" subtitle="This is a subtitle" url="#" icon="grading" active />
|
|
<NavOption
|
|
title="Title"
|
|
subtitle="This is a subtitle"
|
|
url="#"
|
|
icon="timer"
|
|
active
|
|
reduced
|
|
/>
|
|
|
|
<p>
|
|
Active
|
|
<br />+ Border
|
|
</p>
|
|
<NavOption title="Title" url="#" active />
|
|
<NavOption icon="upcoming" title="Title" url="#" active border />
|
|
<NavOption title="Title" subtitle="This is a subtitle" url="#" active border />
|
|
<NavOption
|
|
title="Title"
|
|
subtitle="This is a subtitle"
|
|
url="#"
|
|
icon="gamepad"
|
|
active
|
|
border
|
|
/>
|
|
<NavOption
|
|
title="Title"
|
|
subtitle="This is a subtitle"
|
|
url="#"
|
|
icon="scale"
|
|
active
|
|
border
|
|
reduced
|
|
/>
|
|
|
|
<p>Disabled</p>
|
|
<NavOption title="Title" url="#" disabled />
|
|
<NavOption icon="lan" title="Title" url="#" disabled />
|
|
<NavOption title="Title" subtitle="This is a subtitle" url="#" disabled />
|
|
<NavOption
|
|
title="Title"
|
|
subtitle="This is a subtitle"
|
|
url="#"
|
|
icon="align_horizontal_right"
|
|
disabled
|
|
/>
|
|
<NavOption
|
|
title="Title"
|
|
subtitle="This is a subtitle"
|
|
url="#"
|
|
icon="youtube_searched_for"
|
|
reduced
|
|
disabled
|
|
/>
|
|
|
|
<p>
|
|
Disabled
|
|
<br />+ Border
|
|
</p>
|
|
<NavOption title="Title" url="#" border disabled />
|
|
<NavOption icon="sanitizer" title="Title" url="#" border disabled />
|
|
<NavOption title="Title" subtitle="This is a subtitle" url="#" border disabled />
|
|
<NavOption
|
|
title="Title"
|
|
subtitle="This is a subtitle"
|
|
url="#"
|
|
icon="pages"
|
|
border
|
|
disabled
|
|
/>
|
|
<NavOption
|
|
title="Title"
|
|
subtitle="This is a subtitle"
|
|
url="#"
|
|
icon="synagogue"
|
|
border
|
|
reduced
|
|
disabled
|
|
/>
|
|
|
|
<p>
|
|
Disabled
|
|
<br />+ Active
|
|
</p>
|
|
<NavOption title="Title" url="#" active disabled />
|
|
<NavOption icon="stairs" title="Title" url="#" active disabled />
|
|
<NavOption title="Title" subtitle="This is a subtitle" url="#" active disabled />
|
|
<NavOption
|
|
title="Title"
|
|
subtitle="This is a subtitle"
|
|
url="#"
|
|
icon="park"
|
|
active
|
|
disabled
|
|
/>
|
|
<NavOption
|
|
title="Title"
|
|
subtitle="This is a subtitle"
|
|
url="#"
|
|
icon="password"
|
|
active
|
|
reduced
|
|
disabled
|
|
/>
|
|
</div>
|
|
|
|
<HorizontalLine />
|
|
<h3 className="-mt-6 mb-2 text-xl">Chronology Previews</h3>
|
|
|
|
<div className="grid grid-cols-[repeat(5,auto)] place-items-center gap-4">
|
|
<p />
|
|
<p>Title</p>
|
|
<p>Year</p>
|
|
<p>
|
|
Year
|
|
<br />+ Month
|
|
</p>
|
|
<p>
|
|
Year
|
|
<br />+ Month
|
|
<br />+ Day
|
|
</p>
|
|
|
|
<p>Normal</p>
|
|
<ChroniclePreview date={{}} title="Title" url="#" />
|
|
<ChroniclePreview date={{ year: 1970 }} title="Title" url="#" />
|
|
<ChroniclePreview date={{ year: 1970, month: 1 }} title="Title" url="#" />
|
|
<ChroniclePreview date={{ year: 1970, month: 1, day: 1 }} title="Title" url="#" />
|
|
|
|
<p>Active</p>
|
|
<ChroniclePreview date={{}} title="Title" url="#" active />
|
|
<ChroniclePreview date={{ year: 1970 }} title="Title" url="#" active />
|
|
<ChroniclePreview date={{ year: 1970, month: 1 }} title="Title" url="#" active />
|
|
<ChroniclePreview date={{ year: 1970, month: 1, day: 1 }} title="Title" url="#" active />
|
|
|
|
<p>Disabled</p>
|
|
<ChroniclePreview date={{}} title="Title" url="#" disabled />
|
|
<ChroniclePreview date={{ year: 1970 }} title="Title" url="#" disabled />
|
|
<ChroniclePreview date={{ year: 1970, month: 1 }} title="Title" url="#" disabled />
|
|
<ChroniclePreview
|
|
date={{ year: 1970, month: 1, day: 1 }}
|
|
title="Title"
|
|
url="#"
|
|
disabled
|
|
/>
|
|
|
|
<p>
|
|
Disabled
|
|
<br />
|
|
Active
|
|
</p>
|
|
<ChroniclePreview date={{}} title="Title" url="#" active disabled />
|
|
<ChroniclePreview date={{ year: 1970 }} title="Title" url="#" active disabled />
|
|
<ChroniclePreview date={{ year: 1970, month: 1 }} title="Title" url="#" active disabled />
|
|
<ChroniclePreview
|
|
date={{ year: 1970, month: 1, day: 1 }}
|
|
title="Title"
|
|
url="#"
|
|
active
|
|
disabled
|
|
/>
|
|
</div>
|
|
</TwoThemedSection>
|
|
|
|
<h2 className="mb-4 text-3xl">Up-Pressables</h2>
|
|
<TwoThemedSection className="grid gap-4">
|
|
<h3 className="-mt-6 mb-2 text-xl">Preview Cards</h3>
|
|
|
|
<div className="grid grid-cols-[repeat(2,auto)] place-items-center gap-4">
|
|
<PreviewCard
|
|
title="This one only has a title"
|
|
subtitle="And a subtitle"
|
|
href="#"
|
|
keepInfoVisible
|
|
/>
|
|
<PreviewCard
|
|
title="This one only has a title/subtitle"
|
|
subtitle="And a long description"
|
|
description="Eveniet occaecati qui dicta explicabo dolor.
|
|
Ipsum quam dolorum dolores.
|
|
Neque dolor nihil neque tempora.
|
|
Mollitia voluptates iste qui et temporibus eum omnis.
|
|
Itaque atque architecto maiores qui et optio."
|
|
href="#"
|
|
thumbnail={"/default_og.jpg"}
|
|
keepInfoVisible
|
|
/>
|
|
<PreviewCard
|
|
pre_title="Breaking News"
|
|
title="This one only displays info"
|
|
subtitle="When it's hovered"
|
|
href="#"
|
|
thumbnail={"/default_og.jpg"}
|
|
/>
|
|
<PreviewCard
|
|
title="This one also has metadata at the top"
|
|
subtitle="And a subtitle"
|
|
description="Eveniet occaecati qui dicta explicabo dolor.
|
|
Ipsum quam dolorum dolores.
|
|
Neque dolor nihil neque tempora.
|
|
Mollitia voluptates iste qui et temporibus eum omnis.
|
|
Itaque atque architecto maiores qui et optio."
|
|
href="#"
|
|
thumbnail={"/default_og.jpg"}
|
|
metadata={{
|
|
price: {
|
|
amount: 5.23,
|
|
currency: { data: { attributes: { code: "USD", rate_to_usd: 1, symbol: "$" } } },
|
|
},
|
|
releaseDate: { year: 1970, month: 1, day: 1 },
|
|
views: 550669,
|
|
position: "Top",
|
|
}}
|
|
/>
|
|
<PreviewCard
|
|
title="This one also has metadata at the bottom"
|
|
subtitle="And the thumbnail aspect ratio is forced to be 4:3"
|
|
href="#"
|
|
thumbnail={"/default_og.jpg"}
|
|
keepInfoVisible
|
|
thumbnailAspectRatio="4/3"
|
|
thumbnailForceAspectRatio
|
|
metadata={{
|
|
price: {
|
|
amount: 5.23,
|
|
currency: { data: { attributes: { code: "USD", rate_to_usd: 1, symbol: "$" } } },
|
|
},
|
|
releaseDate: { year: 1970, month: 1, day: 1 },
|
|
views: 550669,
|
|
position: "Bottom",
|
|
}}
|
|
/>
|
|
<PreviewCard
|
|
pre_title="Wow, that's a lot"
|
|
title="This one pretty much has everything"
|
|
subtitle="No joke, this is a lot of stuff"
|
|
href="#"
|
|
thumbnail={"/default_og.jpg"}
|
|
keepInfoVisible
|
|
infoAppend={<Button text="Another custom component" />}
|
|
bottomChips={["Bottom chip 1", "Chip 2", "Chip 3", "Chip 4"]}
|
|
description="Eveniet occaecati qui dicta explicabo dolor.
|
|
Ipsum quam dolorum dolores.
|
|
Neque dolor nihil neque tempora.
|
|
Mollitia voluptates iste qui et temporibus eum omnis.
|
|
Itaque atque architecto maiores qui et optio."
|
|
hoverlay={{ __typename: "Video", duration: 465 }}
|
|
topChips={[
|
|
"Top chip 1",
|
|
"Chip 2",
|
|
"Chip 3",
|
|
"Chip 4",
|
|
"When there are too many, it overflow",
|
|
]}
|
|
metadata={{
|
|
price: {
|
|
amount: 5.23,
|
|
currency: { data: { attributes: { code: "USD", rate_to_usd: 1, symbol: "$" } } },
|
|
},
|
|
releaseDate: { year: 1970, month: 1, day: 1 },
|
|
views: 550669,
|
|
position: "Bottom",
|
|
}}
|
|
/>
|
|
|
|
<PreviewCard
|
|
title="This one is disabled"
|
|
subtitle="And a subtitle"
|
|
href="#"
|
|
thumbnail={"/default_og.jpg"}
|
|
keepInfoVisible
|
|
metadata={{
|
|
price: {
|
|
amount: 5.23,
|
|
currency: { data: { attributes: { code: "USD", rate_to_usd: 1, symbol: "$" } } },
|
|
},
|
|
releaseDate: { year: 1970, month: 1, day: 1 },
|
|
views: 550669,
|
|
position: "Bottom",
|
|
}}
|
|
disabled
|
|
/>
|
|
<PreviewCard
|
|
pre_title="Wow, that's a lot"
|
|
title="This one pretty much has everything"
|
|
subtitle="And it's disabled"
|
|
href="#"
|
|
thumbnail={"/default_og.jpg"}
|
|
keepInfoVisible
|
|
infoAppend={<Button text="Another custom component" />}
|
|
bottomChips={["Bottom chip 1", "Chip 2", "Chip 3", "Chip 4"]}
|
|
description="Eveniet occaecati qui dicta explicabo dolor.
|
|
Ipsum quam dolorum dolores.
|
|
Neque dolor nihil neque tempora.
|
|
Mollitia voluptates iste qui et temporibus eum omnis.
|
|
Itaque atque architecto maiores qui et optio."
|
|
hoverlay={{ __typename: "Video", duration: 465 }}
|
|
topChips={[
|
|
"Top chip 1",
|
|
"Chip 2",
|
|
"Chip 3",
|
|
"Chip 4",
|
|
"When there are too many, it overflow",
|
|
]}
|
|
metadata={{
|
|
price: {
|
|
amount: 5.23,
|
|
currency: { data: { attributes: { code: "USD", rate_to_usd: 1, symbol: "$" } } },
|
|
},
|
|
releaseDate: { year: 1970, month: 1, day: 1 },
|
|
views: 550669,
|
|
position: "Bottom",
|
|
}}
|
|
disabled
|
|
/>
|
|
</div>
|
|
|
|
<HorizontalLine />
|
|
<h3 className="-mt-6 mb-2 text-xl">Folder Card</h3>
|
|
|
|
<div className="grid grid-cols-[repeat(2,auto)] place-items-center gap-4">
|
|
<PreviewFolder href="#" title="Title" />
|
|
<PreviewFolder href="#" title="A longer title, I guess" />
|
|
<PreviewFolder href="#" title="Disabled" disabled />
|
|
<PreviewFolder href="#" title="Disabled, with a longer title" disabled />
|
|
</div>
|
|
</TwoThemedSection>
|
|
|
|
<TwoThemedSection className="grid gap-4" fullWidth>
|
|
<h3 className="mb-2 text-xl">Audio players</h3>
|
|
|
|
<AudioPlayer src="https://resha.re/public-domain/Prelude-No.15-in-G-major-BWV-860.mp3" />
|
|
<AudioPlayer
|
|
title="A longer audio track, with a title"
|
|
src="https://resha.re/public-domain/Muriel-Nguyen-Xuan-Brahms-rhapsody-opus79-1.ogg"
|
|
/>
|
|
<AudioPlayer
|
|
title={`The same audio tack, but this time, an obnoxiously long title that frankly at\
|
|
this point should stop because who in their right mind would read that much text for a title.`}
|
|
src="https://resha.re/public-domain/Muriel-Nguyen-Xuan-Brahms-rhapsody-opus79-1.ogg"
|
|
/>
|
|
<HorizontalLine />
|
|
<h3 className="mb-2 text-xl">Video players</h3>
|
|
<VideoPlayer src={`https://resha.re/public-domain/the_whistler_1944.mp4`} />
|
|
<VideoPlayer
|
|
src={`https://resha.re/public-domain/big_buck_bunny_720p_surround.mp4`}
|
|
title="Big Buck Bunny - Blender Foundation"
|
|
/>
|
|
</TwoThemedSection>
|
|
</ContentPanel>
|
|
);
|
|
return <AppLayout {...props} contentPanel={contentPanel} />;
|
|
};
|
|
|
|
export default DesignSystem;
|
|
|
|
/*
|
|
* ╭──────────────────────╮
|
|
* ───────────────────────────────────╯ NEXT DATA FETCHING ╰──────────────────────────────────────
|
|
*/
|
|
|
|
export const getStaticProps: GetStaticProps = (context) => {
|
|
const { format } = getFormat(context.locale);
|
|
const props: Props = {
|
|
openGraph: getOpenGraph(format, "Design System"),
|
|
};
|
|
return {
|
|
props: props,
|
|
};
|
|
};
|
|
|
|
/*
|
|
* ╭──────────────────────╮
|
|
* ───────────────────────────────────╯ PRIVATE COMPONENTS ╰──────────────────────────────────────
|
|
*/
|
|
|
|
interface ThemedSectionProps {
|
|
className?: string;
|
|
children?: ReactNode;
|
|
fullWidth?: boolean;
|
|
}
|
|
|
|
const TwoThemedSection = ({ children, className, fullWidth }: ThemedSectionProps) => (
|
|
<div
|
|
className={cJoin(
|
|
"mb-12 grid grid-flow-col drop-shadow-lg shadow-shade",
|
|
cIf(fullWidth, "w-full")
|
|
)}>
|
|
<LightThemeSection className={cJoin("rounded-l-xl text-black", className)}>
|
|
{children}
|
|
</LightThemeSection>
|
|
<DarkThemeSection className={cJoin("rounded-r-xl text-black", className)}>
|
|
{children}
|
|
</DarkThemeSection>
|
|
</div>
|
|
);
|
|
|
|
const DarkThemeSection = ({ className, children }: ThemedSectionProps) => (
|
|
<div className={cJoin("bg-light px-14 py-10 set-theme-dark", className)}>{children}</div>
|
|
);
|
|
const LightThemeSection = ({ className, children }: ThemedSectionProps) => (
|
|
<div className={cJoin("bg-light px-14 py-10 set-theme-light", className)}>{children}</div>
|
|
);
|
|
|
|
const WhiteSection = ({ className, children }: ThemedSectionProps) => (
|
|
<div className="mb-12 rounded-xl bg-[white] px-14 py-10 drop-shadow-lg shadow-shade">
|
|
<div className={cJoin("text-black set-theme-light", className)}>{children}</div>
|
|
</div>
|
|
);
|
|
|
|
interface ColorSquareProps {
|
|
className?: string;
|
|
}
|
|
|
|
const ColorSquare = ({ className }: ColorSquareProps) => (
|
|
<div className={cJoin("h-24 w-24 rounded-lg shadow-inner-sm shadow-shade", className)} />
|
|
);
|
|
|
|
interface ShadowSquareProps {
|
|
className?: string;
|
|
text: string;
|
|
}
|
|
|
|
const ShadowSquare = ({ className, text }: ShadowSquareProps) => (
|
|
<div className={cJoin("mb-12 grid h-20 w-20 place-content-center rounded-lg", className)}>
|
|
{text}
|
|
</div>
|
|
);
|