diff --git a/app/components/common/ActionButtons.tsx b/app/components/common/ActionButtons.tsx index 626808b..7d2859e 100644 --- a/app/components/common/ActionButtons.tsx +++ b/app/components/common/ActionButtons.tsx @@ -12,13 +12,18 @@ export interface ActionButtonsProps { onClick?: () => void } -function ActionButtons({ icon, label, onClick ,isGhost=false, buttonWidth=50}: ActionButtonsProps) { +function ActionButtons({ icon, label, onClick, isGhost=false, buttonWidth}: ActionButtonsProps) { return ( -
- -

{label}

+ {label &&

{label}

}
) } diff --git a/app/components/common/SideBar.tsx b/app/components/common/SideBar.tsx index f0452e2..9d37a44 100644 --- a/app/components/common/SideBar.tsx +++ b/app/components/common/SideBar.tsx @@ -1,96 +1,203 @@ import React from 'react'; import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; import { - Eye, Code, Tag, UploadCloud, Layout, Image, Film, - FileCode, MousePointerClick, ChevronLeft, ChevronRight, ChevronsRight, - ChevronsLeft, ChevronLast, Bell, Facebook, Linkedin, Twitter, - Youtube, MessageCircle, Settings, - Upload, - TextSelect + Tag, Image, Upload, TextSelect, + ImageDownIcon, + UploadIcon } from "lucide-react"; import ActionButtons from "./ActionButtons"; -import { ArrowLeft2, ArrowRight2, AudioSquare, Cardano, CodeCircle, DocumentUpload, Element2, ExportSquare, Link, LinkSquare, Magicpen, MessageAdd1, MessageQuestion, Next, Note, Previous, Setting2, Shapes, Smallcaps, Snapchat, Spotify, Text, Video, VideoHorizontal, Whatsapp } from 'iconsax-react'; +import { + ArrowLeft2, ArrowRight2, AudioSquare, Cardano, Chart, CodeCircle, + Element2, ExportSquare, Gift, Link, LinkSquare, Magicpen, + MessageAdd1, MessageQuestion, Next, Note, Photoshop, Previous, + SearchNormal1, + Setting2, Setting4, Shapes, Smallcaps, Snapchat, Spotify, + Sticker, + TableDocument, + Text, Video, VideoHorizontal, Whatsapp, +} from 'iconsax-react'; +import { Button } from '@/components/ui/button'; +import { Skeleton } from '@/components/ui/skeleton'; +import { Input } from '@/components/ui/input'; const CategoryHeading = ({ title }: { title: string }) => ( -
+
{title}
); const Sidebar = () => { return ( -
- - -
- } label="Text" isGhost={true} /> - } label="Upload" isGhost={true} /> - } label="Elements" isGhost={true} /> - } label="Interactions" isGhost={true} /> - } label="Templates" isGhost={true} /> - } label="Ai Write" isGhost={true} /> +
+ + +
+ + } label="Text" isGhost={false} /> + + + } label="Upload" isGhost={true} /> + + + } label="Elements" isGhost={true} /> + + + } label="Interactions" isGhost={true} /> + + + } label="Templates" isGhost={true} /> + + + } label="Ai Write" isGhost={true} /> +
- } label="Preview" isGhost={true} /> - + + } label="Settings" isGhost={true} /> + - + + + +
+ + + + +
+
+ +
+ + +
+ { + Array.from({ length: 4 }).map((_, index) => { + return ( +
+ +
+ ) + }) + } +
+ + + + + {/* search input box */} +
+ + + +
+ +
+ + +
+ +
+ +
+ + + + + +
+ } label="Stock Photo" isGhost={false} buttonWidth={65} /> + } label="Stock Video" isGhost={false} buttonWidth={65} /> + } label="Shapes" isGhost={false} buttonWidth={65} /> + } label="Gif" isGhost={false} buttonWidth={65} /> + } label="Sticker" isGhost={false} buttonWidth={65} /> + } label="Audio" isGhost={false} buttonWidth={65} /> +
+ + +
+ } label="Chart" isGhost={false} buttonWidth={65} /> + } label="Table" isGhost={false} buttonWidth={65} /> +
+ + + -
- } label="Link Area" isGhost={false} buttonWidth={140} /> - } label="Link Button" isGhost={false} buttonWidth={140} /> - } label="Tag" isGhost={false} buttonWidth={140} /> - } label="Caption" isGhost={false} buttonWidth={140} /> - } label="Embed code" isGhost={false} buttonWidth={140} /> - } label="Pop-up frame" isGhost={false} buttonWidth={140} /> +
+ } label="Link Area" isGhost={false} buttonWidth={65} /> + } label="Link Button" isGhost={false} buttonWidth={65} /> + } label="Tag" isGhost={false} buttonWidth={65} /> + } label="Caption" isGhost={false} buttonWidth={65} /> + } label="Embed code" isGhost={false} buttonWidth={65} /> + } label="Pop-up frame" isGhost={false} buttonWidth={65} />
-
- } label="Spotlight" isGhost={false} buttonWidth={140} /> - } label="Slideshow" isGhost={false} buttonWidth={140} /> +
+ } label="Spotlight" isGhost={false} buttonWidth={65} /> + } label="Slideshow" isGhost={false} buttonWidth={65} />
+ -
- } label="Video embed" isGhost={false} buttonWidth={140} /> - } label="Video Button" isGhost={false} buttonWidth={140} /> - } label="Audio Button" isGhost={false} buttonWidth={140} /> +
+ } label="Video embed" isGhost={false} buttonWidth={65} /> + } label="Video Button" isGhost={false} buttonWidth={65} /> + } label="Audio Button" isGhost={false} buttonWidth={65} />
+ -
- } label="Question" isGhost={false} buttonWidth={140} /> - } label="Contact Form" isGhost={false} buttonWidth={140} /> +
+ } label="Question" isGhost={false} buttonWidth={65} /> + } label="Contact Form" isGhost={false} buttonWidth={65} />
+ -
- } label="Previous Page" isGhost={false} buttonWidth={140} /> - } label="Next Page" isGhost={false} buttonWidth={140} /> - } label="Go to page" isGhost={false} buttonWidth={140} /> - } label="First page" isGhost={false} buttonWidth={140} /> - } label="Last page" isGhost={false} buttonWidth={140} /> +
+ } label="Previous Page" isGhost={false} buttonWidth={65} /> + } label="Next Page" isGhost={false} buttonWidth={65} /> + } label="Go to page" isGhost={false} buttonWidth={65} /> + } label="First page" isGhost={false} buttonWidth={65} /> + } label="Last page" isGhost={false} buttonWidth={65} />
+ -
- } label="" isGhost={false} buttonWidth={140} /> - } label="" isGhost={false} buttonWidth={140} /> - } label="" isGhost={false} buttonWidth={140} /> - } label="" isGhost={false} buttonWidth={140} /> - } label="" isGhost={false} buttonWidth={140} /> - } label="" isGhost={false} buttonWidth={140} /> - } label="" isGhost={false} buttonWidth={140} /> +
+ } label="Snapchat" isGhost={false} buttonWidth={65} /> + } label="WhatsApp" isGhost={false} buttonWidth={65} /> + } label="Spotify" isGhost={false} buttonWidth={65} /> +
+ + +
+

