create-reactivite 1.0.3 → 1.1.0

package/template/src/App.tsx

@@ -1,13 +1,27 @@
-
-import './App.css'
-import Home from './pages/Homepage/Homepage'
-
-function App() {
-  return (
-    <>
-    <Home/>
-    </>
-  )
-}
-
-export default App
+
+import './App.css'
+
+import { createBrowserRouter } from "react-router";
+import { RouterProvider } from "react-router/dom";
+import Home from './pages/Homepage/Homepage';
+import DashboardPage from './pages/Dashboard/Dashboard';
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Home />,
+  },
+  {
+    path: "/portfolio",
+    element: <h1>Portfolio</h1>,
+  },
+  {
+    path: "/dashboard",
+    element: <DashboardPage />,
+  },
+]);
+function App() {
+  return   <RouterProvider router={router} />
+
+}
+
+export default App

package/template/src/components/admin-page-components/activity-chart.tsx

@@ -0,0 +1,80 @@
+
+import {
+  Area,
+  AreaChart,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+  Tooltip,
+} from "recharts";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
+
+const data = [
+  { time: "00:00", users: 120 },
+  { time: "04:00", users: 80 },
+  { time: "08:00", users: 250 },
+  { time: "12:00", users: 420 },
+  { time: "16:00", users: 380 },
+  { time: "20:00", users: 290 },
+  { time: "23:59", users: 180 },
+];
+
+export function ActivityChart() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>User Activity</CardTitle>
+        <CardDescription>Active users throughout the day</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ResponsiveContainer width="100%" height={300}>
+          <AreaChart data={data}>
+            <defs>
+              <linearGradient id="colorUsers" x1="0" y1="0" x2="0" y2="1">
+                <stop
+                  offset="5%"
+                  stopColor="hsl(var(--primary))"
+                  stopOpacity={0.3}
+                />
+                <stop
+                  offset="95%"
+                  stopColor="hsl(var(--primary))"
+                  stopOpacity={0}
+                />
+              </linearGradient>
+            </defs>
+            <XAxis
+              dataKey="time"
+              stroke="hsl(var(--muted-foreground))"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+            />
+            <YAxis
+              stroke="hsl(var(--muted-foreground))"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "hsl(var(--popover))",
+                border: "1px solid hsl(var(--border))",
+                borderRadius: "8px",
+              }}
+              labelStyle={{ color: "hsl(var(--popover-foreground))" }}
+            />
+            <Area
+              type="monotone"
+              dataKey="users"
+              stroke="hsl(var(--primary))"
+              fillOpacity={1}
+              fill="url(#colorUsers)"
+              strokeWidth={2}
+            />
+          </AreaChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}

package/template/src/components/admin-page-components/dashboard-header.tsx

@@ -0,0 +1,38 @@
+
+import { Search, Bell, Menu } from "lucide-react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+
+
+export function DashboardHeader({ onMenuClick }: { onMenuClick: () => void }) {
+  return (
+    <header className="sticky top-0 z-40 border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+      <div className="flex h-16 items-center gap-4 px-6">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="lg:hidden"
+          onClick={onMenuClick}
+        >
+          <Menu className="h-5 w-5" />
+        </Button>
+
+        <div className="flex-1 flex items-center gap-4">
+          <div className="relative w-full max-w-md">
+            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="Search..."
+              className="pl-9 bg-muted/50 border-0"
+            />
+          </div>
+        </div>
+
+        <Button variant="ghost" size="icon" className="relative">
+          <Bell className="h-5 w-5" />
+          <span className="absolute top-1.5 right-1.5 h-2 w-2 rounded-full bg-primary" />
+        </Button>
+      </div>
+    </header>
+  );
+}

package/template/src/components/admin-page-components/dashboard-layout.tsx

@@ -0,0 +1,23 @@
+import type React from "react";
+
+import { useState } from "react";
+import { DashboardSidebar } from "./dashboard-sidebar";
+import { DashboardHeader } from "./dashboard-header";
+
+export function DashboardLayout({ children }: { children: React.ReactNode }) {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+
+  return (
+    <div className="dark min-h-screen bg-background">
+      <DashboardSidebar open={sidebarOpen} />
+      <div
+        className={`transition-all duration-300 ${
+          sidebarOpen ? "lg:pl-64" : "lg:pl-0"
+        }`}
+      >
+        <DashboardHeader onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
+        <main className="p-6 lg:p-8">{children}</main>
+      </div>
+    </div>
+  );
+}

