From 688f9a7e76dd8102be0fa49badce3569c31f7235 Mon Sep 17 00:00:00 2001 From: Kirill kine Nevzorov Date: Sun, 8 Sep 2024 20:34:30 +0000 Subject: [PATCH] add card tiles --- src/App.css | 25 ++++------- src/App.tsx | 66 ++++++++++++++++++++++------- src/components/BottomBar.css | 4 +- src/components/BottomBar.tsx | 11 +++-- src/components/Card.css | 31 ++++++++++++++ src/components/Card.tsx | 19 +++++++++ src/components/MainSection.tsx | 6 +-- src/components/RenderingSection.tsx | 10 ++--- src/components/SideBar.css | 2 +- src/components/SideBar.tsx | 10 ++--- 10 files changed, 130 insertions(+), 54 deletions(-) create mode 100644 src/components/Card.css create mode 100644 src/components/Card.tsx diff --git a/src/App.css b/src/App.css index 6cbf8ab..9f68b69 100644 --- a/src/App.css +++ b/src/App.css @@ -11,31 +11,22 @@ -moz-osx-font-smoothing: grayscale; } -/* elements have padding */ -#SideBar, #BottomBar, #RenderingSection { - @apply p-4; +/* colour */ +#root, #SideBar, #BottomBar, #MainSection { + @apply bg-slate-600; } -/* bars have colour */ -#SideBar, #BottomBar { - @apply bg-slate-800; +#RenderingSection { + @apply bg-slate-50 shadow-lg rounded-t-none rounded-r-none; } -/* sections have colour */ section { @apply rounded-md; } -section, #root { - @apply bg-slate-800 text-yellow-100; -} - -#MainSection { - @apply bg-slate-800; -} - -#RenderingSection { - @apply bg-slate-600 rounded-t-none rounded-r-none; +/* elements have padding */ +#SideBar, #BottomBar, #RenderingSection { + @apply p-4; } /* links */ diff --git a/src/App.tsx b/src/App.tsx index c693e04..6dc0678 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,23 +1,59 @@ import './App.css'; -// import BottomBar from './components/BottomBar.tsx'; -// import RenderingSection from './components/RenderingSection.tsx'; -// import SideBar from './components/SideBar.tsx'; -// import MainSection from './components/MainSection.tsx' +import BottomBar from './components/BottomBar.tsx'; +import RenderingSection from './components/RenderingSection.tsx'; +import SideBar from './components/SideBar.tsx'; +import MainSection from './components/MainSection.tsx' +import Card from './components/Card.tsx' const App = () => { - return
-
- Under Construction -
-
- // return
- // - // - // - // - // + //
+ // Under Construction + //
//
+ + return <> +
+ + +
Test
+
+ + + + +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+
+ + + + + + + + + + + +
}; export default App; \ No newline at end of file diff --git a/src/components/BottomBar.css b/src/components/BottomBar.css index dc392d5..aa5b946 100644 --- a/src/components/BottomBar.css +++ b/src/components/BottomBar.css @@ -1,3 +1,3 @@ #BottomBar { - @apply w-full h-36 place-self-end; -} + @apply w-full min-h-36 place-self-end overflow-scroll; +} \ No newline at end of file diff --git a/src/components/BottomBar.tsx b/src/components/BottomBar.tsx index c2a01cc..9359af5 100644 --- a/src/components/BottomBar.tsx +++ b/src/components/BottomBar.tsx @@ -1,13 +1,12 @@ +import { ReactNode } from 'react' import './BottomBar.css' -interface BottomBarProps { - childNodes?: React.ReactNode[] +interface Props { + children?: React.ReactNode[] } -export default function BottomBar({ childNodes }: BottomBarProps) { - +export default function BottomBar({ children }: Props): ReactNode { return
- bottom bar - {childNodes} + {children}
} \ No newline at end of file diff --git a/src/components/Card.css b/src/components/Card.css new file mode 100644 index 0000000..fa30b76 --- /dev/null +++ b/src/components/Card.css @@ -0,0 +1,31 @@ +div.card { + @apply max-w-sm rounded overflow-hidden shadow-lg bg-slate-100; +} + +#BottomBar>.card{ + @apply mr-4; +} + +#SideBar>.card{ + @apply mb-4; +} + +.card>div { + @apply px-6 py-4; +} + +.card>div>.title{ + @apply font-bold text-base mb-2 capitalize; +} + +.card>div>.content{ + @apply text-gray-700 text-xs; +} + +.card input { + @apply mt-2 mr-2 bg-slate-200; +} + +.card label { + @apply mt-2 float-right; +} \ No newline at end of file diff --git a/src/components/Card.tsx b/src/components/Card.tsx new file mode 100644 index 0000000..cac193b --- /dev/null +++ b/src/components/Card.tsx @@ -0,0 +1,19 @@ +import { ReactNode } from 'react' +import './Card.css' + +interface Props { + title?: string + children?: ReactNode[] | ReactNode +} + +export default function Card({ title, children }: Props): ReactNode { + + return <> +
+
+ {(title ?
{title}
: undefined)} + {(children ?
{children}
: undefined)} +
+
+ +} \ No newline at end of file diff --git a/src/components/MainSection.tsx b/src/components/MainSection.tsx index d35a014..6e6ea20 100644 --- a/src/components/MainSection.tsx +++ b/src/components/MainSection.tsx @@ -1,11 +1,11 @@ -import React from 'react' +import React, { ReactNode } from 'react' import './MainSection.css' -interface MainSectionProps { +interface Props { children?: React.ReactNode[] } -export default function MainSection({ children }: MainSectionProps) { +export default function MainSection({ children }: Props): ReactNode { return
{children}
diff --git a/src/components/RenderingSection.tsx b/src/components/RenderingSection.tsx index ce6d8c3..724f9a3 100644 --- a/src/components/RenderingSection.tsx +++ b/src/components/RenderingSection.tsx @@ -1,13 +1,13 @@ +import { ReactNode } from 'react' import './RenderingSection.css' -interface RenderingSectionProps { - childNodes?: React.ReactNode[] +interface Props { + children?: React.ReactNode[] } -export default function RenderingSection({ childNodes }: RenderingSectionProps) { +export default function RenderingSection({ children }: Props): ReactNode { return
- rendering section - {childNodes} + {children}
} \ No newline at end of file diff --git a/src/components/SideBar.css b/src/components/SideBar.css index 659a269..464a981 100644 --- a/src/components/SideBar.css +++ b/src/components/SideBar.css @@ -1,3 +1,3 @@ #SideBar { - @apply h-screen w-36; + @apply h-screen min-w-72 overflow-scroll; } \ No newline at end of file diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx index 1c9ba70..5c87cee 100644 --- a/src/components/SideBar.tsx +++ b/src/components/SideBar.tsx @@ -1,13 +1,13 @@ +import { ReactNode } from 'react' import './SideBar.css' -interface SideBarProps { - childNodes?: React.ReactNode[] +interface Props { + children?: ReactNode[] | ReactNode } -export default function SideBar({ childNodes }: SideBarProps) { +export default function SideBar({ children }: Props): ReactNode { return } \ No newline at end of file