diff --git a/app/creator/layout.tsx b/app/creator/(home)/layout.tsx similarity index 100% rename from app/creator/layout.tsx rename to app/creator/(home)/layout.tsx diff --git a/app/creator/page.tsx b/app/creator/(home)/page.tsx similarity index 100% rename from app/creator/page.tsx rename to app/creator/(home)/page.tsx diff --git a/app/creator/studio/layout.tsx b/app/creator/studio/layout.tsx new file mode 100644 index 0000000..ccdf5fa --- /dev/null +++ b/app/creator/studio/layout.tsx @@ -0,0 +1,116 @@ +import { Button } from '@/components/ui/button'; +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 Sidebar from '../../../components/common/SideBar'; + +export const metadata: Metadata = { + title: 'Studio', +} + +export interface Props { + children: React.ReactNode +} + +function layout({ children }: Props) { + return ( +
+ + {/* NavBar */} +
+
+ logo +
+ Home + View + Help + +

Last saved 5 seconds ago

+
+
+ + +
+

100%

+ +
+
+ + +
+
+
+ +
+ + + + + +
+ profile + +
+
+
+ {/* End of NavBar */} + + {/* Main Content with Sidebar */} +
+ {/* 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 */} +
+ + + + + + + +
+
+
+
+
+ ); +} + +export default layout diff --git a/app/creator/trash/page.tsx b/app/creator/trash/page.tsx index d0e779e..2017932 100644 --- a/app/creator/trash/page.tsx +++ b/app/creator/trash/page.tsx @@ -1,7 +1,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" -import TrashCards, { Trash } from "@/app/components/cards/TrashCards"; -import EmptyRecords from "@/app/components/common/EmptyRecords"; +import TrashCards, { Trash } from "@/components/cards/TrashCards"; +import EmptyRecords from "@/components/common/EmptyRecords"; const TrashPage = () => { const trashData: Trash[] = [ diff --git a/app/globals.css b/app/globals.css index f01c3e1..7a19fbc 100644 --- a/app/globals.css +++ b/app/globals.css @@ -121,3 +121,10 @@ @apply bg-background text-foreground; } } + + +/* custom css */ + +.no-scrollbar::-webkit-scrollbar { + display: none; +} diff --git a/app/components/cards/TrashCards.tsx b/components/cards/TrashCards.tsx similarity index 100% rename from app/components/cards/TrashCards.tsx rename to components/cards/TrashCards.tsx diff --git a/components/common/ActionButtons.tsx b/components/common/ActionButtons.tsx new file mode 100644 index 0000000..7d2859e --- /dev/null +++ b/components/common/ActionButtons.tsx @@ -0,0 +1,32 @@ +'use client' + +import { Button } from '@/components/ui/button' +import React from 'react' + + +export interface ActionButtonsProps { + icon: React.ReactNode, + label?: string, + buttonWidth?: number, + isGhost?: boolean, + onClick?: () => void +} + +function ActionButtons({ icon, label, onClick, isGhost=false, buttonWidth}: ActionButtonsProps) { + return ( +
+ + {label &&

{label}

} +
+ ) +} + + +export default ActionButtons diff --git a/app/components/common/EmptyRecords.tsx b/components/common/EmptyRecords.tsx similarity index 100% rename from app/components/common/EmptyRecords.tsx rename to components/common/EmptyRecords.tsx diff --git a/components/common/SideBar.tsx b/components/common/SideBar.tsx new file mode 100644 index 0000000..b176495 --- /dev/null +++ b/components/common/SideBar.tsx @@ -0,0 +1,205 @@ +import React from 'react'; +import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs"; +import { + Tag, Image as Images, Upload, TextSelect, + ImageDownIcon, + UploadIcon +} from "lucide-react"; +import ActionButtons from "./ActionButtons"; +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'; +import Image from "next/image"; + + + +const CategoryHeading = ({ title }: { title: string }) => ( +
+ {title} +
+); + +const Sidebar = () => { + return ( +
+ + +
+ + } 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="Settings" isGhost={true} /> + + + + + +
+ + + + +
+
+ +
+ + +
+ { + Array.from({ length: 4 }).map((_, index) => { + return ( +
+ +
+ ) + }) + } +
+ + + + + {/* search input box */} +
+ + + +
+ +
+ + +
+ +
+

No uploads yet

+ + no uploads +
+ + + + +
+ } 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={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={65} /> + } label="Slideshow" isGhost={false} buttonWidth={65} /> +
+ + +
+ } 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={65} /> + } label="Contact Form" isGhost={false} buttonWidth={65} /> +
+ + +
+ } 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="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

