diff --git a/src/App.tsx b/src/App.tsx index 1ca9de4..974627c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,6 +12,7 @@ import RaidLayoutPage from "./pages/protected/RaidLayoutPage"; import HomePage from "./pages/public/HomePage"; import LoginPage from "./pages/public/LoginPage"; import SignupPage from "./pages/public/SignupPage"; +import TestPage from "./pages/public/TestPage"; import { ProtectedRoute } from "./providers/AuthProvider"; import ErrorBoundary from "./providers/ErrorBoundary"; @@ -27,6 +28,10 @@ const routes = createBrowserRouter([ path: "/", element: }, + { + path: "/test", + element: + }, { path: "/login", element: diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx new file mode 100644 index 0000000..13a925c --- /dev/null +++ b/src/components/button/Button.tsx @@ -0,0 +1,68 @@ +import clsx from "clsx"; + + +export type ButtonRounding = "none" | "sm" | "md" | "lg" | "full"; +export type ButtonShape = "vertical" | "horizontal" | "square"; +export type ButtonSizeType = "xsm" | "sm" | "md" | "lg" | "xl"; +export type ButtonVariant = "solid" | "outline" | "ghost" | "outline-ghost" | "icon"; + +export interface ButtonProps extends React.DetailedHTMLProps, HTMLButtonElement>{ + rounding?: ButtonRounding; + shape?: ButtonShape; + size?: ButtonSizeType; + variant?: ButtonVariant; +} + + +export default function Button(props: ButtonProps){ + const { + rounding = "lg", + shape = "vertical", + size = "md" + } = props; + + const buttonProps = {...props}; + delete buttonProps.rounding; + delete buttonProps.shape; + delete buttonProps.size; + delete buttonProps.variant; + + + return ( + + ); +} diff --git a/src/components/button/PrimaryButton.tsx b/src/components/button/PrimaryButton.tsx index 3f2caf9..c8c389f 100644 --- a/src/components/button/PrimaryButton.tsx +++ b/src/components/button/PrimaryButton.tsx @@ -1,18 +1,39 @@ import clsx from "clsx"; -import { ComponentProps } from "react"; +import Button, { ButtonProps } from "./Button"; + + +export default function PrimaryButton(props: ButtonProps){ + const { + variant = "solid" + } = props; -export default function PrimaryButton(props: ComponentProps<"button">){ return ( - + ); } diff --git a/src/components/button/SecondaryButton.tsx b/src/components/button/SecondaryButton.tsx new file mode 100644 index 0000000..faec0cc --- /dev/null +++ b/src/components/button/SecondaryButton.tsx @@ -0,0 +1,39 @@ +import clsx from "clsx"; +import Button, { ButtonProps } from "./Button"; + + +export default function SecondaryButton(props: ButtonProps){ + const { + variant = "solid" + } = props; + + + return ( + + ); +} diff --git a/src/components/button/SuccessButton.tsx b/src/components/button/SuccessButton.tsx new file mode 100644 index 0000000..58ae69f --- /dev/null +++ b/src/components/button/SuccessButton.tsx @@ -0,0 +1,39 @@ +import clsx from "clsx"; +import Button, { ButtonProps } from "./Button"; + + +export default function SuccessButton(props: ButtonProps){ + const { + variant = "solid" + } = props; + + + return ( + + ); +} diff --git a/src/components/button/TertiaryButton.tsx b/src/components/button/TertiaryButton.tsx new file mode 100644 index 0000000..3a44e43 --- /dev/null +++ b/src/components/button/TertiaryButton.tsx @@ -0,0 +1,39 @@ +import clsx from "clsx"; +import Button, { ButtonProps } from "./Button"; + + +export default function TertiaryButton(props: ButtonProps){ + const { + variant = "solid" + } = props; + + + return ( + + ); +} diff --git a/src/components/button/WarningButton.tsx b/src/components/button/WarningButton.tsx new file mode 100644 index 0000000..7297b58 --- /dev/null +++ b/src/components/button/WarningButton.tsx @@ -0,0 +1,39 @@ +import clsx from "clsx"; +import Button, { ButtonProps } from "./Button"; + + +export default function WarningButton(props: ButtonProps){ + const { + variant = "solid" + } = props; + + + return ( + + ); +} diff --git a/src/components/nav/PublicNavLinks.tsx b/src/components/nav/PublicNavLinks.tsx index 2201f8a..8133c60 100644 --- a/src/components/nav/PublicNavLinks.tsx +++ b/src/components/nav/PublicNavLinks.tsx @@ -6,6 +6,10 @@ const publicLinks = [ { name: "Home", path: "/" + }, + { + name: "Test", + path: "/test" } ]; diff --git a/src/pages/public/HomePage.tsx b/src/pages/public/HomePage.tsx index dace3a8..b6e4ae1 100644 --- a/src/pages/public/HomePage.tsx +++ b/src/pages/public/HomePage.tsx @@ -1,49 +1,7 @@ -import Modal from "@/components/modal/Modal"; -import ModalBody from "@/components/modal/ModalBody"; -import ModalFooter from "@/components/modal/ModalFooter"; -import ModalHeader from "@/components/modal/ModalHeader"; -import { useState } from "react"; - - export default function HomePage(){ - const [ displayModal, setDisplayModal ] = useState(false); - - - const showModal = () => { - setDisplayModal(true); - } - - const hideModal = () => { - setDisplayModal(false); - } - - return (
Home Page
- - - - Header - - - Body - - - Footer - -
); } diff --git a/src/pages/public/TestPage.tsx b/src/pages/public/TestPage.tsx new file mode 100644 index 0000000..f42adb0 --- /dev/null +++ b/src/pages/public/TestPage.tsx @@ -0,0 +1,334 @@ +import { ButtonShape, ButtonSizeType, ButtonVariant } from "@/components/button/Button"; +import DangerButton from "@/components/button/DangerButton"; +import PrimaryButton from "@/components/button/PrimaryButton"; +import SecondaryButton from "@/components/button/SecondaryButton"; +import SuccessButton from "@/components/button/SuccessButton"; +import TertiaryButton from "@/components/button/TertiaryButton"; +import WarningButton from "@/components/button/WarningButton"; + + +export default function TestPage(){ + const sizes: ButtonSizeType[] = ["xsm", "sm", "md", "lg", "xl"]; + const variants: ButtonVariant[] = ["solid", "icon", "outline", "outline-ghost", "ghost"]; + const shapes: ButtonShape[] = ["horizontal", "square", "vertical"]; + + + return ( +
+ {/* Primary Button */} +
+ { + sizes.map((size, cnt) => ( + + Primary {size} + + )) + } +
+
+ { + variants.map((variant, cnt) => ( + + Primary {variant} + + )) + } +
+
+ { + shapes.map((shape, cnt) => ( + + Primary {shape} + + )) + } +
+ {/* Secondary Button */} +
+ { + sizes.map((size, cnt) => ( + + Secondary {size} + + )) + } +
+
+ { + variants.map((variant, cnt) => ( + + Secondary {variant} + + )) + } +
+
+ { + shapes.map((shape, cnt) => ( + + Secondary {shape} + + )) + } +
+ {/* Tertiary Button */} +
+ { + sizes.map((size, cnt) => ( + + Tertiary {size} + + )) + } +
+
+ { + variants.map((variant, cnt) => ( + + Tertiary {variant} + + )) + } +
+
+ { + shapes.map((shape, cnt) => ( + + Tertiary {shape} + + )) + } +
+ {/* Success Button */} +
+ { + sizes.map((size, cnt) => ( + + Success {size} + + )) + } +
+
+ { + variants.map((variant, cnt) => ( + + Success {variant} + + )) + } +
+
+ { + shapes.map((shape, cnt) => ( + + Success {shape} + + )) + } +
+ {/* Warning Button */} +
+ { + sizes.map((size, cnt) => ( + + Warning {size} + + )) + } +
+
+ { + variants.map((variant, cnt) => ( + + Warning {variant} + + )) + } +
+
+ { + shapes.map((shape, cnt) => ( + + Warning {shape} + + )) + } +
+ {/* Danger Button */} +
+ { + sizes.map((size, cnt) => ( + + Danger {size} + + )) + } +
+
+ { + variants.map((variant, cnt) => ( + + Danger {variant} + + )) + } +
+
+ { + shapes.map((shape, cnt) => ( + + Danger {shape} + + )) + } +
+
+ ); +}