Templates section

+

This section is under development

+
+ + + +
+

AI Write section

+

This section is under development

+
+ + + +
+

Settings section

+

This section is under development

 - DFHDSFGSDFGHSFHWd. - odit mibus quas porro, modi corrupti repudiandae an - odit mibus quas porro, modi corrupti repudiandae an - odit mibus quas porro, modi corrupti repudiandae an - odit mibus quas porro, modi corrupti repudiandae an - odit mibus quas porro, modi corrupti repudiandae an
); }; -export default Sidebar; \ No newline at end of file +export default Sidebar; diff --git a/app/studio/layout.tsx b/app/studio/layout.tsx index e7a7871..a49e6c7 100644 --- a/app/studio/layout.tsx +++ b/app/studio/layout.tsx @@ -1,12 +1,10 @@ import { Button } from '@/components/ui/button'; -import { Add, ArrowDown2, Eye, Pointer } from 'iconsax-react'; -import { Download, PointerIcon, Redo2, Share2, Undo2 } from 'lucide-react'; +import { Add, ArrowDown2, Book1, Eye, Layer, Link2, Message, PlayCircle, Pointer, SearchNormal1 } from 'iconsax-react'; +import { Download, PointerIcon, Redo2, Share2, Square, Undo2 } from 'lucide-react'; import type { Metadata } from 'next'; import Image from 'next/image'; import Link from 'next/link'; import React from 'react'; -import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" -import ActionButtons from '../components/common/ActionButtons'; import Sidebar from '../components/common/SideBar'; export const metadata: Metadata = { @@ -19,77 +17,98 @@ export interface Props { function layout({ children }: Props) { return ( -
+
{/* NavBar */} -
-
- logo -
- Home - View - Help +
+
+ logo +
+ Home + View + Help