package/template/src/components/admin-page-components/dashboard-sales.tsx

@@ -0,0 +1,67 @@
+
+import { Avatar, AvatarFallback } from "../ui/avatar";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
+
+const recentSales = [
+  {
+    name: "Olivia Martin",
+    email: "olivia.martin@email.com",
+    amount: "+$1,999.00",
+    initials: "OM",
+  },
+  {
+    name: "Jackson Lee",
+    email: "jackson.lee@email.com",
+    amount: "+$39.00",
+    initials: "JL",
+  },
+  {
+    name: "Isabella Nguyen",
+    email: "isabella.nguyen@email.com",
+    amount: "+$299.00",
+    initials: "IN",
+  },
+  {
+    name: "William Kim",
+    email: "will@email.com",
+    amount: "+$99.00",
+    initials: "WK",
+  },
+  {
+    name: "Sofia Davis",
+    email: "sofia.davis@email.com",
+    amount: "+$39.00",
+    initials: "SD",
+  },
+];
+
+export function RecentSales() {
+  return (
+    <Card className="col-span-3">
+      <CardHeader>
+        <CardTitle>Recent Sales</CardTitle>
+        <CardDescription>You made 265 sales this month</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="space-y-6">
+          {recentSales.map((sale) => (
+            <div key={sale.email} className="flex items-center gap-4">
+              <Avatar className="h-10 w-10">
+                <AvatarFallback className="bg-primary/10 text-primary font-medium">
+                  {sale.initials}
+                </AvatarFallback>
+              </Avatar>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium leading-none">{sale.name}</p>
+                <p className="text-sm text-muted-foreground mt-1">
+                  {sale.email}
+                </p>
+              </div>
+              <div className="font-medium">{sale.amount}</div>
+            </div>
+          ))}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/template/src/components/admin-page-components/dashboard-sidebar.tsx

@@ -0,0 +1,81 @@
+import {
+  LayoutDashboard,
+  Users,
+  ShoppingCart,
+  BarChart3,
+  Settings,
+  FileText,
+  Package,
+  CreditCard,
+} from "lucide-react";
+import { cn } from "../../lib/utils";
+
+
+const navigation = [
+  { name: "Dashboard", icon: LayoutDashboard, href: "#", current: true },
+  { name: "Customers", icon: Users, href: "#", current: false },
+  { name: "Products", icon: Package, href: "#", current: false },
+  { name: "Orders", icon: ShoppingCart, href: "#", current: false },
+  { name: "Analytics", icon: BarChart3, href: "#", current: false },
+  { name: "Transactions", icon: CreditCard, href: "#", current: false },
+  { name: "Reports", icon: FileText, href: "#", current: false },
+  { name: "Settings", icon: Settings, href: "#", current: false },
+];
+
+export function DashboardSidebar({ open }: { open: boolean }) {
+  return (
+    <>
+      <div
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 w-64 bg-sidebar border-r border-sidebar-border transition-transform duration-300 lg:translate-x-0",
+          open ? "translate-x-0" : "-translate-x-full"
+        )}
+      >
+        <div className="flex h-full flex-col">
+          <div className="flex h-16 items-center gap-2 border-b border-sidebar-border px-6">
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
+              <LayoutDashboard className="h-5 w-5 text-primary-foreground" />
+            </div>
+            <span className="text-lg font-semibold text-sidebar-foreground">
+              Admin Panel
+            </span>
+          </div>
+
+          <nav className="flex-1 space-y-1 px-3 py-4">
+            {navigation.map((item) => (
+              <a
+                key={item.name}
+                href={item.href}
+                className={cn(
+                  "flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-colors",
+                  item.current
+                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                    : "text-sidebar-foreground/70 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+                )}
+              >
+                <item.icon className="h-5 w-5" />
+                {item.name}
+              </a>
+            ))}
+          </nav>
+
+          <div className="border-t border-sidebar-border p-4">
+            <div className="flex items-center gap-3">
+              <div className="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center">
+                <span className="text-sm font-semibold text-primary">JD</span>
+              </div>
+              <div className="flex-1 min-w-0">
+                <p className="text-sm font-medium text-sidebar-foreground truncate">
+                  John Doe
+                </p>
+                <p className="text-xs text-sidebar-foreground/60 truncate">
+                  john@example.com
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}

package/template/src/components/admin-page-components/revenu-chart.tsx

@@ -0,0 +1,69 @@
+
+import {
+  Bar,
+  BarChart,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+  Tooltip,
+} from "recharts";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card";
+
+const data = [
+  { name: "Jan", total: 4500 },
+  { name: "Feb", total: 3800 },
+  { name: "Mar", total: 5200 },
+  { name: "Apr", total: 4700 },
+  { name: "May", total: 6100 },
+  { name: "Jun", total: 5800 },
+  { name: "Jul", total: 7200 },
+  { name: "Aug", total: 6800 },
+  { name: "Sep", total: 7500 },
+  { name: "Oct", total: 8200 },
+  { name: "Nov", total: 7800 },
+  { name: "Dec", total: 9100 },
+];
+
+export function RevenueChart() {
+  return (
+    <Card className="col-span-4">
+      <CardHeader>
+        <CardTitle>Revenue Overview</CardTitle>
+        <CardDescription>Monthly revenue for the current year</CardDescription>
+      </CardHeader>
+      <CardContent className="pl-2">
+        <ResponsiveContainer width="100%" height={350}>
+          <BarChart data={data}>
+            <XAxis
+              dataKey="name"
+              stroke="hsl(var(--muted-foreground))"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+            />
+            <YAxis
+              stroke="hsl(var(--muted-foreground))"
+              fontSize={12}
+              tickLine={false}
+              axisLine={false}
+              tickFormatter={(value) => `$${value}`}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: "hsl(var(--popover))",
+                border: "1px solid hsl(var(--border))",
+                borderRadius: "8px",
+              }}
+              labelStyle={{ color: "hsl(var(--popover-foreground))" }}
+            />
+            <Bar
+              dataKey="total"
+              fill="hsl(var(--primary))"
+              radius={[8, 8, 0, 0]}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}

package/template/src/components/admin-page-components/stat-cards.tsx

@@ -0,0 +1,50 @@
+import { DollarSign, Users, CreditCard, Activity } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
+
+const stats = [
+  {
+    title: "Total Revenue",
+    value: "$45,231.89",
+    change: "+20.1% from last month",
+    icon: DollarSign,
+  },
+  {
+    title: "Active Users",
+    value: "+2,350",
+    change: "+180.1% from last month",
+    icon: Users,
+  },
+  {
+    title: "Sales",
+    value: "+12,234",
+    change: "+19% from last month",
+    icon: CreditCard,
+  },
+  {
+    title: "Active Now",
+    value: "+573",
+    change: "+201 since last hour",
+    icon: Activity,
+  },
+];
+
+export function StatsCards() {
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      {stats.map((stat) => (
+        <Card key={stat.title}>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium text-muted-foreground">
+              {stat.title}
+            </CardTitle>
+            <stat.icon className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stat.value}</div>
+            <p className="text-xs text-muted-foreground mt-1">{stat.change}</p>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

package/template/src/components/home-page-components/header.tsx

@@ -1,6 +1,6 @@
 
 
-import { Github } from "lucide-react";
+import { GitBranch } from "lucide-react";
 import { Button } from "../ui/button";
 
 export function Header() {
@@ -32,7 +32,7 @@ export function Header() {
         </div>
         <div className="flex items-center gap-4">
           <Button variant="ghost" size="sm">
-            <Github className="h-4 w-4 mr-2" />
+            <GitBranch className="h-4 w-4 mr-2" />
             GitHub
           </Button>
           <Button size="sm">Get Started</Button>

package/template/src/components/ui/accordion.tsx

@@ -1,64 +1,64 @@
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-
-function Accordion({
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
-
-function AccordionItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
-  return (
-    <AccordionPrimitive.Item
-      data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
-      {...props}
-    />
-  )
-}
-
-function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
-    <AccordionPrimitive.Header className="flex">
-      <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
-        className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
-          className
-        )}
-        {...props}
-      >
-        {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
-      </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-  )
-}
-
-function AccordionContent({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
-    <AccordionPrimitive.Content
-      data-slot="accordion-content"
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-      {...props}
-    >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
-    </AccordionPrimitive.Content>
-  )
-}
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }