Skip to content

Commit

Permalink
widget elements
Browse files Browse the repository at this point in the history
  • Loading branch information
hayyi2 committed Nov 19, 2023
1 parent 58a2c8d commit 71b0b6f
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 2 deletions.
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@ npm run dev
- [ ] elements
- [x] forms
- [x] tables
- [ ] widgets
- [x] widgets
- [ ] components
- [ ] examples
- [x] auth
- [ ] empty
- [x] empty
- [ ] dasboard

## Docs
Expand Down
10 changes: 10 additions & 0 deletions src/Router.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import Forms from "./pages/Forms";
import Tables from "./pages/Tables";
import Login from "./pages/Login";
import Register from "./pages/Register";
import Widgets from "./pages/Widgets";
import Components from "./pages/Components";

export const router = createBrowserRouter([
{
Expand All @@ -34,6 +36,14 @@ export const router = createBrowserRouter([
path: "table",
element: <Tables />,
},
{
path: "widgets",
element: <Widgets />,
},
{
path: "components",
element: <Components />,
},
{
path: "auth/login",
element: <Login />,
Expand Down
18 changes: 18 additions & 0 deletions src/pages/Components.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import { PageHeader, PageHeaderHeading } from "@/components/page-header";
import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export default function Components() {
return (
<>
<PageHeader>
<PageHeaderHeading>Components</PageHeaderHeading>
</PageHeader>
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card description.</CardDescription>
</CardHeader>
</Card>
</>
)
}
111 changes: 111 additions & 0 deletions src/pages/Widgets.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@
import { PageHeader, PageHeaderHeading } from "@/components/page-header";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

export default function Widgets() {
return (
<>
<PageHeader>
<PageHeaderHeading>Widgets</PageHeaderHeading>
</PageHeader>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
Total Revenue
</CardTitle>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="h-4 w-4 text-muted-foreground">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
</svg>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">$45,231.89</div>
<p className="text-xs text-muted-foreground">
+20.1% from last month
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
Subscriptions
</CardTitle>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="h-4 w-4 text-muted-foreground">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">+2350</div>
<p className="text-xs text-muted-foreground">
+180.1% from last month
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Sales</CardTitle>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="h-4 w-4 text-muted-foreground">
<rect width="20" height="14" x="2" y="5" rx="2" />
<path d="M2 10h20" />
</svg>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">+12,234</div>
<p className="text-xs text-muted-foreground">
+19% from last month
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">
Active Now
</CardTitle>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
className="h-4 w-4 text-muted-foreground">
<path d="M22 12h-4l-3 9L9 3l-3 9H2" />
</svg>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">+573</div>
<p className="text-xs text-muted-foreground">
+201 since last hour
</p>
</CardContent>
</Card>
</div>
</>
)
}

0 comments on commit 71b0b6f

Please sign in to comment.