Last saved 5 seconds ago

-
- - -
+
+ + +

100%

- - + +
-
-
-
- - - -
- profile -
-
{/* End of NavBar */} {/* Main Content with Sidebar */} -
- {/* Sidebar */} - -
- {/* Inner NavBar */} -
-
-

Pages 1

-

Pages 1

+
+ {/* Sidebar - Hidden on mobile by default, can be toggled */} +
+ +
+
+ {/* Inner NavBar */} +
+
+

Pages 1

+

794 * 1123 px

+
+
+

Background

+
+
+
+
+ {/* End of Inner NavBar */} + + {/* Main Editor */} +
+
+ {children} +
+ {/* Inner Editor SideBar */} +
+ + + + + + + +
- {children} -
-
); } diff --git a/app/studio/page.tsx b/app/studio/page.tsx index 09c163d..36da491 100644 --- a/app/studio/page.tsx +++ b/app/studio/page.tsx @@ -1,22 +1,23 @@ -import React from 'react' +import { Button } from '@/components/ui/button'; +import { AddSquare, Trash } from 'iconsax-react'; +import Image from 'next/image'; +import React from 'react'; export default function Studio() { return ( -
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod nam autem - ratione et perspiciatis iure ab ducimus, maxime distinctio in amet fugit de - lectus optio asperiores neque unde possimus cumque repudiandae nulla laudantium. E - rror iure laborum fuga quia, at ut dolor consectetur culpa provident mollitia inven - tore cumque obcaecati ab esse similique recusandae, tempore architecto nulla molestias i - mpedit optio animi. Provident sed quisquam reprehenderit possimus voluptatum voluptates p - erferendis esse qui excepturi doloremque quos similique eius vel fuga impedit neque nulla d - ebitis, rem praesentium accusamus! Commodi, temporibus maxime ex amet facilis quasi reprehenderit - cumque quidem repudiandae, earum odio ab cum qui rerum eum culpa. Aliquid corrupti et fuga evenie - t ipsa, consequatur a suscipit excepturi laudantium! Unde quasi, incidunt doloribus optio cupiditate eius. - Incidunt eaque natus et magnam in maiores laudantium necessitatibus possimus rem porro, placeat officiis - eligendi, nisi ducimus! Corrupti, aliquam vitae. Ipsum commodi perspiciatis laudantium eum eligendi repellat amet, su - nt enim obcaecati non architecto, delectus nisi iusto quas voluptates cum doloribus quod sapiente sint beatae qui assumenda. Hic, corr - upti magni quas quaerat odit harum modi ullam accusamus fugiat accusantium veniam quis voluptate iusto optio porro, tempore cumque ratione ut quam - volupta - tum perferendis repudiandae eius amet! Ratione aliquid quod laudantium suscipit explicabo inventore.
+
+
+

Page 1/1

+
+ + +
+ +
+
+ image1 +
+ +
) } diff --git a/components/ui/input.tsx b/components/ui/input.tsx new file mode 100644 index 0000000..03295ca --- /dev/null +++ b/components/ui/input.tsx @@ -0,0 +1,21 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Input({ className, type, ...props }: React.ComponentProps<"input">) { + return ( + + ) +} + +export { Input } diff --git a/components/ui/skeleton.tsx b/components/ui/skeleton.tsx new file mode 100644 index 0000000..32ea0ef --- /dev/null +++ b/components/ui/skeleton.tsx @@ -0,0 +1,13 @@ +import { cn } from "@/lib/utils" + +function Skeleton({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +export { Skeleton } diff --git a/public/images/Ebook.png b/public/images/Ebook.png new file mode 100644 index 0000000..89a5020 Binary files /dev/null and b/public/images/Ebook.png differ diff --git a/public/images/Unconfirmed 311847.crdownload b/public/images/Unconfirmed 311847.crdownload new file mode 100644 index 0000000..cc73baf Binary files /dev/null and b/public/images/Unconfirmed 311847.crdownload differ