ershisan99/canvas-label
1
0
Fork 0
mirror of https://github.com/r2r90/canvas-label.git synced 2026-02-02 12:37:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

styling test version

Browse Source
This commit is contained in:
Artur AGH
2023-12-19 09:36:29 +01:00
parent 10326e0d5c
commit 977b750476
12 changed files with 439 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/layout/sidebar/sidebar.tsx
View File

@@ -1,21 +1,64 @@
import { TextInput } from "@/components/layout/sidebar/text-input";
import ImageInput from "@/components/layout/sidebar/image-input";
import SizeSelect from "@/components/layout/sidebar/size-select";
import { BackgroundSelect } from "@/components/layout/sidebar/background-select";
import { Layers } from "@/components/layout/sidebar/layers";
import { SelectTemplate } from "@/components/layout/sidebar/select-template";
import { ImageGallery } from "@/components/layout/sidebar/image-gallery";
import TextInput from "@/components/layout/sidebar/text-input/text-input";
import ImageInput from "@/components/layout/sidebar/image-input/image-input";
import { Layers } from "@/components/layout/sidebar/layers/layers";
import { ImageGallery } from "@/components/layout/sidebar/image-gallery/image-gallery";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import React, { useState } from "react";
import { LuLayoutTemplate } from "react-icons/lu";
import {
GearIcon,
ImageIcon,
LayersIcon,
TextIcon,
} from "@radix-ui/react-icons";
import { StageSize } from "@/components/layout/sidebar/stage-settings/stage-size";
import { StageBackground } from "@/components/layout/sidebar/stage-settings/stage-background";
export function Sidebar() {
const [openGallery, setOpenGallery] = useState<boolean>(false);
return (
<div className="flex h-full w-20 flex-col items-center gap-2 p-2 pt-4">
<SizeSelect />
<TextInput />
<ImageInput />
<SelectTemplate />
<BackgroundSelect />
<ImageGallery />
<Layers />
<div className="items-left flex w-full flex-col p-2 pt-4">
<Tabs>
<TabsList className="grid grid-cols-5">
<TabsTrigger value="stage">
<GearIcon />
</TabsTrigger>
<TabsTrigger value="image">
<ImageIcon />
</TabsTrigger>
<TabsTrigger value="text">
<TextIcon />
</TabsTrigger>
<TabsTrigger
onClick={() => setOpenGallery(true)}
open={openGallery}
onOpenChange={setOpenGallery}
value="gallery"
>
<LuLayoutTemplate />
</TabsTrigger>
<TabsTrigger value="layers">
<LayersIcon />
</TabsTrigger>
</TabsList>
<TabsContent value="stage">
<StageSize />
<StageBackground />
</TabsContent>
<TabsContent value="image">
<ImageInput />
</TabsContent>
<TabsContent value="text">
<TextInput />
</TabsContent>
<TabsContent value="gallery">
<ImageGallery open={openGallery} />
</TabsContent>
<TabsContent value="layers">
<Layers />
</TabsContent>
</Tabs>
</div>
);
}