diff --git a/latosa-frontend/app/(auth)/dashboard/page.tsx b/latosa-frontend/app/(auth)/dashboard/page.tsx new file mode 100644 index 0000000..36e2957 --- /dev/null +++ b/latosa-frontend/app/(auth)/dashboard/page.tsx @@ -0,0 +1,57 @@ +import { AppSidebar } from "@/components/app-sidebar"; +import { + Breadcrumb, + BreadcrumbItem, + BreadcrumbLink, + BreadcrumbList, + BreadcrumbPage, + BreadcrumbSeparator, +} from "@/components/ui/breadcrumb"; +import { Separator } from "@/components/ui/separator"; +import { + SidebarInset, + SidebarProvider, + SidebarTrigger, +} from "@/components/ui/sidebar"; + +export default function Page() { + return ( + + + +
+
+ + + {/* + + + + Building Your Application + + + + + + Data Fetching + + + + */} +
+
+
+
+
+
+
+
+
+
+ + + ); +} diff --git a/latosa-frontend/app/(auth)/layout.tsx b/latosa-frontend/app/(auth)/layout.tsx new file mode 100644 index 0000000..87abb96 --- /dev/null +++ b/latosa-frontend/app/(auth)/layout.tsx @@ -0,0 +1,34 @@ +import type { Metadata } from "next"; +import { Geist, Geist_Mono } from "next/font/google"; +import "@/app/globals.css"; + +const geistSans = Geist({ + variable: "--font-geist-sans", + subsets: ["latin"], +}); + +const geistMono = Geist_Mono({ + variable: "--font-geist-mono", + subsets: ["latin"], +}); + +export const metadata: Metadata = { + title: "Create Next App", + description: "Generated by create next app", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + + {children} + + + ); +} diff --git a/latosa-frontend/app/contact/page.tsx b/latosa-frontend/app/(main)/contact/page.tsx similarity index 100% rename from latosa-frontend/app/contact/page.tsx rename to latosa-frontend/app/(main)/contact/page.tsx diff --git a/latosa-frontend/app/gallery/page.tsx b/latosa-frontend/app/(main)/gallery/page.tsx similarity index 60% rename from latosa-frontend/app/gallery/page.tsx rename to latosa-frontend/app/(main)/gallery/page.tsx index 0c12a83..5a9a15b 100644 --- a/latosa-frontend/app/gallery/page.tsx +++ b/latosa-frontend/app/(main)/gallery/page.tsx @@ -1,7 +1,3 @@ export default function Gallery() { - return ( - <> - - - ) + return <>; } diff --git a/latosa-frontend/app/(main)/history/[slug]/page.tsx b/latosa-frontend/app/(main)/history/[slug]/page.tsx new file mode 100644 index 0000000..bea6a2e --- /dev/null +++ b/latosa-frontend/app/(main)/history/[slug]/page.tsx @@ -0,0 +1,80 @@ +"use server"; + +export default async function HistoryDetails({ + params, +}: { + params: Promise<{ slug: string }>; +}) { + const { slug } = await params; + const default_img: string = + "https://shadcnblocks.com/images/block/placeholder-dark-1.svg"; + const default_style: string = + "blog-paragraph mb-5 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg"; + const sub_header_style: string = + "py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl"; + + return ( +
+
+
+

+ {slug} +

+
+
+
+

Subtitle 1

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing + elit. Deleniti architecto incidunt, hic in + consectetur eligendi nobis numquam tenetur sit + repellat et unde, maxime ducimus autem esse + temporibus omnis eum molestias! +

+
+
+ {slug} +
+
+

Subtitle 2

+

+ Lorem ipsm dolor sit amet, consectetur adipisicing + elit. Deleniti architecto incidunt, hic in + consectetur eligendi nobis numquam tenetur sit + repellat et unde, maxime ducimus autem esse + temporibus omnis eum molestias! +

+
+
+ {slug} +
+
+

Subtitle 3

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing + elit. Deleniti architecto incidunt, hic in + consectetur eligendi nobis numquam tenetur sit + repellat et unde, maxime ducimus autem esse + temporibus omnis eum molestias! +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing + elit. Deleniti architecto incidunt, hic in + consectetur eligendi nobis numquam tenetur sit + repellat et unde, maxime ducimus autem esse + temporibus omnis eum molestias! +

+
+
+
+
+ ); +} diff --git a/latosa-frontend/app/history/page.tsx b/latosa-frontend/app/(main)/history/page.tsx similarity index 81% rename from latosa-frontend/app/history/page.tsx rename to latosa-frontend/app/(main)/history/page.tsx index 893b516..d27089e 100644 --- a/latosa-frontend/app/history/page.tsx +++ b/latosa-frontend/app/(main)/history/page.tsx @@ -1,9 +1,9 @@ import Blog from "@/components/blog"; export default function History() { - return( + return (
- +
- ) + ); } diff --git a/latosa-frontend/app/layout.tsx b/latosa-frontend/app/(main)/layout.tsx similarity index 96% rename from latosa-frontend/app/layout.tsx rename to latosa-frontend/app/(main)/layout.tsx index 5a322db..798ff81 100644 --- a/latosa-frontend/app/layout.tsx +++ b/latosa-frontend/app/(main)/layout.tsx @@ -1,6 +1,6 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; -import "./globals.css"; +import "@/app/globals.css"; import Navbar from "@/components/nav-bar"; import Footer from "@/components/footer"; diff --git a/latosa-frontend/app/login/page.tsx b/latosa-frontend/app/(main)/login/page.tsx similarity index 100% rename from latosa-frontend/app/login/page.tsx rename to latosa-frontend/app/(main)/login/page.tsx diff --git a/latosa-frontend/app/page.tsx b/latosa-frontend/app/(main)/page.tsx similarity index 100% rename from latosa-frontend/app/page.tsx rename to latosa-frontend/app/(main)/page.tsx diff --git a/latosa-frontend/app/globals.css b/latosa-frontend/app/globals.css index 11d8278..296a425 100644 --- a/latosa-frontend/app/globals.css +++ b/latosa-frontend/app/globals.css @@ -8,7 +8,7 @@ body { @layer base { :root { - /* Define your custom padding value */ + /* Define your custom padding value */ --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; @@ -34,6 +34,14 @@ body { --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; + --sidebar-background: 0 0% 98%; + --sidebar-foreground: 240 5.3% 26.1%; + --sidebar-primary: 240 5.9% 10%; + --sidebar-primary-foreground: 0 0% 98%; + --sidebar-accent: 240 4.8% 95.9%; + --sidebar-accent-foreground: 240 5.9% 10%; + --sidebar-border: 220 13% 91%; + --sidebar-ring: 217.2 91.2% 59.8%; } .dark { @@ -61,6 +69,14 @@ body { --chart-3: 30 80% 55%; --chart-4: 280 65% 60%; --chart-5: 340 75% 55%; + --sidebar-background: 240 5.9% 10%; + --sidebar-foreground: 240 4.8% 95.9%; + --sidebar-primary: 224.3 76.3% 48%; + --sidebar-primary-foreground: 0 0% 100%; + --sidebar-accent: 240 3.7% 15.9%; + --sidebar-accent-foreground: 240 4.8% 95.9%; + --sidebar-border: 240 3.7% 15.9%; + --sidebar-ring: 217.2 91.2% 59.8%; } } diff --git a/latosa-frontend/app/history/[slug]/page.tsx b/latosa-frontend/app/history/[slug]/page.tsx deleted file mode 100644 index d37d138..0000000 --- a/latosa-frontend/app/history/[slug]/page.tsx +++ /dev/null @@ -1,63 +0,0 @@ -"use server" - -export default async function HistoryDetails({ - params, -}: { - params: Promise<{ slug: string }>; -}) { - const { slug } = await params; - const default_img: string = "https://shadcnblocks.com/images/block/placeholder-dark-1.svg" - const default_style: string = "blog-paragraph mb-5 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg" - const sub_header_style: string = "py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl" - - return ( -
-
-
-

- {slug} -

-
-
-
-

Subtitle 1

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias! -

-
-
- {slug} - -
-
-

Subtitle 2

-

- Lorem ipsm dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias! -

-
-
- {slug} - -
-
-

Subtitle 3

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias! -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias! -

-
-
-
-
- ) -} diff --git a/latosa-frontend/components/app-sidebar.tsx b/latosa-frontend/components/app-sidebar.tsx new file mode 100644 index 0000000..bab033f --- /dev/null +++ b/latosa-frontend/components/app-sidebar.tsx @@ -0,0 +1,175 @@ +"use client"; + +import * as React from "react"; +import { + AudioWaveform, + BookOpen, + Bot, + Command, + Frame, + GalleryVerticalEnd, + Map, + PieChart, + Settings2, + SquareTerminal, +} from "lucide-react"; + +import { NavMain } from "@/components/nav-main"; +import { NavProjects } from "@/components/nav-projects"; +import { NavUser } from "@/components/nav-user"; +import { TeamSwitcher } from "@/components/team-switcher"; +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarHeader, + SidebarRail, +} from "@/components/ui/sidebar"; + +// This is sample data. +const data = { + user: { + name: "shadcn", + email: "m@example.com", + avatar: "/avatars/shadcn.jpg", + }, + teams: [ + { + name: "Acme Inc", + logo: GalleryVerticalEnd, + plan: "Enterprise", + }, + { + name: "Acme Corp.", + logo: AudioWaveform, + plan: "Startup", + }, + { + name: "Evil Corp.", + logo: Command, + plan: "Free", + }, + ], + navMain: [ + { + title: "Playground", + url: "#", + icon: SquareTerminal, + isActive: true, + items: [ + { + title: "History", + url: "#", + }, + { + title: "Starred", + url: "#", + }, + { + title: "Settings", + url: "#", + }, + ], + }, + { + title: "Models", + url: "#", + icon: Bot, + items: [ + { + title: "Genesis", + url: "#", + }, + { + title: "Explorer", + url: "#", + }, + { + title: "Quantum", + url: "#", + }, + ], + }, + { + title: "Documentation", + url: "#", + icon: BookOpen, + items: [ + { + title: "Introduction", + url: "#", + }, + { + title: "Get Started", + url: "#", + }, + { + title: "Tutorials", + url: "#", + }, + { + title: "Changelog", + url: "#", + }, + ], + }, + { + title: "Settings", + url: "#", + icon: Settings2, + items: [ + { + title: "General", + url: "#", + }, + { + title: "Team", + url: "#", + }, + { + title: "Billing", + url: "#", + }, + { + title: "Limits", + url: "#", + }, + ], + }, + ], + projects: [ + { + name: "Design Engineering", + url: "#", + icon: Frame, + }, + { + name: "Sales & Marketing", + url: "#", + icon: PieChart, + }, + { + name: "Travel", + url: "#", + icon: Map, + }, + ], +}; + +export function AppSidebar({ ...props }: React.ComponentProps) { + return ( + + + + + + + + + + + + + + ); +} diff --git a/latosa-frontend/components/nav-main.tsx b/latosa-frontend/components/nav-main.tsx new file mode 100644 index 0000000..902fb43 --- /dev/null +++ b/latosa-frontend/components/nav-main.tsx @@ -0,0 +1,73 @@ +"use client"; + +import { ChevronRight, type LucideIcon } from "lucide-react"; + +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from "@/components/ui/collapsible"; +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + SidebarMenuSub, + SidebarMenuSubButton, + SidebarMenuSubItem, +} from "@/components/ui/sidebar"; + +export function NavMain({ + items, +}: { + items: { + title: string; + url: string; + icon?: LucideIcon; + isActive?: boolean; + items?: { + title: string; + url: string; + }[]; + }[]; +}) { + return ( + + Platform + + {items.map((item) => ( + + + + + {item.icon && } + {item.title} + + + + + + {item.items?.map((subItem) => ( + + + + {subItem.title} + + + + ))} + + + + + ))} + + + ); +} diff --git a/latosa-frontend/components/nav-projects.tsx b/latosa-frontend/components/nav-projects.tsx new file mode 100644 index 0000000..cd27490 --- /dev/null +++ b/latosa-frontend/components/nav-projects.tsx @@ -0,0 +1,89 @@ +"use client"; + +import { + Folder, + Forward, + MoreHorizontal, + Trash2, + type LucideIcon, +} from "lucide-react"; + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuAction, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/components/ui/sidebar"; + +export function NavProjects({ + projects, +}: { + projects: { + name: string; + url: string; + icon: LucideIcon; + }[]; +}) { + const { isMobile } = useSidebar(); + + return ( + + Projects + + {projects.map((item) => ( + + + + + {item.name} + + + + + + + More + + + + + + View Project + + + + Share Project + + + + + Delete Project + + + + + ))} + + + + More + + + + + ); +} diff --git a/latosa-frontend/components/nav-user.tsx b/latosa-frontend/components/nav-user.tsx new file mode 100644 index 0000000..018d2dc --- /dev/null +++ b/latosa-frontend/components/nav-user.tsx @@ -0,0 +1,128 @@ +"use client"; + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from "lucide-react"; + +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/components/ui/sidebar"; + +export function NavUser({ + user, +}: { + user: { + name: string; + email: string; + avatar: string; + }; +}) { + const { isMobile } = useSidebar(); + + return ( + + + + + + + + + CN + + +
+ + {user.name} + + + {user.email} + +
+ + + + + +
+ + + + CN + + +
+ + {user.name} + + + {user.email} + +
+
+ + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + + + + + + ); +} diff --git a/latosa-frontend/components/team-switcher.tsx b/latosa-frontend/components/team-switcher.tsx new file mode 100644 index 0000000..691d254 --- /dev/null +++ b/latosa-frontend/components/team-switcher.tsx @@ -0,0 +1,95 @@ +"use client"; + +import * as React from "react"; +import { ChevronsUpDown, Plus } from "lucide-react"; + +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from "@/components/ui/sidebar"; + +export function TeamSwitcher({ + teams, +}: { + teams: { + name: string; + logo: React.ElementType; + plan: string; + }[]; +}) { + const { isMobile } = useSidebar(); + const [activeTeam, setActiveTeam] = React.useState(teams[0]); + + return ( + + + + + +
+ +
+
+ + {activeTeam.name} + + + {activeTeam.plan} + +
+ + + + + + Teams + + {teams.map((team, index) => ( + setActiveTeam(team)} + className="gap-2 p-2" + > +
+ +
+ {team.name} + + ⌘{index + 1} + + + ))} + + +
+ +
+
+ Add team +
+ + + + + + ); +} diff --git a/latosa-frontend/components/ui/breadcrumb.tsx b/latosa-frontend/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..a35685a --- /dev/null +++ b/latosa-frontend/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react"; +import { Slot } from "@radix-ui/react-slot"; +import { ChevronRight, MoreHorizontal } from "lucide-react"; + +import { cn } from "@/lib/utils"; + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode; + } +>(({ ...props }, ref) =>