151 lines
No EOL
7.2 KiB
JavaScript
151 lines
No EOL
7.2 KiB
JavaScript
import { Button } from './ui/button'
|
|
import { Card, CardHeader, CardTitle } from './ui/card'
|
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible'
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
|
|
import { useContext, useState } from 'react'
|
|
import { PencilRuler, Shapes, Store, Upload, ChevronDown, ChevronUp, X } from 'lucide-react';
|
|
import OpenContext from './Context/openContext/OpenContext';
|
|
import AllIconsPage from './EachComponent/Icons/AllIcons'
|
|
import { Separator } from './ui/separator'
|
|
import { ScrollArea } from './ui/scroll-area'
|
|
import AddShapes from './Layouts/AddShapes'
|
|
import UploadImage from './EachComponent/UploadImage'
|
|
import CustomizeShape from './EachComponent/CustomizeShape'
|
|
import RndComponent from './Layouts/RndComponent'
|
|
|
|
const ObjectPanel = () => {
|
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
|
const { tabValue, setTabValue, setOpenObjectPanel } = useContext(OpenContext);
|
|
|
|
const rndValue = {
|
|
valueX: 0,
|
|
valueY: 20,
|
|
width: 250,
|
|
height: 0,
|
|
minWidth: 280,
|
|
maxWidth: 300,
|
|
minHeight: 0,
|
|
maxHeight: 500,
|
|
bound: "parent"
|
|
}
|
|
|
|
return (
|
|
<RndComponent value={rndValue}>
|
|
<Card className="w-full shadow-lg px-1">
|
|
<CardHeader className="p-1 mr-12">
|
|
<div className="flex items-center justify-between">
|
|
<Button className="rnd-escape" variant={"ghost"} size={"sm"} onClick={() => setOpenObjectPanel(false)}><X /></Button>
|
|
<CardTitle className="text-lg">Object Panel</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
|
|
<Collapsible className="rnd-escape" open={!isCollapsed} onOpenChange={(open) => setIsCollapsed(!open)}>
|
|
|
|
<CollapsibleTrigger asChild>
|
|
<Button variant="ghost" size="sm" className="absolute top-1 right-2">
|
|
{isCollapsed ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
|
|
</Button>
|
|
</CollapsibleTrigger>
|
|
|
|
<CollapsibleContent>
|
|
<div className="h-[450px] xl:h-fit lg:h-fit md:h-fit overflow-y-scroll scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white px-1 mb-2">
|
|
<Tabs className="w-full h-fit"
|
|
value={tabValue}
|
|
onValueChange={(value) => setTabValue(value)} // Sync tab state with context
|
|
>
|
|
|
|
<TabsList className="grid w-full grid-cols-4 h-fit gap-1">
|
|
<TabsTrigger
|
|
value="icons"
|
|
className="flex flex-col gap-1 text-xs"
|
|
onClick={() => setTabValue("icons")}
|
|
>
|
|
<Store className="h-4 w-4" />
|
|
<span className="hidden sm:block">Icons</span>
|
|
</TabsTrigger>
|
|
|
|
<TabsTrigger
|
|
value="shapes"
|
|
className="flex flex-col gap-1 text-xs"
|
|
onClick={() => setTabValue("shapes")}
|
|
>
|
|
<Shapes className="h-4 w-4" />
|
|
<span className="hidden sm:block">Shapes</span>
|
|
</TabsTrigger>
|
|
|
|
<TabsTrigger
|
|
value="images"
|
|
className="flex flex-col gap-1 text-xs"
|
|
onClick={() => setTabValue("images")}
|
|
>
|
|
<Upload className="h-4 w-4" />
|
|
<span className="hidden sm:block">Images</span>
|
|
</TabsTrigger>
|
|
|
|
<TabsTrigger
|
|
value="customize"
|
|
className="flex flex-col gap-1 text-xs"
|
|
onClick={() => setTabValue("customize")}
|
|
>
|
|
<PencilRuler className="h-4 w-4" />
|
|
<span className="hidden sm:block">Customize</span>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
{/* All icons */}
|
|
<TabsContent value="icons" className="mt-2">
|
|
<div className="grid grid-cols-1">
|
|
<AllIconsPage />
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* All shapes */}
|
|
<TabsContent value="shapes" className="mt-2">
|
|
<div>
|
|
<CardTitle className="p-1">Shapes </CardTitle>
|
|
<Separator className="my-2" />
|
|
<ScrollArea className="h-[450px]">
|
|
<AddShapes />
|
|
</ScrollArea>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Upload images */}
|
|
<TabsContent value="images" className="mt-2">
|
|
<div>
|
|
<CardTitle className="p-1">Upload</CardTitle>
|
|
<Separator className="my-2" />
|
|
<ScrollArea className="h-[450px]">
|
|
<Card>
|
|
<UploadImage />
|
|
</Card>
|
|
</ScrollArea>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
{/* Customization */}
|
|
<TabsContent value="customize" className="mt-2">
|
|
<div>
|
|
<CardTitle className="p-1">Object customization </CardTitle>
|
|
<Separator className="my-2" />
|
|
<ScrollArea className="h-[450px]">
|
|
<CustomizeShape />
|
|
</ScrollArea>
|
|
</div>
|
|
</TabsContent>
|
|
|
|
</Tabs>
|
|
|
|
</div>
|
|
|
|
</CollapsibleContent>
|
|
|
|
</Collapsible>
|
|
|
|
</Card>
|
|
|
|
</RndComponent>
|
|
)
|
|
}
|
|
|
|
export default ObjectPanel |