From 2cbad88faa7b136d38234a621d9a1603a2dc222d Mon Sep 17 00:00:00 2001 From: kimjaehyeon0101 <47347352-kimjaehyeon0101@users.noreply.replit.com> Date: Mon, 29 Sep 2025 14:35:50 +0000 Subject: [PATCH] Add core UI components and layout for media platform Initializes the client-side application with fundamental UI components, including navigation, cards for articles and auctions, and various elements for user interaction and display. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 069d4324-6c40-4355-955e-c714a50de1ea Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/069d4324-6c40-4355-955e-c714a50de1ea/bVdKIaU --- .gitignore | 6 + .replit | 46 + client/index.html | 14 + client/src/App.tsx | 53 + client/src/components/ArticleCard.tsx | 122 + client/src/components/AuctionCard.tsx | 84 + client/src/components/CategoryTabs.tsx | 40 + client/src/components/MediaOutletCard.tsx | 118 + .../src/components/PredictionMarketCard.tsx | 63 + client/src/components/ProfileModal.tsx | 142 + client/src/components/ui/accordion.tsx | 56 + client/src/components/ui/alert-dialog.tsx | 139 + client/src/components/ui/alert.tsx | 59 + client/src/components/ui/aspect-ratio.tsx | 5 + client/src/components/ui/avatar.tsx | 50 + client/src/components/ui/badge.tsx | 36 + client/src/components/ui/breadcrumb.tsx | 115 + client/src/components/ui/button.tsx | 56 + client/src/components/ui/calendar.tsx | 68 + client/src/components/ui/card.tsx | 79 + client/src/components/ui/carousel.tsx | 260 + client/src/components/ui/chart.tsx | 365 + client/src/components/ui/checkbox.tsx | 28 + client/src/components/ui/collapsible.tsx | 11 + client/src/components/ui/command.tsx | 151 + client/src/components/ui/context-menu.tsx | 198 + client/src/components/ui/dialog.tsx | 122 + client/src/components/ui/drawer.tsx | 118 + client/src/components/ui/dropdown-menu.tsx | 198 + client/src/components/ui/form.tsx | 178 + client/src/components/ui/hover-card.tsx | 29 + client/src/components/ui/input-otp.tsx | 69 + client/src/components/ui/input.tsx | 22 + client/src/components/ui/label.tsx | 24 + client/src/components/ui/menubar.tsx | 256 + client/src/components/ui/navigation-menu.tsx | 128 + client/src/components/ui/pagination.tsx | 117 + client/src/components/ui/popover.tsx | 29 + client/src/components/ui/progress.tsx | 28 + client/src/components/ui/radio-group.tsx | 42 + client/src/components/ui/resizable.tsx | 45 + client/src/components/ui/scroll-area.tsx | 46 + client/src/components/ui/select.tsx | 160 + client/src/components/ui/separator.tsx | 29 + client/src/components/ui/sheet.tsx | 140 + client/src/components/ui/sidebar.tsx | 771 ++ client/src/components/ui/skeleton.tsx | 15 + client/src/components/ui/slider.tsx | 26 + client/src/components/ui/switch.tsx | 27 + client/src/components/ui/table.tsx | 117 + client/src/components/ui/tabs.tsx | 53 + client/src/components/ui/textarea.tsx | 22 + client/src/components/ui/toast.tsx | 127 + client/src/components/ui/toaster.tsx | 33 + client/src/components/ui/toggle-group.tsx | 61 + client/src/components/ui/toggle.tsx | 43 + client/src/components/ui/tooltip.tsx | 30 + client/src/data/mediaData.ts | 65 + client/src/hooks/use-mobile.tsx | 19 + client/src/hooks/use-toast.ts | 191 + client/src/hooks/useAuth.ts | 15 + client/src/index.css | 183 + client/src/lib/authUtils.ts | 3 + client/src/lib/queryClient.ts | 57 + client/src/lib/utils.ts | 6 + client/src/main.tsx | 5 + client/src/pages/AdminDashboard.tsx | 218 + client/src/pages/Article.tsx | 163 + client/src/pages/Auctions.tsx | 412 + client/src/pages/Home.tsx | 162 + client/src/pages/Landing.tsx | 227 + client/src/pages/MediaOutlet.tsx | 176 + client/src/pages/SuperAdminDashboard.tsx | 331 + client/src/pages/not-found.tsx | 21 + components.json | 20 + drizzle.config.ts | 14 + package-lock.json | 8477 +++++++++++++++++ package.json | 110 + postcss.config.js | 6 + server/db.ts | 15 + server/index.ts | 71 + server/replitAuth.ts | 157 + server/routes.ts | 246 + server/storage.ts | 290 + server/vite.ts | 85 + shared/schema.ts | 201 + tailwind.config.ts | 106 + tsconfig.json | 23 + vite.config.ts | 40 + 89 files changed, 17584 insertions(+) create mode 100644 .gitignore create mode 100644 .replit create mode 100644 client/index.html create mode 100644 client/src/App.tsx create mode 100644 client/src/components/ArticleCard.tsx create mode 100644 client/src/components/AuctionCard.tsx create mode 100644 client/src/components/CategoryTabs.tsx create mode 100644 client/src/components/MediaOutletCard.tsx create mode 100644 client/src/components/PredictionMarketCard.tsx create mode 100644 client/src/components/ProfileModal.tsx create mode 100644 client/src/components/ui/accordion.tsx create mode 100644 client/src/components/ui/alert-dialog.tsx create mode 100644 client/src/components/ui/alert.tsx create mode 100644 client/src/components/ui/aspect-ratio.tsx create mode 100644 client/src/components/ui/avatar.tsx create mode 100644 client/src/components/ui/badge.tsx create mode 100644 client/src/components/ui/breadcrumb.tsx create mode 100644 client/src/components/ui/button.tsx create mode 100644 client/src/components/ui/calendar.tsx create mode 100644 client/src/components/ui/card.tsx create mode 100644 client/src/components/ui/carousel.tsx create mode 100644 client/src/components/ui/chart.tsx create mode 100644 client/src/components/ui/checkbox.tsx create mode 100644 client/src/components/ui/collapsible.tsx create mode 100644 client/src/components/ui/command.tsx create mode 100644 client/src/components/ui/context-menu.tsx create mode 100644 client/src/components/ui/dialog.tsx create mode 100644 client/src/components/ui/drawer.tsx create mode 100644 client/src/components/ui/dropdown-menu.tsx create mode 100644 client/src/components/ui/form.tsx create mode 100644 client/src/components/ui/hover-card.tsx create mode 100644 client/src/components/ui/input-otp.tsx create mode 100644 client/src/components/ui/input.tsx create mode 100644 client/src/components/ui/label.tsx create mode 100644 client/src/components/ui/menubar.tsx create mode 100644 client/src/components/ui/navigation-menu.tsx create mode 100644 client/src/components/ui/pagination.tsx create mode 100644 client/src/components/ui/popover.tsx create mode 100644 client/src/components/ui/progress.tsx create mode 100644 client/src/components/ui/radio-group.tsx create mode 100644 client/src/components/ui/resizable.tsx create mode 100644 client/src/components/ui/scroll-area.tsx create mode 100644 client/src/components/ui/select.tsx create mode 100644 client/src/components/ui/separator.tsx create mode 100644 client/src/components/ui/sheet.tsx create mode 100644 client/src/components/ui/sidebar.tsx create mode 100644 client/src/components/ui/skeleton.tsx create mode 100644 client/src/components/ui/slider.tsx create mode 100644 client/src/components/ui/switch.tsx create mode 100644 client/src/components/ui/table.tsx create mode 100644 client/src/components/ui/tabs.tsx create mode 100644 client/src/components/ui/textarea.tsx create mode 100644 client/src/components/ui/toast.tsx create mode 100644 client/src/components/ui/toaster.tsx create mode 100644 client/src/components/ui/toggle-group.tsx create mode 100644 client/src/components/ui/toggle.tsx create mode 100644 client/src/components/ui/tooltip.tsx create mode 100644 client/src/data/mediaData.ts create mode 100644 client/src/hooks/use-mobile.tsx create mode 100644 client/src/hooks/use-toast.ts create mode 100644 client/src/hooks/useAuth.ts create mode 100644 client/src/index.css create mode 100644 client/src/lib/authUtils.ts create mode 100644 client/src/lib/queryClient.ts create mode 100644 client/src/lib/utils.ts create mode 100644 client/src/main.tsx create mode 100644 client/src/pages/AdminDashboard.tsx create mode 100644 client/src/pages/Article.tsx create mode 100644 client/src/pages/Auctions.tsx create mode 100644 client/src/pages/Home.tsx create mode 100644 client/src/pages/Landing.tsx create mode 100644 client/src/pages/MediaOutlet.tsx create mode 100644 client/src/pages/SuperAdminDashboard.tsx create mode 100644 client/src/pages/not-found.tsx create mode 100644 components.json create mode 100644 drizzle.config.ts create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 postcss.config.js create mode 100644 server/db.ts create mode 100644 server/index.ts create mode 100644 server/replitAuth.ts create mode 100644 server/routes.ts create mode 100644 server/storage.ts create mode 100644 server/vite.ts create mode 100644 shared/schema.ts create mode 100644 tailwind.config.ts create mode 100644 tsconfig.json create mode 100644 vite.config.ts diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..f9ba7f8 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +node_modules +dist +.DS_Store +server/public +vite.config.ts.* +*.tar.gz \ No newline at end of file diff --git a/.replit b/.replit new file mode 100644 index 0000000..335d9dc --- /dev/null +++ b/.replit @@ -0,0 +1,46 @@ +modules = ["nodejs-20", "web", "postgresql-16"] +run = "npm run dev" +hidden = [".config", ".git", "generated-icon.png", "node_modules", "dist"] + +[nix] +channel = "stable-24_05" + +[deployment] +deploymentTarget = "autoscale" +build = ["npm", "run", "build"] +run = ["npm", "run", "start"] + +[[ports]] +localPort = 5000 +externalPort = 80 + +[[ports]] +localPort = 36839 +externalPort = 3000 + +[env] +PORT = "5000" + +[agent] +integrations = ["javascript_object_storage:1.0.0", "javascript_log_in_with_replit:1.0.0", "javascript_database:1.0.0"] + +[workflows] +runButton = "Project" + +[[workflows.workflow]] +name = "Project" +mode = "parallel" +author = "agent" + +[[workflows.workflow.tasks]] +task = "workflow.run" +args = "Start application" + +[[workflows.workflow]] +name = "Start application" +author = "agent" + +[[workflows.workflow.tasks]] +task = "shell.exec" +args = "npm run dev" +waitForPort = 5000 diff --git a/client/index.html b/client/index.html new file mode 100644 index 0000000..f15fa88 --- /dev/null +++ b/client/index.html @@ -0,0 +1,14 @@ + + + + + + + + + + +
+ + + \ No newline at end of file diff --git a/client/src/App.tsx b/client/src/App.tsx new file mode 100644 index 0000000..d3745a4 --- /dev/null +++ b/client/src/App.tsx @@ -0,0 +1,53 @@ +import { Switch, Route } from "wouter"; +import { queryClient } from "./lib/queryClient"; +import { QueryClientProvider } from "@tanstack/react-query"; +import { Toaster } from "@/components/ui/toaster"; +import { TooltipProvider } from "@/components/ui/tooltip"; +import { useAuth } from "@/hooks/useAuth"; +import Landing from "@/pages/Landing"; +import Home from "@/pages/Home"; +import MediaOutlet from "@/pages/MediaOutlet"; +import Article from "@/pages/Article"; +import AdminDashboard from "@/pages/AdminDashboard"; +import SuperAdminDashboard from "@/pages/SuperAdminDashboard"; +import Auctions from "@/pages/Auctions"; +import NotFound from "@/pages/not-found"; + +function Router() { + const { isAuthenticated, isLoading, user } = useAuth(); + + return ( + + {isLoading || !isAuthenticated ? ( + + ) : ( + <> + + + + + {user?.role === 'admin' && ( + + )} + {user?.role === 'superadmin' && ( + + )} + + )} + + + ); +} + +function App() { + return ( + + + + + + + ); +} + +export default App; diff --git a/client/src/components/ArticleCard.tsx b/client/src/components/ArticleCard.tsx new file mode 100644 index 0000000..19addc9 --- /dev/null +++ b/client/src/components/ArticleCard.tsx @@ -0,0 +1,122 @@ +import { Card, CardContent } from "@/components/ui/card"; +import { Badge } from "@/components/ui/badge"; +import type { Article, MediaOutlet } from "@shared/schema"; + +interface ArticleCardProps { + article: Article; + outlet: MediaOutlet; + viewMode?: "grid" | "list"; +} + +export default function ArticleCard({ article, outlet, viewMode = "grid" }: ArticleCardProps) { + const handleClick = () => { + window.location.href = `/articles/${article.slug}`; + }; + + const formatDate = (date: string | Date) => { + const d = new Date(date); + const now = new Date(); + const diffTime = Math.abs(now.getTime() - d.getTime()); + const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + + if (diffDays === 1) return "1 day ago"; + if (diffDays < 7) return `${diffDays} days ago`; + return d.toLocaleDateString(); + }; + + if (viewMode === "list") { + return ( + + +
+ {article.imageUrl && ( + {article.title} + )} +
+
+ {article.isPinned && ( + + + Pinned + + )} + {article.isFeatured && ( + + Featured + + )} +
+

{article.title}

+

{article.excerpt}

+
+
+ {formatDate(article.publishedAt!)} + {article.tags?.map((tag) => ( + + {tag} + + ))} +
+
+
+
+ + + ); + } + + return ( + + + {article.imageUrl && ( + {article.title} + )} +
+
+ {article.isPinned && ( + + + Pinned + + )} + {article.isFeatured && ( + + Featured + + )} +
+

{article.title}

+

{article.excerpt}

+
+ + {formatDate(article.publishedAt!)} + +
+ {article.tags?.slice(0, 2).map((tag) => ( + + {tag} + + ))} +
+
+
+ + + ); +} diff --git a/client/src/components/AuctionCard.tsx b/client/src/components/AuctionCard.tsx new file mode 100644 index 0000000..9f7a8d3 --- /dev/null +++ b/client/src/components/AuctionCard.tsx @@ -0,0 +1,84 @@ +import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import type { Auction } from "@shared/schema"; + +interface AuctionCardProps { + auction: Auction; +} + +export default function AuctionCard({ auction }: AuctionCardProps) { + const formatPrice = (price: string) => { + const num = parseFloat(price); + return `$${num.toLocaleString()}`; + }; + + const getTimeRemaining = (endDate: string | Date) => { + const end = new Date(endDate); + const now = new Date(); + const diff = end.getTime() - now.getTime(); + + if (diff <= 0) return "Ended"; + + const days = Math.floor(diff / (1000 * 60 * 60 * 24)); + const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); + const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); + + if (days > 0) return `${days}d ${hours}h`; + if (hours > 0) return `${hours}h ${minutes}m`; + return `${minutes}m`; + }; + + const getStatusBadge = () => { + const timeRemaining = getTimeRemaining(auction.endDate); + if (timeRemaining === "Ended") return { text: "Ended", variant: "secondary" as const }; + + const end = new Date(auction.endDate); + const now = new Date(); + const hoursLeft = (end.getTime() - now.getTime()) / (1000 * 60 * 60); + + if (hoursLeft <= 3) return { text: "Ending Soon", variant: "destructive" as const }; + return { text: "Active", variant: "default" as const }; + }; + + const status = getStatusBadge(); + + return ( + + +
+
+

{auction.title}

+

{auction.description}

+
+ {status.text} +
+ +
+
+ Current Bid: + {formatPrice(auction.currentBid || "0")} +
+
+ Quality Score: + {auction.qualityScore || 0}/100 +
+
+ Time Remaining: + + {getTimeRemaining(auction.endDate)} + +
+
+ + + + + ); +} diff --git a/client/src/components/CategoryTabs.tsx b/client/src/components/CategoryTabs.tsx new file mode 100644 index 0000000..ab8afe9 --- /dev/null +++ b/client/src/components/CategoryTabs.tsx @@ -0,0 +1,40 @@ +import { Button } from "@/components/ui/button"; + +interface CategoryTabsProps { + selectedCategory: string; + onCategoryChange: (category: string) => void; +} + +const categories = [ + { id: "people", label: "People", icon: "fas fa-users", count: 24 }, + { id: "topics", label: "Topics", icon: "fas fa-hashtag", count: 20 }, + { id: "companies", label: "Companies", icon: "fas fa-building", count: 27 }, +]; + +export default function CategoryTabs({ selectedCategory, onCategoryChange }: CategoryTabsProps) { + return ( +
+
+ +
+
+ ); +} diff --git a/client/src/components/MediaOutletCard.tsx b/client/src/components/MediaOutletCard.tsx new file mode 100644 index 0000000..ba122c9 --- /dev/null +++ b/client/src/components/MediaOutletCard.tsx @@ -0,0 +1,118 @@ +import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import { useState } from "react"; +import ProfileModal from "./ProfileModal"; +import type { MediaOutlet } from "@shared/schema"; + +interface MediaOutletCardProps { + outlet: MediaOutlet; +} + +export default function MediaOutletCard({ outlet }: MediaOutletCardProps) { + const [showProfile, setShowProfile] = useState(false); + + const handleCardClick = () => { + window.location.href = `/media/${outlet.slug}`; + }; + + const handleInfoClick = (e: React.MouseEvent) => { + e.stopPropagation(); + setShowProfile(true); + }; + + const getOutletImage = () => { + if (outlet.imageUrl) return outlet.imageUrl; + + // Default images based on category + if (outlet.category === "people") { + return "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&w=64&h=64&fit=crop&crop=face"; + } else if (outlet.category === "companies") { + return null; // Use initial letter + } + return null; + }; + + const getOutletIcon = () => { + if (outlet.category === "topics") { + return outlet.name.toLowerCase().includes("crypto") ? "fas fa-coins" : + outlet.name.toLowerCase().includes("ai") ? "fas fa-brain" : + outlet.name.toLowerCase().includes("federal") ? "fas fa-university" : + "fas fa-hashtag"; + } + return "fas fa-building"; + }; + + const getTagColor = () => { + const tag = outlet.tags?.[0] || outlet.category; + const colors = { + "Tech Leader": "bg-primary/10 text-primary", + "CEO": "bg-accent/80 text-accent-foreground", + "Crypto": "bg-chart-1/20 text-chart-1", + "Politics": "bg-destructive/20 text-destructive", + "AI": "bg-chart-3/20 text-chart-3", + "Finance": "bg-chart-2/20 text-chart-2", + "Blockchain": "bg-chart-4/20 text-chart-4", + "Economy": "bg-chart-5/20 text-chart-5" + }; + return colors[tag as keyof typeof colors] || "bg-muted text-muted-foreground"; + }; + + return ( + <> + + +
+ {getOutletImage() ? ( + {outlet.name} + ) : ( +
+ {outlet.category === 'companies' ? ( + + {outlet.name.charAt(0)} + + ) : ( + + )} +
+ )} + +
+

{outlet.name}

+

+ {outlet.description} +

+
+ + {outlet.tags?.[0] || outlet.category} + + +
+
+
+ + + + setShowProfile(false)} + /> + + ); +} diff --git a/client/src/components/PredictionMarketCard.tsx b/client/src/components/PredictionMarketCard.tsx new file mode 100644 index 0000000..695d2de --- /dev/null +++ b/client/src/components/PredictionMarketCard.tsx @@ -0,0 +1,63 @@ +import { Card, CardContent } from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import type { PredictionMarket } from "@shared/schema"; + +interface PredictionMarketCardProps { + market: PredictionMarket; +} + +export default function PredictionMarketCard({ market }: PredictionMarketCardProps) { + const formatVolume = (volume: string) => { + const num = parseFloat(volume); + if (num >= 1000000) return `$${(num / 1000000).toFixed(1)}M`; + if (num >= 1000) return `$${(num / 1000).toFixed(0)}K`; + return `$${num}`; + }; + + const formatDate = (date: string | Date) => { + return new Date(date).toLocaleDateString(); + }; + + const yesPrice = parseFloat(market.yesPrice || "0"); + const noPrice = parseFloat(market.noPrice || "0"); + + return ( + + +
+

{market.title}

+ + {yesPrice}% Yes + +
+
+ Volume: {formatVolume(market.volume || "0")} + Ends: {formatDate(market.endDate!)} +
+
+ + + +
+ + + ); +} diff --git a/client/src/components/ProfileModal.tsx b/client/src/components/ProfileModal.tsx new file mode 100644 index 0000000..733c4d1 --- /dev/null +++ b/client/src/components/ProfileModal.tsx @@ -0,0 +1,142 @@ +import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"; +import { Button } from "@/components/ui/button"; +import type { MediaOutlet } from "@shared/schema"; + +interface ProfileModalProps { + outlet: MediaOutlet; + isOpen: boolean; + onClose: () => void; +} + +export default function ProfileModal({ outlet, isOpen, onClose }: ProfileModalProps) { + const getProfileContent = () => { + // Sample profile content - in a real app this would come from the database + const profiles: Record = { + "alex-karp": { + summary: [ + "Co-founder and CEO of Palantir Technologies, a leading data analytics company", + "Known for his outspoken views on artificial intelligence and data privacy", + "Advocate for Western democratic values in technology and business practices" + ], + background: "Alexander Karp is an American billionaire businessman who co-founded Palantir Technologies in 2003. He earned a PhD in philosophy from Stanford University and a JD from Stanford Law School. Before Palantir, he worked as an investor and consultant.", + highlights: [ + "Co-founded Palantir Technologies (2003)", + "Led company through IPO in 2020", + "Built partnerships with government agencies and enterprises", + "Advocate for responsible AI development" + ], + achievements: [ + "Built Palantir into a multi-billion dollar company", + "Recognized leader in big data and AI ethics", + "Frequent speaker on technology and society" + ] + } + }; + + return profiles[outlet.slug] || { + summary: [ + `Leading figure in the ${outlet.category} category`, + `Influential voice in their respective field`, + `Key contributor to industry developments` + ], + background: `${outlet.name} is a prominent entity in the ${outlet.category} space. ${outlet.description}`, + highlights: [ + "Industry leadership", + "Innovative contributions", + "Market influence", + "Thought leadership" + ], + achievements: [ + "Recognized expertise in their field", + "Significant market impact", + "Influential industry voice" + ] + }; + }; + + const profile = getProfileContent(); + + const getProfileImage = () => { + if (outlet.imageUrl) return outlet.imageUrl; + + // Default professional images + if (outlet.category === "people") { + return "https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&w=120&h=120&fit=crop&crop=face"; + } + return null; + }; + + return ( + + + + Profile Information + + +
+
+ {getProfileImage() ? ( + {`${outlet.name} window.open(getProfileImage()!, '_blank')} + data-testid="img-profile-large" + /> + ) : ( +
+ + {outlet.name.charAt(0)} + +
+ )} +

{outlet.name}

+

{outlet.description}

+
+ +
+

3-Line Summary

+
    + {profile.summary.map((line: string, index: number) => ( +
  • • {line}
    • + ))} +
+
+ +
+
+

Background

+

+ {profile.background} +

+
+ +
+

Key Highlights

+
    + {profile.highlights.map((highlight: string, index: number) => ( +
  • • {highlight}
    • + ))} +
+
+ +
+

Achievements

+
    + {profile.achievements.map((achievement: string, index: number) => ( +
  • • {achievement}
    • + ))} +
+
+
+ +
+ +
+
+ + + ); +} diff --git a/client/src/components/ui/accordion.tsx b/client/src/components/ui/accordion.tsx new file mode 100644 index 0000000..e6a723d --- /dev/null +++ b/client/src/components/ui/accordion.tsx @@ -0,0 +1,56 @@ +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/client/src/components/ui/alert-dialog.tsx b/client/src/components/ui/alert-dialog.tsx new file mode 100644 index 0000000..8722561 --- /dev/null +++ b/client/src/components/ui/alert-dialog.tsx @@ -0,0 +1,139 @@ +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/client/src/components/ui/alert.tsx b/client/src/components/ui/alert.tsx new file mode 100644 index 0000000..41fa7e0 --- /dev/null +++ b/client/src/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/client/src/components/ui/aspect-ratio.tsx b/client/src/components/ui/aspect-ratio.tsx new file mode 100644 index 0000000..c4abbf3 --- /dev/null +++ b/client/src/components/ui/aspect-ratio.tsx @@ -0,0 +1,5 @@ +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/client/src/components/ui/avatar.tsx b/client/src/components/ui/avatar.tsx new file mode 100644 index 0000000..51e507b --- /dev/null +++ b/client/src/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/client/src/components/ui/badge.tsx b/client/src/components/ui/badge.tsx new file mode 100644 index 0000000..f000e3e --- /dev/null +++ b/client/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/client/src/components/ui/breadcrumb.tsx b/client/src/components/ui/breadcrumb.tsx new file mode 100644 index 0000000..60e6c96 --- /dev/null +++ b/client/src/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) =>