diff --git a/app/components/common/ActionButtons.tsx b/app/components/common/ActionButtons.tsx new file mode 100644 index 0000000..f033baf --- /dev/null +++ b/app/components/common/ActionButtons.tsx @@ -0,0 +1,26 @@ +'use client' + +import { Button } from '@/components/ui/button' +import React from 'react' + + +export interface ActionButtonsProps { + icon: React.ReactNode, + label: string, + isGhost?: boolean, + onClick?: () => void +} + +function ActionButtons({ icon, label, onClick ,isGhost=false}: ActionButtonsProps) { + return ( +
+ +

{label}

+
+ ) +} + + +export default ActionButtons diff --git a/app/components/common/SideBar.tsx b/app/components/common/SideBar.tsx new file mode 100644 index 0000000..a7d9fb7 --- /dev/null +++ b/app/components/common/SideBar.tsx @@ -0,0 +1,59 @@ +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 +} from "lucide-react"; +import ActionButtons from "./ActionButtons"; +import { DocumentUpload, Element2, Magicpen, Setting2, Shapes, Text } from 'iconsax-react'; + + + +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="Preview" isGhost={true} /> + +
+ +
+ + } label="Link Area" isGhost={false} /> + } label="Link Area" isGhost={false} /> + } label="Link Area" isGhost={false} /> + } label="Link Area" isGhost={false} /> +
+
+ 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 diff --git a/app/studio/layout.tsx b/app/studio/layout.tsx new file mode 100644 index 0000000..750e5a4 --- /dev/null +++ b/app/studio/layout.tsx @@ -0,0 +1,90 @@ +import { Button } from '@/components/ui/button'; +import { Add, ArrowDown2, Eye, Pointer } from 'iconsax-react'; +import { Download, PointerIcon, Redo2, Share2, 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 = { + 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 */} + + + +
{children}
+
+ +
+ ); +} + +export default layout diff --git a/app/studio/page.tsx b/app/studio/page.tsx new file mode 100644 index 0000000..09c163d --- /dev/null +++ b/app/studio/page.tsx @@ -0,0 +1,22 @@ +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.
+ ) +} 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/package.json b/package.json index 9adae3a..2c907ec 100644 --- a/package.json +++ b/package.json @@ -9,10 +9,12 @@ "lint": "next lint" }, "dependencies": { + "@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", "lucide-react": "^0.503.0", "next": "15.3.1", "react": "^19.0.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/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/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