Initial import of 1407 block sources under blocks/
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ar.badiei
@@ -0,0 +1,733 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ChevronRight,
|
||||
File,
|
||||
Folder,
|
||||
GitBranch,
|
||||
History,
|
||||
MessageSquare,
|
||||
PanelRight,
|
||||
Play,
|
||||
Plus,
|
||||
Search,
|
||||
Settings,
|
||||
User,
|
||||
} from "lucide-react";
|
||||
import * as React from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Collapsible,
|
||||
CollapsibleContent,
|
||||
CollapsibleTrigger,
|
||||
} from "@/components/ui/collapsible";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
} from "@/components/ui/drawer";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
SidebarFooter,
|
||||
SidebarGroup,
|
||||
SidebarGroupContent,
|
||||
SidebarGroupLabel,
|
||||
SidebarHeader,
|
||||
SidebarInset,
|
||||
SidebarMenu,
|
||||
SidebarMenuBadge,
|
||||
SidebarMenuButton,
|
||||
SidebarMenuItem,
|
||||
SidebarMenuSub,
|
||||
SidebarProvider,
|
||||
} from "@/components/ui/sidebar";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type SidebarModule = {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
||||
};
|
||||
|
||||
const sidebarModules: SidebarModule[] = [
|
||||
{ id: "search", label: "جستجو", icon: Search },
|
||||
{ id: "explorer", label: "مرورگر", icon: File },
|
||||
{ id: "git", label: "کنترل منبع", icon: GitBranch },
|
||||
];
|
||||
|
||||
const changesData = [
|
||||
{ file: "README.md", state: "M" },
|
||||
{ file: "api/hello/route.ts", state: "U" },
|
||||
{ file: "app/layout.tsx", state: "M" },
|
||||
];
|
||||
|
||||
type TreeItem = string | TreeItem[];
|
||||
|
||||
const fileTreeData: TreeItem[] = [
|
||||
[
|
||||
"app",
|
||||
[
|
||||
"api",
|
||||
["hello", ["route.ts"]],
|
||||
"page.tsx",
|
||||
"layout.tsx",
|
||||
["blog", ["page.tsx"]],
|
||||
],
|
||||
],
|
||||
["components", ["ui", "button.tsx", "card.tsx"], "header.tsx", "footer.tsx"],
|
||||
["lib", ["util.ts"]],
|
||||
["public", "favicon.ico", "vercel.svg"],
|
||||
".eslintrc.json",
|
||||
".gitignore",
|
||||
"next.config.js",
|
||||
"tailwind.config.js",
|
||||
"package.json",
|
||||
"README.md",
|
||||
];
|
||||
|
||||
function Logo({ className }: { className?: string }) {
|
||||
return (
|
||||
<img
|
||||
src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
|
||||
alt="شادسیان بلاکس"
|
||||
className={cn("size-5 dark:invert", className)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function Tree({ item }: { item: TreeItem }) {
|
||||
const [name, ...items] = Array.isArray(item) ? item : [item];
|
||||
|
||||
if (!items.length) {
|
||||
return (
|
||||
<SidebarMenuButton className="data-[active=true]:bg-transparent">
|
||||
<File className="size-4" />
|
||||
{name}
|
||||
</SidebarMenuButton>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<SidebarMenuItem>
|
||||
<Collapsible
|
||||
className="group/collapsible [&[data-state=open]>button>svg:first-child]:rotate-90"
|
||||
defaultOpen={name === "app" || name === "components"}
|
||||
>
|
||||
<CollapsibleTrigger asChild>
|
||||
<SidebarMenuButton>
|
||||
<ChevronRight className="size-4 transition-transform rtl:rotate-180" />
|
||||
<Folder className="size-4" />
|
||||
{name}
|
||||
</SidebarMenuButton>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>
|
||||
<SidebarMenuSub>
|
||||
{items.map((subItem, index) => (
|
||||
<Tree key={index} item={subItem} />
|
||||
))}
|
||||
</SidebarMenuSub>
|
||||
</CollapsibleContent>
|
||||
</Collapsible>
|
||||
</SidebarMenuItem>
|
||||
);
|
||||
}
|
||||
|
||||
interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
|
||||
activeModule: string;
|
||||
onModuleChange: (moduleId: string) => void;
|
||||
}
|
||||
|
||||
export function AppSidebar({
|
||||
activeModule,
|
||||
onModuleChange,
|
||||
...props
|
||||
}: AppSidebarProps) {
|
||||
return (
|
||||
<Sidebar side="right" collapsible="icon" {...props}>
|
||||
<SidebarHeader>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton size="lg" asChild className="md:h-8 md:p-0">
|
||||
<a href="#">
|
||||
<div className="flex aspect-square size-8 items-center justify-center rounded-sm bg-primary">
|
||||
<img
|
||||
src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
|
||||
alt="شادسیان بلاکس"
|
||||
className="size-5 invert dark:invert-0"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid flex-1 text-start text-sm leading-tight">
|
||||
<span className="truncate font-medium">ری یو آی</span>
|
||||
<span className="truncate text-xs">پروژه من</span>
|
||||
</div>
|
||||
</a>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarHeader>
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupContent className="px-1.5 md:px-0">
|
||||
<SidebarMenu>
|
||||
{sidebarModules.map((module) => (
|
||||
<SidebarMenuItem key={module.id}>
|
||||
<SidebarMenuButton
|
||||
tooltip={{
|
||||
children: module.label,
|
||||
hidden: false,
|
||||
}}
|
||||
onClick={() => onModuleChange(module.id)}
|
||||
isActive={activeModule === module.id}
|
||||
className="px-2.5 md:px-2"
|
||||
>
|
||||
<module.icon />
|
||||
<span>{module.label}</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
<SidebarFooter>
|
||||
<SidebarMenu>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
tooltip={{
|
||||
children: "تنظیمات",
|
||||
hidden: false,
|
||||
}}
|
||||
className="px-2.5 md:px-2"
|
||||
aria-label="تنظیمات"
|
||||
>
|
||||
<Settings />
|
||||
<span>تنظیمات</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
<SidebarMenuItem>
|
||||
<SidebarMenuButton
|
||||
tooltip={{
|
||||
children: "پروفایل",
|
||||
hidden: false,
|
||||
}}
|
||||
className="px-2.5 md:px-2"
|
||||
aria-label="پروفایل"
|
||||
>
|
||||
<User />
|
||||
<span>پروفایل</span>
|
||||
</SidebarMenuButton>
|
||||
</SidebarMenuItem>
|
||||
</SidebarMenu>
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
function ExplorerSidebar() {
|
||||
return (
|
||||
<Sidebar
|
||||
collapsible="none"
|
||||
className="w-full shrink-0 border-e md:flex md:w-[280px]"
|
||||
>
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>تغییرات</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{changesData.map((item, index) => (
|
||||
<SidebarMenuItem key={index}>
|
||||
<SidebarMenuButton>
|
||||
<File className="size-4" />
|
||||
<span className="truncate">{item.file}</span>
|
||||
</SidebarMenuButton>
|
||||
<SidebarMenuBadge
|
||||
className={cn(
|
||||
"text-[10px] font-medium",
|
||||
item.state === "M" && "text-yellow-500",
|
||||
item.state === "U" && "text-green-500",
|
||||
item.state === "D" && "text-red-500",
|
||||
)}
|
||||
>
|
||||
{item.state}
|
||||
</SidebarMenuBadge>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>فایلها</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{fileTreeData.map((item, index) => (
|
||||
<Tree key={index} item={item} />
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
function SearchSidebar() {
|
||||
return (
|
||||
<Sidebar
|
||||
collapsible="none"
|
||||
className="w-full shrink-0 border-e md:flex md:w-[280px]"
|
||||
>
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>جستجو</SidebarGroupLabel>
|
||||
<SidebarGroupContent className="px-2">
|
||||
<div className="flex items-center rounded-md border bg-background px-3 py-2">
|
||||
<Search className="me-2 size-4 shrink-0 text-muted-foreground" />
|
||||
<input
|
||||
type="search"
|
||||
placeholder="جستجوی فایلها..."
|
||||
aria-label="جستجوی فایلها"
|
||||
className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
function GitSidebar() {
|
||||
return (
|
||||
<Sidebar
|
||||
collapsible="none"
|
||||
className="w-full shrink-0 border-e md:flex md:w-[280px]"
|
||||
>
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>تغییرات</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{changesData.map((item, index) => (
|
||||
<SidebarMenuItem key={index}>
|
||||
<SidebarMenuButton>
|
||||
<File className="size-4" />
|
||||
<span className="truncate">{item.file}</span>
|
||||
</SidebarMenuButton>
|
||||
<SidebarMenuBadge
|
||||
className={cn(
|
||||
"text-[10px] font-medium",
|
||||
item.state === "M" && "text-yellow-500",
|
||||
item.state === "U" && "text-green-500",
|
||||
item.state === "D" && "text-red-500",
|
||||
)}
|
||||
>
|
||||
{item.state}
|
||||
</SidebarMenuBadge>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
type MobileDrawer = "search" | "explorer" | "git" | "chat" | null;
|
||||
|
||||
export function ApplicationShell9() {
|
||||
const [activeModule, setActiveModule] = React.useState("explorer");
|
||||
const [isChatOpen, setIsChatOpen] = React.useState(false);
|
||||
const [mobileDrawer, setMobileDrawer] = React.useState<MobileDrawer>(null);
|
||||
|
||||
const handleModuleChange = (moduleId: string) => {
|
||||
setActiveModule(moduleId);
|
||||
};
|
||||
|
||||
const renderSidebar = () => {
|
||||
switch (activeModule) {
|
||||
case "search":
|
||||
return <SearchSidebar />;
|
||||
case "explorer":
|
||||
return <ExplorerSidebar />;
|
||||
case "کنترل نسخه":
|
||||
return <GitSidebar />;
|
||||
default:
|
||||
return <ExplorerSidebar />;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SidebarProvider
|
||||
dir="rtl"
|
||||
lang="fa"
|
||||
className="h-svh overflow-hidden"
|
||||
style={
|
||||
{
|
||||
"--sidebar-width": "var(--sidebar-width-icon)",
|
||||
} as React.CSSProperties
|
||||
}
|
||||
>
|
||||
<AppSidebar
|
||||
activeModule={activeModule}
|
||||
onModuleChange={handleModuleChange}
|
||||
className="hidden md:flex"
|
||||
/>
|
||||
|
||||
<div className="flex h-full w-full flex-col md:hidden">
|
||||
<header className="flex h-12 shrink-0 items-center justify-between border-b bg-background px-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex aspect-square size-7 items-center justify-center rounded-sm bg-primary">
|
||||
<img
|
||||
src="/block-media/shadcnblocks/block/logos/ShadcnBlocks-logo.svg"
|
||||
alt="شادسیان بلاکس"
|
||||
className="size-4 invert dark:invert-0"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-sm font-medium">پروژه من</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-8"
|
||||
aria-label="افزودن"
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="size-8"
|
||||
aria-label="تنظیمات"
|
||||
>
|
||||
<Settings className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex flex-1 items-center justify-center bg-muted/30">
|
||||
<Logo className="size-16 opacity-30" />
|
||||
</div>
|
||||
|
||||
<div className="flex h-14 shrink-0 items-center justify-around border-t bg-background">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileDrawer("search")}
|
||||
className={cn(
|
||||
"flex items-center justify-center rounded-md p-2",
|
||||
mobileDrawer === "search"
|
||||
? "text-foreground"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
aria-label="جستجو"
|
||||
>
|
||||
<Search className="size-5" />
|
||||
<span className="sr-only">جستجو</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileDrawer("explorer")}
|
||||
className={cn(
|
||||
"flex items-center justify-center rounded-md p-2",
|
||||
mobileDrawer === "explorer"
|
||||
? "text-foreground"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
aria-label="مرورگر"
|
||||
>
|
||||
<File className="size-5" />
|
||||
<span className="sr-only">مرورگر</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileDrawer("git")}
|
||||
className={cn(
|
||||
"flex items-center justify-center rounded-md p-2",
|
||||
mobileDrawer === "git"
|
||||
? "text-foreground"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
aria-label="کنترل منبع"
|
||||
>
|
||||
<GitBranch className="size-5" />
|
||||
<span className="sr-only">کنترل منبع</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMobileDrawer("chat")}
|
||||
className={cn(
|
||||
"flex items-center justify-center rounded-md p-2",
|
||||
mobileDrawer === "chat"
|
||||
? "text-foreground"
|
||||
: "text-muted-foreground",
|
||||
)}
|
||||
aria-label="گفتگو"
|
||||
>
|
||||
<MessageSquare className="size-5" />
|
||||
<span className="sr-only">گفتگو</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Drawer
|
||||
open={mobileDrawer === "search"}
|
||||
onOpenChange={(open) => setMobileDrawer(open ? "search" : null)}
|
||||
>
|
||||
<DrawerContent dir="rtl" className="text-start">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle className="text-start">جستجو</DrawerTitle>
|
||||
</DrawerHeader>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center rounded-md border bg-background px-3 py-2">
|
||||
<Search className="me-2 size-4 shrink-0 text-muted-foreground" />
|
||||
<input
|
||||
type="search"
|
||||
placeholder="جستجوی فایلها..."
|
||||
aria-label="جستجوی فایلها"
|
||||
className="flex-1 bg-transparent text-sm outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
|
||||
<Drawer
|
||||
open={mobileDrawer === "explorer"}
|
||||
onOpenChange={(open) => setMobileDrawer(open ? "explorer" : null)}
|
||||
>
|
||||
<DrawerContent dir="rtl" className="max-h-[85vh] text-start">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle className="text-start">فایلها</DrawerTitle>
|
||||
</DrawerHeader>
|
||||
<ScrollArea className="h-[60vh] [&>[data-slot=scroll-area-viewport]>div]:!block">
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>تغییرات</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{changesData.map((item, index) => (
|
||||
<SidebarMenuItem key={index}>
|
||||
<SidebarMenuButton>
|
||||
<File className="size-4" />
|
||||
<span className="truncate">{item.file}</span>
|
||||
</SidebarMenuButton>
|
||||
<SidebarMenuBadge
|
||||
className={cn(
|
||||
"text-[10px] font-medium",
|
||||
item.state === "M" && "text-yellow-500",
|
||||
item.state === "U" && "text-green-500",
|
||||
item.state === "D" && "text-red-500",
|
||||
)}
|
||||
>
|
||||
{item.state}
|
||||
</SidebarMenuBadge>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>فایلها</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{fileTreeData.map((item, index) => (
|
||||
<Tree key={index} item={item} />
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
</ScrollArea>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
|
||||
<Drawer
|
||||
open={mobileDrawer === "git"}
|
||||
onOpenChange={(open) => setMobileDrawer(open ? "git" : null)}
|
||||
>
|
||||
<DrawerContent dir="rtl" className="max-h-[85vh] text-start">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle className="text-start">کنترل منبع</DrawerTitle>
|
||||
</DrawerHeader>
|
||||
<ScrollArea className="h-[60vh] [&>[data-slot=scroll-area-viewport]>div]:!block">
|
||||
<SidebarContent>
|
||||
<SidebarGroup>
|
||||
<SidebarGroupLabel>تغییرات</SidebarGroupLabel>
|
||||
<SidebarGroupContent>
|
||||
<SidebarMenu>
|
||||
{changesData.map((item, index) => (
|
||||
<SidebarMenuItem key={index}>
|
||||
<SidebarMenuButton>
|
||||
<File className="size-4" />
|
||||
<span className="truncate">{item.file}</span>
|
||||
</SidebarMenuButton>
|
||||
<SidebarMenuBadge
|
||||
className={cn(
|
||||
"text-[10px] font-medium",
|
||||
item.state === "M" && "text-yellow-500",
|
||||
item.state === "U" && "text-green-500",
|
||||
item.state === "D" && "text-red-500",
|
||||
)}
|
||||
>
|
||||
{item.state}
|
||||
</SidebarMenuBadge>
|
||||
</SidebarMenuItem>
|
||||
))}
|
||||
</SidebarMenu>
|
||||
</SidebarGroupContent>
|
||||
</SidebarGroup>
|
||||
</SidebarContent>
|
||||
</ScrollArea>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
|
||||
<Drawer
|
||||
open={mobileDrawer === "chat"}
|
||||
onOpenChange={(open) => setMobileDrawer(open ? "chat" : null)}
|
||||
>
|
||||
<DrawerContent dir="rtl" className="max-h-[85vh] text-start">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle className="text-start">گفتگو</DrawerTitle>
|
||||
</DrawerHeader>
|
||||
<div className="flex h-[60vh] flex-col">
|
||||
<ScrollArea className="flex-1 p-4">
|
||||
<div className="flex justify-end">
|
||||
<div className="max-w-[85%] rounded-2xl rounded-ee-sm bg-primary px-4 py-3 text-sm text-primary-foreground">
|
||||
یک لندینگ برای ری یو آی با بخش قهرمان، شبکه
|
||||
ویژگیها و جدول قیمتگذاری بساز
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
<div className="border-t p-3">
|
||||
<div className="rounded-lg border bg-background">
|
||||
<textarea
|
||||
placeholder="توضیح دهید چه چیزی میخواهید بسازید..."
|
||||
rows={3}
|
||||
className="w-full resize-none bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
<div className="flex items-center justify-between border-t px-3 py-2">
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>اینتر برای ارسال</span>
|
||||
</div>
|
||||
<Button size="sm" className="h-7 gap-1.5 px-3">
|
||||
<span>ارسال</span>
|
||||
<ChevronRight className="size-3 rtl:rotate-180" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
</div>
|
||||
|
||||
<div className="hidden min-w-0 flex-1 flex-col overflow-hidden md:flex">
|
||||
<header className="flex h-12 shrink-0 items-center justify-between border-b bg-background px-4">
|
||||
<nav className="flex items-center gap-1 text-sm">
|
||||
<span className="font-medium">ری یو آی</span>
|
||||
<ChevronRight className="size-4 text-muted-foreground rtl:rotate-180" />
|
||||
<span className="text-muted-foreground">پروژه من</span>
|
||||
</nav>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="ghost" size="sm" className="h-8 gap-1.5">
|
||||
<Play className="size-4" />
|
||||
<span>پیشنمایش</span>
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="size-8">
|
||||
<Plus className="size-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="size-8">
|
||||
<History className="size-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className={cn("size-8", isChatOpen && "bg-muted")}
|
||||
onClick={() => setIsChatOpen(!isChatOpen)}
|
||||
>
|
||||
<PanelRight className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex min-h-0 flex-1 overflow-hidden">
|
||||
{renderSidebar()}
|
||||
|
||||
<SidebarInset className="min-h-0 flex-col overflow-hidden">
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-1 items-center justify-center bg-muted/30",
|
||||
)}
|
||||
>
|
||||
{!isChatOpen ? (
|
||||
<div className="flex flex-col items-center gap-4 text-center">
|
||||
<Logo className="size-16 opacity-30" />
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-lg font-medium">شروع ساخت</h3>
|
||||
<p className="max-w-sm text-sm text-muted-foreground">
|
||||
توضیح دهید چه چیزی میخواهید بسازید تا هوش مصنوعی
|
||||
کمک کند
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setIsChatOpen(true)}
|
||||
className="gap-2"
|
||||
>
|
||||
<MessageSquare className="size-4" />
|
||||
باز کردن گفتگو
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Logo className="size-16 opacity-30" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isChatOpen && (
|
||||
<div className="flex w-[400px] shrink-0 flex-col border-s">
|
||||
<div className="flex h-10 items-center justify-between border-b px-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageSquare className="size-4" />
|
||||
<span className="text-sm font-medium">گفتگو</span>
|
||||
</div>
|
||||
</div>
|
||||
<ScrollArea className="flex-1 p-4">
|
||||
<div className="flex justify-end">
|
||||
<div className="max-w-[85%] rounded-2xl rounded-ee-sm bg-primary px-4 py-3 text-sm text-primary-foreground">
|
||||
یک لندینگ برای ری یو آی با بخش قهرمان، شبکه
|
||||
ویژگیها و جدول قیمتگذاری بساز
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
<div className="border-t p-3">
|
||||
<div className="rounded-lg border bg-background">
|
||||
<textarea
|
||||
placeholder="توضیح دهید چه چیزی میخواهید بسازید..."
|
||||
rows={3}
|
||||
className="w-full resize-none bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
<div className="flex items-center justify-between border-t px-3 py-2">
|
||||
<div className="flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>اینتر برای ارسال</span>
|
||||
</div>
|
||||
<Button size="sm" className="h-7 gap-1.5 px-3">
|
||||
<span>ارسال</span>
|
||||
<ChevronRight className="size-3 rtl:rotate-180" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</SidebarInset>
|
||||
</div>
|
||||
</div>
|
||||
</SidebarProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user