diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx index 62dc33b..e02d8e0 100644 --- a/dashboard/src/App.tsx +++ b/dashboard/src/App.tsx @@ -1,13 +1,11 @@ import "./App.css"; -import LateralMenu from "./components/SideMenu/SideMenu"; +import Dashboard from "./components/Dashboard/Dashboard"; function App(): JSX.Element { return ( - <>
- +
- ); } diff --git a/dashboard/src/components/Button/Button.tsx b/dashboard/src/components/Button/Button.tsx deleted file mode 100644 index a846e60..0000000 --- a/dashboard/src/components/Button/Button.tsx +++ /dev/null @@ -1,47 +0,0 @@ -import './button.css'; - -interface ButtonProps { - /** - * Is this the principal call to action on the page? - */ - primary?: boolean; - /** - * What background color to use - */ - backgroundColor?: string; - /** - * How large should the button be? - */ - size?: 'small' | 'medium' | 'large'; - /** - * Button contents - */ - label: string; - /** - * Optional click handler - */ - onClick?: () => void; -} - -/** - * Primary UI component for user interaction - */ -export const Button = ({ - primary = false, - size = 'medium', - backgroundColor, - label, - ...props -}: ButtonProps) : JSX.Element => { - const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary'; - return ( - - ); -}; diff --git a/dashboard/src/components/Button/button.css b/dashboard/src/components/Button/button.css deleted file mode 100644 index dc91dc7..0000000 --- a/dashboard/src/components/Button/button.css +++ /dev/null @@ -1,30 +0,0 @@ -.storybook-button { - font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; - font-weight: 700; - border: 0; - border-radius: 3em; - cursor: pointer; - display: inline-block; - line-height: 1; -} -.storybook-button--primary { - color: white; - background-color: #1ea7fd; -} -.storybook-button--secondary { - color: #333; - background-color: transparent; - box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; -} -.storybook-button--small { - font-size: 12px; - padding: 10px 16px; -} -.storybook-button--medium { - font-size: 14px; - padding: 11px 20px; -} -.storybook-button--large { - font-size: 16px; - padding: 12px 24px; -} diff --git a/dashboard/src/components/Dashboard/Dashboard.tsx b/dashboard/src/components/Dashboard/Dashboard.tsx new file mode 100644 index 0000000..5df051c --- /dev/null +++ b/dashboard/src/components/Dashboard/Dashboard.tsx @@ -0,0 +1,17 @@ +import LateralMenu from "../LateralMenu/LateralMenu"; +import TreeTable from "../Table/TreeTable"; + +const Dashboard = () : JSX.Element => { + return ( +
+
+ +
+ +
+
+
+ ); +}; + +export default Dashboard; diff --git a/dashboard/src/stories/Button.stories.ts b/dashboard/src/stories/Button.stories.ts deleted file mode 100644 index 9421e99..0000000 --- a/dashboard/src/stories/Button.stories.ts +++ /dev/null @@ -1,53 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { fn } from '@storybook/test'; - -import { Button } from '../components/Button/Button'; - -// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export -const meta = { - title: 'Example/Button', - component: Button, - parameters: { - // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout - layout: 'centered', - }, - // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs - tags: ['autodocs'], - // More on argTypes: https://storybook.js.org/docs/api/argtypes - argTypes: { - backgroundColor: { control: 'color' }, - }, - // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args - args: { onClick: fn() }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -export const Primary: Story = { - args: { - primary: true, - label: 'Button', - }, -}; - -export const Secondary: Story = { - args: { - label: 'Button', - }, -}; - -export const Large: Story = { - args: { - size: 'large', - label: 'Button', - }, -}; - -export const Small: Story = { - args: { - size: 'small', - label: 'Button', - }, -};