+
+ + + +
+ ); +}; + +export default Sidebar; diff --git a/components/custom/Play_Ground.tsx b/components/custom/Play_Ground.tsx index e1c84cb..49d5574 100644 --- a/components/custom/Play_Ground.tsx +++ b/components/custom/Play_Ground.tsx @@ -2,7 +2,7 @@ import Frame from "./Frame"; export default function PlayGround() { return ( -
+
); diff --git a/components/ui/avatar.tsx b/components/ui/avatar.tsx new file mode 100644 index 0000000..71e428b --- /dev/null +++ b/components/ui/avatar.tsx @@ -0,0 +1,53 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils" + +function Avatar({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function AvatarImage({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function AvatarFallback({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { Avatar, AvatarImage, AvatarFallback } 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/package.json b/package.json index d469964..7234686 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,12 @@ "dependencies": { "lucide-react": "^0.503.0", "next": "15.3.1", + "@radix-ui/react-avatar": "^1.1.7", "@radix-ui/react-slot": "^1.2.0", "@radix-ui/react-tabs": "^1.1.9", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", + "iconsax-react": "^0.0.8", "react": "^19.0.0", "react-dom": "^19.0.0", "tailwind-merge": "^3.2.0" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8ac6d86..d60506b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@radix-ui/react-avatar': + specifier: ^1.1.7 + version: 1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@radix-ui/react-slot': specifier: ^1.2.0 version: 1.2.0(@types/react@19.1.2)(react@19.1.0) @@ -20,6 +23,9 @@ importers: clsx: specifier: ^2.1.1 version: 2.1.1 + iconsax-react: + specifier: ^0.0.8 + version: 0.0.8(react@19.1.0) lucide-react: specifier: ^0.503.0 version: 0.503.0(react@19.1.0) @@ -326,6 +332,19 @@ packages: '@radix-ui/primitive@1.1.2': resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==} + '@radix-ui/react-avatar@1.1.7': + resolution: {integrity: sha512-V7ODUt4mUoJTe3VUxZw6nfURxaPALVqmDQh501YmaQsk3D8AZQrOPRnfKn4H7JGDLBc0KqLhT94H79nV88ppNg==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-collection@1.1.4': resolution: {integrity: sha512-cv4vSf7HttqXilDnAnvINd53OTl1/bjUYVZrkFnA7nwmY9Ob2POUy0WY0sfqBAe1s5FyKsyceQlqiEGPYNTadg==} peerDependencies: @@ -463,6 +482,15 @@ packages: '@types/react': optional: true + '@radix-ui/react-use-is-hydrated@0.1.0': + resolution: {integrity: sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==} + peerDependencies: + '@types/react': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@radix-ui/react-use-layout-effect@1.1.1': resolution: {integrity: sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==} peerDependencies: @@ -1219,6 +1247,11 @@ packages: resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} + iconsax-react@0.0.8: + resolution: {integrity: sha512-l3dVk4zGtkkJHgvNYqAf0wDKqnKxXykee5/DoESGo2JvSYwaxajJUHSX2YrPRXSov8Hd8ClGFwJxCEaEjrFD1Q==} + peerDependencies: + react: '*' + ignore@5.3.2: resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==} engines: {node: '>= 4'} @@ -1872,6 +1905,11 @@ packages: uri-js@4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} + use-sync-external-store@1.5.0: + resolution: {integrity: sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + which-boxed-primitive@1.1.1: resolution: {integrity: sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==} engines: {node: '>= 0.4'} @@ -2109,6 +2147,19 @@ snapshots: '@radix-ui/primitive@1.1.2': {} + '@radix-ui/react-avatar@1.1.7(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': + dependencies: + '@radix-ui/react-context': 1.1.2(@types/react@19.1.2)(react@19.1.0) + '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) + '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.2)(react@19.1.0) + '@radix-ui/react-use-is-hydrated': 0.1.0(@types/react@19.1.2)(react@19.1.0) + '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.1.2)(react@19.1.0) + react: 19.1.0 + react-dom: 19.1.0(react@19.1.0) + optionalDependencies: + '@types/react': 19.1.2 + '@types/react-dom': 19.1.2(@types/react@19.1.2) + '@radix-ui/react-collection@1.1.4(@types/react-dom@19.1.2(@types/react@19.1.2))(@types/react@19.1.2)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': dependencies: '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.2)(react@19.1.0) @@ -2226,6 +2277,13 @@ snapshots: optionalDependencies: '@types/react': 19.1.2 + '@radix-ui/react-use-is-hydrated@0.1.0(@types/react@19.1.2)(react@19.1.0)': + dependencies: + react: 19.1.0 + use-sync-external-store: 1.5.0(react@19.1.0) + optionalDependencies: + '@types/react': 19.1.2 + '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.1.2)(react@19.1.0)': dependencies: react: 19.1.0 @@ -3136,6 +3194,11 @@ snapshots: dependencies: function-bind: 1.1.2 + iconsax-react@0.0.8(react@19.1.0): + dependencies: + prop-types: 15.8.1 + react: 19.1.0 + ignore@5.3.2: {} import-fresh@3.3.1: @@ -3874,6 +3937,10 @@ snapshots: dependencies: punycode: 2.3.1 + use-sync-external-store@1.5.0(react@19.1.0): + dependencies: + react: 19.1.0 + which-boxed-primitive@1.1.1: dependencies: is-bigint: 1.1.0 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 diff --git a/public/images/logo.png b/public/images/logo.png new file mode 100644 index 0000000..e2e546e Binary files /dev/null and b/public/images/logo.png differ diff --git a/public/images/noUploads.png b/public/images/noUploads.png new file mode 100644 index 0000000..172d753 Binary files /dev/null and b/public/images/noUploads.png differ diff --git a/public/images/profile.jpeg b/public/images/profile.jpeg new file mode 100644 index 0000000..c3d5590 Binary files /dev/null and b/public/images/profile.jpeg differ