TurTaskProject/TurTaskWeb
1
0
Fork 0
mirror of https://github.com/TurTaskProject/TurTaskWeb.git synced 2025-12-19 05:54:07 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

Constructing dashboard component.

Browse Source
This commit is contained in:
THIS ONE IS A LITTLE BIT TRICKY KRUB 2023-11-19 18:14:58 +07:00
parent e39b7c52d8
commit 9d2ce02350
3 changed files with 80 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/App.jsx
View File

@ -12,6 +12,7 @@ import IconSideNav from "./components/navigations/IconSideNav";
import Eisenhower from "./components/eisenhowerMatrix/Eisenhower";
import PrivateRoute from "./PrivateRoute";
import ProfileUpdatePage from "./components/profilePage";
import Dashboard from "./components/dashboard";
const App = () => {
@ -26,7 +27,7 @@ const App = () => {
<NavBar />
<div className={isLoginPageOrSignUpPage ? "" : "overflow-x-auto"}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/" element={<Dashboard />} />
<Route exact path="/tasks" element={<PrivateRoute />}>
<Route exact path="/tasks" element={<KanbanPage />} />
</Route>

59
frontend/src/components/dashboard.jsx Normal file
View File

@ -0,0 +1,59 @@
"use client";
import {
Card,
Grid,
Tab,
TabGroup,
TabList,
TabPanel,
TabPanels,
Text,
Title,
} from "@tremor/react";
export default function DashboardExample() {
return (
<main className="p-12">
<Title>Dashboard</Title>
<Text>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</Text>
<TabGroup className="mt-6">
<TabList>
<Tab>Overview</Tab>
<Tab>Detail</Tab>
</TabList>
<TabPanels>
<TabPanel>
<Grid numItemsMd={2} numItemsLg={3} className="gap-6 mt-6">
<Card>
{/* Placeholder to set height */}
<div className="h-28" />
</Card>
<Card>
{/* Placeholder to set height */}
<div className="h-28" />
</Card>
<Card>
{/* Placeholder to set height */}
<div className="h-28" />
</Card>
</Grid>
<div className="mt-6">
<Card>
<div className="h-80" />
</Card>
</div>
</TabPanel>
<TabPanel>
<div className="mt-6">
<Card>
<div className="h-96" />
</Card>
</div>
</TabPanel>
</TabPanels>
</TabGroup>
</main>
);
}

38
frontend/tailwind.config.js
View File

@ -14,40 +14,40 @@ export default {
sans: ['"Proxima Nova"', ...defaultTheme.fontFamily.sans],
},
colors:{
"dark-tremor": {
tremor: {
brand: {
faint: "#0B1229", // custom
muted: "#172554", // blue-950
subtle: "#1e40af", // blue-800
faint: "#eff6ff", // blue-50
muted: "#bfdbfe", // blue-200
subtle: "#60a5fa", // blue-400
DEFAULT: "#3b82f6", // blue-500
emphasis: "#60a5fa", // blue-400
inverted: "#030712", // gray-950
emphasis: "#1d4ed8", // blue-700
inverted: "#ffffff", // white
},
background: {
muted: "#131A2B", // custom
subtle: "#1f2937", // gray-800
DEFAULT: "#111827", // gray-900
emphasis: "#d1d5db", // gray-300
muted: "#f9fafb", // gray-50
subtle: "#f3f4f6", // gray-100
DEFAULT: "#ffffff", // white
emphasis: "#374151", // gray-700
},
border: {
DEFAULT: "#1f2937", // gray-800
DEFAULT: "#e5e7eb", // gray-200
},
ring: {
DEFAULT: "#1f2937", // gray-800
DEFAULT: "#e5e7eb", // gray-200
},
content: {
subtle: "#4b5563", // gray-600
subtle: "#9ca3af", // gray-400
DEFAULT: "#6b7280", // gray-500
emphasis: "#e5e7eb", // gray-200
strong: "#f9fafb", // gray-50
inverted: "#000000", // black
emphasis: "#374151", // gray-700
strong: "#111827", // gray-900
inverted: "#ffffff", // white
},
},
},
boxShadow:{
"dark-tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
"dark-tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
"dark-tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
"tremor-input": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
"tremor-card": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
"tremor-dropdown": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
},
borderRadius: {
"tremor-small": "0.375rem",