79 lines
No EOL
3.3 KiB
JavaScript
79 lines
No EOL
3.3 KiB
JavaScript
import { Sheet, SheetContent, SheetDescription } from '../ui/sheet';
|
|
import AddShapes from './AddShapes';
|
|
import { Separator } from '../ui/separator';
|
|
import { Button } from '../ui/button';
|
|
import { X, Store, Shapes, Upload } from "lucide-react";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
|
|
import AllIconsPage from '../EachComponent/Icons/AllIcons';
|
|
import UploadImage from '../EachComponent/UploadImage';
|
|
import { useContext } from 'react';
|
|
import OpenContext from '../Context/openContext/OpenContext';
|
|
|
|
const left = "left";
|
|
|
|
const SheetLeftPanel = () => {
|
|
const { leftPanelOpen, setLeftPanelOpen } = useContext(OpenContext);
|
|
|
|
// Prevent closing on outside clicks
|
|
const handleOpenChange = (isOpen) => {
|
|
if (!isOpen) {
|
|
// Do nothing when clicking outside
|
|
return; // Sheet won't close
|
|
}
|
|
setLeftPanelOpen(isOpen); // Update only on valid trigger
|
|
};
|
|
|
|
// Function to handle closing the sheet
|
|
const handleClose = () => {
|
|
setLeftPanelOpen(false); // Close when button is clicked
|
|
};
|
|
|
|
return (
|
|
<Sheet onOpenChange={handleOpenChange} open={leftPanelOpen} modal={false}>
|
|
<SheetContent side={left} className="w-[300px] top-[60px]">
|
|
<SheetDescription className="text-left flex font-semibold">
|
|
<p>Your customizable, canvas playground.</p>
|
|
<Button variant={"outline"} onClick={handleClose}>
|
|
<X />
|
|
</Button>
|
|
</SheetDescription>
|
|
|
|
<Separator className="my-2" />
|
|
<Tabs defaultValue="shapes" className="w-full relative">
|
|
<TabsList className="grid w-full grid-cols-3 gap-1 h-fit">
|
|
<TabsTrigger value="shapes" className="truncate text-xs grid items-center justify-center">
|
|
<Shapes className="h-4 w-4 mx-auto" />
|
|
<p>Shapes & Text</p>
|
|
</TabsTrigger>
|
|
|
|
<TabsTrigger value="icons" className="truncate text-xs grid items-center justify-center">
|
|
<Store className="h-4 w-4 mx-auto" />
|
|
<p>Icons</p>
|
|
</TabsTrigger>
|
|
|
|
<TabsTrigger value="image" className="truncate text-xs grid items-center justify-center">
|
|
<Upload className="h-4 w-4 mx-auto" />
|
|
<p>Image</p>
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
|
|
<Separator className="my-2" />
|
|
|
|
<TabsContent value="shapes" className="mt-2 h-[450px] overflow-y-scroll scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white">
|
|
<AddShapes />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="icons" className="mt-2">
|
|
<AllIconsPage />
|
|
</TabsContent>
|
|
|
|
<TabsContent value="image" className="mt-2 h-[450px] overflow-y-scroll px-1 scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white">
|
|
<UploadImage />
|
|
</TabsContent>
|
|
</Tabs>
|
|
</SheetContent>
|
|
</Sheet>
|
|
)
|
|
}
|
|
|
|
export default SheetLeftPanel |