feat: new components and a example
* add sidebar * add dashboard example * fix combobox selectionmain
parent
6314afe148
commit
f8a39cdb4e
@ -0,0 +1,6 @@
|
|||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,22 +1,59 @@
|
|||||||
import { cva } from "class-variance-authority";
|
import { cva } from "class-variance-authority";
|
||||||
|
|
||||||
const base = [
|
const base = [""];
|
||||||
"block",
|
|
||||||
|
const command = [
|
||||||
|
"bg-white",
|
||||||
|
"flex",
|
||||||
|
"h-full",
|
||||||
"w-full",
|
"w-full",
|
||||||
|
"flex-col",
|
||||||
|
"overflow-hidden",
|
||||||
"rounded-lg",
|
"rounded-lg",
|
||||||
"border-2",
|
"border-2",
|
||||||
"border-mono-border",
|
"border-mono-border",
|
||||||
"py-1.5",
|
];
|
||||||
"px-2",
|
|
||||||
"text-left",
|
const input = [
|
||||||
"text-mono-text",
|
"flex",
|
||||||
"text-ellipsis",
|
"w-full",
|
||||||
"placeholder:text-mono-border",
|
"rounded-md",
|
||||||
|
"bg-transparent",
|
||||||
"outline-none",
|
"outline-none",
|
||||||
|
"border-0",
|
||||||
|
"placeholder:text-muted-foreground",
|
||||||
|
"focus:outline-none",
|
||||||
"focus:ring-0",
|
"focus:ring-0",
|
||||||
"focus:border-mono-primary",
|
"disabled:cursor-not-allowed",
|
||||||
|
"disabled:opacity-50",
|
||||||
|
];
|
||||||
|
|
||||||
|
const item = [
|
||||||
|
"relative",
|
||||||
|
"flex",
|
||||||
|
"cursor-default",
|
||||||
|
"select-none",
|
||||||
|
"items-center",
|
||||||
|
"px-2",
|
||||||
|
"py-1",
|
||||||
|
"outline-none",
|
||||||
|
"rounded-sm",
|
||||||
|
"aria-selected:bg-mono-primary",
|
||||||
|
"aria-selected:text-white",
|
||||||
|
"data-[disabled]:pointer-events-none",
|
||||||
|
"data-[disabled]:opacity-50",
|
||||||
];
|
];
|
||||||
|
|
||||||
const comboboxStyles = cva(base);
|
const checkedIcon = ["opacity-0", "absolute", "right-2"];
|
||||||
|
const comboboxStyles = cva(base, {
|
||||||
|
variants: {
|
||||||
|
hasError: {
|
||||||
|
true: ["border-mono-error"],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
hasError: false,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
export { comboboxStyles };
|
export { comboboxStyles, command, input, item, checkedIcon };
|
||||||
|
|||||||
@ -0,0 +1,30 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { Meta, StoryObj } from "@storybook/react";
|
||||||
|
import { Dropdown } from "./Dropdown";
|
||||||
|
import { Button } from "../Button";
|
||||||
|
import { cx } from "../../utils";
|
||||||
|
|
||||||
|
const meta: Meta<typeof Dropdown> = {
|
||||||
|
title: "UI / Dropdown",
|
||||||
|
component: Dropdown,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof Dropdown>;
|
||||||
|
|
||||||
|
export const Default: Story = {
|
||||||
|
render: () => (
|
||||||
|
<Dropdown
|
||||||
|
options={[
|
||||||
|
{ label: "Profile", value: "/profile" },
|
||||||
|
{
|
||||||
|
label: "Sign out",
|
||||||
|
value: "/sign-out",
|
||||||
|
onSelect: (value) => console.log("sign out!", value),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Button>Open</Button>
|
||||||
|
</Dropdown>
|
||||||
|
),
|
||||||
|
};
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
const content = [
|
||||||
|
"relative",
|
||||||
|
"max-h-96",
|
||||||
|
"min-w-[8rem]",
|
||||||
|
"p-1",
|
||||||
|
"border-2",
|
||||||
|
"border-mono-border",
|
||||||
|
"overflow-hidden",
|
||||||
|
"rounded-lg",
|
||||||
|
"bg-white",
|
||||||
|
|
||||||
|
// Animation
|
||||||
|
"data-[state=open]:animate-in",
|
||||||
|
"data-[state=closed]:animate-out",
|
||||||
|
"data-[state=closed]:fade-out-0",
|
||||||
|
"data-[state=open]:fade-in-0",
|
||||||
|
"data-[state=closed]:zoom-out-95",
|
||||||
|
"data-[state=open]:zoom-in-95",
|
||||||
|
"data-[side=bottom]:slide-in-from-top-2",
|
||||||
|
"data-[side=left]:slide-in-from-right-2",
|
||||||
|
"data-[side=right]:slide-in-from-left-2",
|
||||||
|
"data-[side=top]:slide-in-from-bottom-2",
|
||||||
|
];
|
||||||
|
const item = [
|
||||||
|
"relative",
|
||||||
|
"flex",
|
||||||
|
"w-full",
|
||||||
|
"cursor-default",
|
||||||
|
"select-none",
|
||||||
|
"items-center",
|
||||||
|
"py-0.5",
|
||||||
|
"px-2",
|
||||||
|
"rounded-sm",
|
||||||
|
"data-[disabled]:pointer-events-none",
|
||||||
|
"data-[disabled]:text-mono-text/50",
|
||||||
|
"outline-none",
|
||||||
|
"focus:rounded-md",
|
||||||
|
"focus:bg-mono-primary",
|
||||||
|
"focus:text-white",
|
||||||
|
"focus:border-mono-primary",
|
||||||
|
];
|
||||||
|
|
||||||
|
export { item, content };
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import * as $ from "@radix-ui/react-dropdown-menu";
|
||||||
|
import * as T from "./Dropdown.types";
|
||||||
|
import * as styles from "./Dropdown.styles";
|
||||||
|
import { cx } from "../../utils";
|
||||||
|
|
||||||
|
const Dropdown = React.forwardRef<T.DropdownElement, T.DropdownProps>(
|
||||||
|
({ children, options, ...props }, forwardedRef) => {
|
||||||
|
return (
|
||||||
|
<$.Root>
|
||||||
|
<$.Trigger asChild>{children}</$.Trigger>
|
||||||
|
<$.Content
|
||||||
|
sideOffset={4}
|
||||||
|
{...props}
|
||||||
|
className={cx([styles.content, props.className])}
|
||||||
|
ref={forwardedRef}
|
||||||
|
>
|
||||||
|
{options?.map(({ label, value, icon: Icon, href, onSelect }) => (
|
||||||
|
<$.Item
|
||||||
|
className={cx([styles.item])}
|
||||||
|
onSelect={() => onSelect?.(href ?? value)}
|
||||||
|
>
|
||||||
|
{Icon && <Icon className={cx(["mr-2"])} />}
|
||||||
|
{label}
|
||||||
|
</$.Item>
|
||||||
|
))}
|
||||||
|
</$.Content>
|
||||||
|
</$.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export { Dropdown };
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Primitive } from "@radix-ui/react-primitive";
|
||||||
|
import { IconType } from "react-icons";
|
||||||
|
|
||||||
|
type DropdownOption = {
|
||||||
|
label: string;
|
||||||
|
value: string;
|
||||||
|
icon?: IconType;
|
||||||
|
onSelect?: (value: string) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
type DropdownElement = React.ElementRef<typeof Primitive.div>;
|
||||||
|
|
||||||
|
type DropdownProps = React.ComponentPropsWithoutRef<typeof Primitive.div> & {
|
||||||
|
options: DropdownOption[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type { DropdownElement, DropdownProps };
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export * from "./Dropdown";
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import type { Meta, StoryObj } from "@storybook/react";
|
||||||
|
import { Box } from "../Box";
|
||||||
|
import { Button } from "../Button";
|
||||||
|
import * as Card from "../Card";
|
||||||
|
import { Flyout } from "./Flyout";
|
||||||
|
import { cx } from "../../utils";
|
||||||
|
import { Input } from "../Input";
|
||||||
|
|
||||||
|
const meta: Meta<typeof Flyout> = {
|
||||||
|
title: "UI/Flyout",
|
||||||
|
component: Flyout,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof Flyout>;
|
||||||
|
|
||||||
|
export const Default: Story = {
|
||||||
|
render: () => (
|
||||||
|
<Flyout>
|
||||||
|
<Card.$ paddless borderless>
|
||||||
|
<Card.Header>
|
||||||
|
<Card.Title>Hello, world.</Card.Title>
|
||||||
|
<Card.Description>This is a modal example.</Card.Description>
|
||||||
|
</Card.Header>
|
||||||
|
|
||||||
|
<Card.Body>
|
||||||
|
<form onSubmit={(event) => event.preventDefault()}>
|
||||||
|
<Input label="Name" />
|
||||||
|
|
||||||
|
<Box className={cx(["py-2"])} />
|
||||||
|
|
||||||
|
<Input label="Type" />
|
||||||
|
|
||||||
|
<Box className={cx(["py-2"])} />
|
||||||
|
|
||||||
|
<Input label="Balance" money />
|
||||||
|
</form>
|
||||||
|
</Card.Body>
|
||||||
|
|
||||||
|
<Card.Footer className={cx(["flex", "justify-between", "mt-auto"])}>
|
||||||
|
<Button>Cancel</Button>
|
||||||
|
<Button intent="primary">Save</Button>
|
||||||
|
</Card.Footer>
|
||||||
|
</Card.$>
|
||||||
|
</Flyout>
|
||||||
|
),
|
||||||
|
};
|
||||||
@ -0,0 +1,71 @@
|
|||||||
|
import { cva } from "class-variance-authority";
|
||||||
|
|
||||||
|
const description = ["text-mono-text"];
|
||||||
|
|
||||||
|
const overlay = [
|
||||||
|
"fixed",
|
||||||
|
"inset-0",
|
||||||
|
"z-50",
|
||||||
|
"bg-black/80",
|
||||||
|
"data-[state=open]:animate-in",
|
||||||
|
"data-[state=closed]:animate-out",
|
||||||
|
"data-[state=closed]:fade-out-0",
|
||||||
|
"data-[state=open]:fade-in-0",
|
||||||
|
];
|
||||||
|
|
||||||
|
const base = [
|
||||||
|
"fixed",
|
||||||
|
"z-50",
|
||||||
|
"gap-4",
|
||||||
|
"bg-white",
|
||||||
|
"shadow-lg",
|
||||||
|
"transition",
|
||||||
|
"ease-in-out",
|
||||||
|
"group",
|
||||||
|
"data-[state=open]:animate-in",
|
||||||
|
"data-[state=closed]:animate-out",
|
||||||
|
"data-[state=closed]:duration-300",
|
||||||
|
"data-[state=open]:duration-500",
|
||||||
|
];
|
||||||
|
|
||||||
|
const close = [
|
||||||
|
"absolute",
|
||||||
|
"top-3",
|
||||||
|
"-right-10",
|
||||||
|
"bg-transparent",
|
||||||
|
"hover:bg-transparent",
|
||||||
|
"text-xl",
|
||||||
|
"text-gray-200",
|
||||||
|
];
|
||||||
|
|
||||||
|
const flyoutStyles = cva(base, {
|
||||||
|
variants: {
|
||||||
|
side: {
|
||||||
|
left: [
|
||||||
|
"inset-y-0",
|
||||||
|
"left-0",
|
||||||
|
"h-full",
|
||||||
|
"w-3/4",
|
||||||
|
"border-r",
|
||||||
|
"data-[state=closed]:slide-out-to-left",
|
||||||
|
"data-[state=open]:slide-in-from-left",
|
||||||
|
"sm:max-w-sm",
|
||||||
|
],
|
||||||
|
right: [
|
||||||
|
"inset-y-0",
|
||||||
|
"right-0",
|
||||||
|
"h-full",
|
||||||
|
"w-3/4",
|
||||||
|
"border-l",
|
||||||
|
"data-[state=closed]:slide-out-to-right",
|
||||||
|
"data-[state=open]:slide-in-from-right",
|
||||||
|
"sm:max-w-sm",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
defaultVariants: {
|
||||||
|
side: "right",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
export { flyoutStyles, description, overlay, close };
|
||||||
@ -0,0 +1,53 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { FaCircleXmark } from "react-icons/fa6";
|
||||||
|
import { match, P } from "ts-pattern";
|
||||||
|
import * as $ from "@radix-ui/react-dialog";
|
||||||
|
import * as T from "./Flyout.types";
|
||||||
|
import * as styles from "./Flyout.styles";
|
||||||
|
import { Button } from "../Button";
|
||||||
|
import { cx } from "../../utils";
|
||||||
|
import { Box } from "../Box";
|
||||||
|
import { FaTimes } from "react-icons/fa";
|
||||||
|
|
||||||
|
const Flyout = React.forwardRef<T.FlyoutElement, T.FlyoutProps>(
|
||||||
|
({ trigger, side, children, ...props }, forwardedRef) => {
|
||||||
|
const [open, setOpen] = React.useState(false);
|
||||||
|
const classes = cx(styles.flyoutStyles({ side }), props.className);
|
||||||
|
return (
|
||||||
|
<$.Root open={open} onOpenChange={setOpen}>
|
||||||
|
<$.Trigger asChild>
|
||||||
|
{match(trigger)
|
||||||
|
.with(P.not(P.nullish), (t) => t)
|
||||||
|
.otherwise(() => (
|
||||||
|
<Button>Open</Button>
|
||||||
|
))}
|
||||||
|
</$.Trigger>
|
||||||
|
<$.Portal>
|
||||||
|
<$.Overlay className={cx([styles.overlay])} />
|
||||||
|
<$.Content {...props} className={classes}>
|
||||||
|
<Box>{children}</Box>
|
||||||
|
<$.Close asChild>
|
||||||
|
<Button
|
||||||
|
aria-label="Close"
|
||||||
|
className={cx([
|
||||||
|
styles.close,
|
||||||
|
"border-0",
|
||||||
|
"p-0",
|
||||||
|
"animate",
|
||||||
|
{
|
||||||
|
"animate-in fade-in duration-300": open,
|
||||||
|
"animate-out fade-out duration-300": !open,
|
||||||
|
},
|
||||||
|
])}
|
||||||
|
>
|
||||||
|
<FaTimes />
|
||||||
|
</Button>
|
||||||
|
</$.Close>
|
||||||
|
</$.Content>
|
||||||
|
</$.Portal>
|
||||||
|
</$.Root>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
export { Flyout };
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
import React from "react";
|
||||||
|
import * as $ from "@radix-ui/react-dialog";
|
||||||
|
import { VariantProps } from "class-variance-authority";
|
||||||
|
import * as styles from "./Flyout.styles";
|
||||||
|
|
||||||
|
type FlyoutElement = React.ElementRef<typeof $.Content>;
|
||||||
|
|
||||||
|
type FlyoutProps = React.ComponentProps<typeof $.Content> &
|
||||||
|
VariantProps<typeof styles.flyoutStyles> & {
|
||||||
|
trigger?: React.ReactNode;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type { FlyoutElement, FlyoutProps };
|
||||||
@ -0,0 +1 @@
|
|||||||
|
export * from "./Flyout";
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Box } from "../../components/Box";
|
||||||
|
import { cx } from "../../utils";
|
||||||
|
import { Header } from "./Header";
|
||||||
|
|
||||||
|
const Content = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Header />
|
||||||
|
<Box className={cx(["py-10"])} asChild>
|
||||||
|
<main>
|
||||||
|
<Box className={cx(["px-4", "sm:px-6", "lg:px-8"])}>
|
||||||
|
<p className={cx(["text-mono-text"])}>Dashboard content</p>
|
||||||
|
</Box>
|
||||||
|
</main>
|
||||||
|
</Box>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Content };
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { Meta, StoryObj } from "@storybook/react";
|
||||||
|
import { Dashboard } from "./Dashboard";
|
||||||
|
|
||||||
|
const meta: Meta<typeof Dashboard> = {
|
||||||
|
title: "Examples / Dashboard",
|
||||||
|
component: Dashboard,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default meta;
|
||||||
|
type Story = StoryObj<typeof Dashboard>;
|
||||||
|
|
||||||
|
export const Default: Story = {
|
||||||
|
render: () => <Dashboard />,
|
||||||
|
};
|
||||||
|
|
||||||
|
Default.parameters = {
|
||||||
|
layout: "fullscreen",
|
||||||
|
};
|
||||||
@ -0,0 +1,32 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { Box } from "../../components/Box";
|
||||||
|
import { cx } from "../../utils";
|
||||||
|
import { Header } from "./Header";
|
||||||
|
import { Sidebar } from "./Sidebar";
|
||||||
|
import { Content } from "./Content";
|
||||||
|
import { Flyout } from "../../components/Flyout";
|
||||||
|
|
||||||
|
const Dashboard = () => {
|
||||||
|
return (
|
||||||
|
<Box className={cx(["flex", "flex-col"])}>
|
||||||
|
<Box
|
||||||
|
className={cx([
|
||||||
|
"hidden",
|
||||||
|
"lg:fixed",
|
||||||
|
"lg:inset-y-0",
|
||||||
|
"lg:z-50",
|
||||||
|
"lg:flex",
|
||||||
|
"lg:w-72",
|
||||||
|
"lg:flex-col",
|
||||||
|
])}
|
||||||
|
>
|
||||||
|
<Sidebar />
|
||||||
|
</Box>
|
||||||
|
<Box className={cx(["lg:pl-72"])}>
|
||||||
|
<Content />
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Dashboard };
|
||||||
@ -0,0 +1,83 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { FaCog } from "react-icons/fa";
|
||||||
|
import { FaBars, FaDoorOpen, FaUserLarge } from "react-icons/fa6";
|
||||||
|
import { Box } from "../../components/Box";
|
||||||
|
import { cx } from "../../utils";
|
||||||
|
import { Button } from "../../components/Button";
|
||||||
|
import { Divider } from "../../components/Divider";
|
||||||
|
import { Dropdown } from "../../components/Dropdown";
|
||||||
|
import { Flyout } from "../../components/Flyout";
|
||||||
|
import { Sidebar } from "./Sidebar";
|
||||||
|
|
||||||
|
const userNav = [
|
||||||
|
{
|
||||||
|
label: "Your Profile",
|
||||||
|
value: "/profile",
|
||||||
|
icon: FaUserLarge,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Settings",
|
||||||
|
value: "/settings",
|
||||||
|
icon: FaCog,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "Sign out",
|
||||||
|
value: "/sign-out",
|
||||||
|
icon: FaDoorOpen,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const Header = () => {
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
className={cx([
|
||||||
|
"sticky",
|
||||||
|
"top-0",
|
||||||
|
"z-40",
|
||||||
|
"flex",
|
||||||
|
"h-16",
|
||||||
|
"shrink-0",
|
||||||
|
"items-center",
|
||||||
|
"gap-x-4",
|
||||||
|
"border-b-2",
|
||||||
|
"border-mono-border",
|
||||||
|
"bg-white",
|
||||||
|
"px-4",
|
||||||
|
"sm:gap-x-6",
|
||||||
|
"sm:px-6",
|
||||||
|
"lg:px-8",
|
||||||
|
])}
|
||||||
|
>
|
||||||
|
<Box className={cx(["flex", "w-full"])}>
|
||||||
|
<Flyout
|
||||||
|
side="left"
|
||||||
|
className={cx(["border-0"])}
|
||||||
|
trigger={
|
||||||
|
<Button intent="plain" aria-label="Open sidebar">
|
||||||
|
<FaBars />
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Sidebar />
|
||||||
|
</Flyout>
|
||||||
|
|
||||||
|
<Divider
|
||||||
|
className={cx(["ml-auto"])}
|
||||||
|
border
|
||||||
|
orientation="vertical"
|
||||||
|
size="xl"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Box>
|
||||||
|
<Dropdown options={userNav}>
|
||||||
|
<Button intent="plain">
|
||||||
|
<FaUserLarge />
|
||||||
|
</Button>
|
||||||
|
</Dropdown>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Header };
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
const base = [
|
||||||
|
"flex",
|
||||||
|
"grow",
|
||||||
|
"flex-col",
|
||||||
|
"gap-y-5",
|
||||||
|
"overflow-y-auto",
|
||||||
|
"border-r-2",
|
||||||
|
"border-mono-border",
|
||||||
|
"px-6",
|
||||||
|
"pb-4",
|
||||||
|
];
|
||||||
|
|
||||||
|
const logoContainer = ["flex", "h-16", "shrink-0", "items-center"];
|
||||||
|
|
||||||
|
const logo = ["h-8", "w-auto"];
|
||||||
|
|
||||||
|
const navItem = [
|
||||||
|
"text-mono-primary",
|
||||||
|
"hover:bg-mono-hover",
|
||||||
|
"group",
|
||||||
|
"flex",
|
||||||
|
"gap-x-3",
|
||||||
|
"rounded-md",
|
||||||
|
"p-2",
|
||||||
|
"leading-6",
|
||||||
|
"font-semibold",
|
||||||
|
"flex",
|
||||||
|
"items-center",
|
||||||
|
];
|
||||||
|
|
||||||
|
const listContainer = ["flex", "flex-1", "flex-col"];
|
||||||
|
|
||||||
|
const list = ["flex", "flex-col", "flex-1", "gap-y-1"];
|
||||||
|
|
||||||
|
const subList = ["-mx-2", "space-y-1"];
|
||||||
|
|
||||||
|
const icon = ["w-5", "h-5"];
|
||||||
|
|
||||||
|
export {
|
||||||
|
base,
|
||||||
|
logoContainer,
|
||||||
|
logo,
|
||||||
|
listContainer,
|
||||||
|
list,
|
||||||
|
subList,
|
||||||
|
navItem,
|
||||||
|
icon,
|
||||||
|
};
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import { FaHome, FaUsers, FaCog } from "react-icons/fa";
|
||||||
|
import { Box } from "../../components/Box";
|
||||||
|
import { cx } from "../../utils";
|
||||||
|
import * as styles from "./Sidebar.styles";
|
||||||
|
|
||||||
|
const Sidebar = () => {
|
||||||
|
return (
|
||||||
|
<Box className={cx([styles.base])}>
|
||||||
|
<Box className={cx([styles.logoContainer])}>
|
||||||
|
<img
|
||||||
|
className={cx([styles.logo])}
|
||||||
|
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=500"
|
||||||
|
alt="Your Company"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box className={cx([styles.listContainer])} asChild>
|
||||||
|
<nav>
|
||||||
|
<ul role="list" className={cx([styles.list])}>
|
||||||
|
<li>
|
||||||
|
<ul role="list" className={cx([styles.subList])}>
|
||||||
|
<li>
|
||||||
|
<a className={cx([styles.navItem])} href="#">
|
||||||
|
<FaHome className={cx([styles.icon])} />
|
||||||
|
Dashboard
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a className={cx([styles.navItem])} href="#">
|
||||||
|
<FaUsers className={cx([styles.icon])} />
|
||||||
|
Team
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a className={cx([styles.navItem])} href="#">
|
||||||
|
<FaCog className={cx([styles.icon])} />
|
||||||
|
Projects
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { Sidebar };
|
||||||
Loading…
Reference in New Issue