diff --git a/packages/app-akeru/.prettierrc b/packages/app-akeru/.prettierrc new file mode 100644 index 0000000..8b0bc4e --- /dev/null +++ b/packages/app-akeru/.prettierrc @@ -0,0 +1,3 @@ +{ + "plugins": ["prettier-plugin-tailwindcss"] +} \ No newline at end of file diff --git a/packages/app-akeru/package.json b/packages/app-akeru/package.json index 64989c8..828d91f 100644 --- a/packages/app-akeru/package.json +++ b/packages/app-akeru/package.json @@ -10,7 +10,10 @@ }, "dependencies": { "@radix-ui/react-menubar": "^1.0.4", + "@radix-ui/react-popover": "^1.0.7", + "@radix-ui/react-scroll-area": "^1.0.5", "@radix-ui/react-select": "^2.0.0", + "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", @@ -31,6 +34,8 @@ "eslint": "^8", "eslint-config-next": "14.2.3", "postcss": "^8", + "prettier": "^3.2.5", + "prettier-plugin-tailwindcss": "^0.5.14", "tailwindcss": "^3.4.1", "typescript": "^5.4.5" } diff --git a/packages/app-akeru/pnpm-lock.yaml b/packages/app-akeru/pnpm-lock.yaml index 8d8b9e2..237b6d8 100644 --- a/packages/app-akeru/pnpm-lock.yaml +++ b/packages/app-akeru/pnpm-lock.yaml @@ -4,9 +4,18 @@ dependencies: '@radix-ui/react-menubar': specifier: ^1.0.4 version: 1.0.4(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-popover': + specifier: ^1.0.7 + version: 1.0.7(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-scroll-area': + specifier: ^1.0.5 + version: 1.0.5(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0) '@radix-ui/react-select': specifier: ^2.0.0 version: 2.0.0(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-separator': + specifier: ^1.0.3 + version: 1.0.3(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0) '@radix-ui/react-slot': specifier: ^1.0.2 version: 1.0.2(@types/react@18.3.2)(react@18.0.0) @@ -63,6 +72,12 @@ devDependencies: postcss: specifier: ^8 version: 8.0.0 + prettier: + specifier: ^3.2.5 + version: 3.2.5 + prettier-plugin-tailwindcss: + specifier: ^0.5.14 + version: 0.5.14(prettier@3.2.5) tailwindcss: specifier: ^3.4.1 version: 3.4.1 @@ -537,6 +552,41 @@ packages: react-dom: 18.0.0(react@18.0.0) dev: false + /@radix-ui/react-popover@1.0.7(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0): + resolution: {integrity: sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.2)(react@18.0.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.3.2)(react@18.0.0) + '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.3.2)(react@18.0.0) + '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.3.2)(react@18.0.0) + '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-slot': 1.0.2(@types/react@18.3.2)(react@18.0.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.3.2)(react@18.0.0) + '@types/react': 18.3.2 + '@types/react-dom': 18.0.0 + aria-hidden: 1.2.4 + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + react-remove-scroll: 2.5.5(@types/react@18.3.2)(react@18.0.0) + dev: false + /@radix-ui/react-popper@1.1.3(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0): resolution: {integrity: sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==} peerDependencies: @@ -660,6 +710,35 @@ packages: react-dom: 18.0.0(react@18.0.0) dev: false + /@radix-ui/react-scroll-area@1.0.5(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0): + resolution: {integrity: sha512-b6PAgH4GQf9QEn8zbT2XUHpW5z8BzqEc7Kl11TwDrvuTrxlkcjTD5qa/bxgKr+nmuXKu4L/W5UZ4mlP/VG/5Gw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@radix-ui/number': 1.0.1 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.3.2)(react@18.0.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.3.2)(react@18.0.0) + '@radix-ui/react-direction': 1.0.1(@types/react@18.3.2)(react@18.0.0) + '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.3.2)(react@18.0.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.3.2)(react@18.0.0) + '@types/react': 18.3.2 + '@types/react-dom': 18.0.0 + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + dev: false + /@radix-ui/react-select@2.0.0(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0): resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==} peerDependencies: @@ -701,6 +780,27 @@ packages: react-remove-scroll: 2.5.5(@types/react@18.3.2)(react@18.0.0) dev: false + /@radix-ui/react-separator@1.0.3(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0): + resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.24.5 + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.0)(@types/react@18.3.2)(react-dom@18.0.0)(react@18.0.0) + '@types/react': 18.3.2 + '@types/react-dom': 18.0.0 + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + dev: false + /@radix-ui/react-slot@1.0.2(@types/react@18.3.2)(react@18.0.0): resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} peerDependencies: @@ -2785,6 +2885,67 @@ packages: engines: {node: '>= 0.8.0'} dev: true + /prettier-plugin-tailwindcss@0.5.14(prettier@3.2.5): + resolution: {integrity: sha512-Puaz+wPUAhFp8Lo9HuciYKM2Y2XExESjeT+9NQoVFXZsPPnc9VYss2SpxdQ6vbatmt8/4+SN0oe0I1cPDABg9Q==} + engines: {node: '>=14.21.3'} + peerDependencies: + '@ianvs/prettier-plugin-sort-imports': '*' + '@prettier/plugin-pug': '*' + '@shopify/prettier-plugin-liquid': '*' + '@trivago/prettier-plugin-sort-imports': '*' + '@zackad/prettier-plugin-twig-melody': '*' + prettier: ^3.0 + prettier-plugin-astro: '*' + prettier-plugin-css-order: '*' + prettier-plugin-import-sort: '*' + prettier-plugin-jsdoc: '*' + prettier-plugin-marko: '*' + prettier-plugin-organize-attributes: '*' + prettier-plugin-organize-imports: '*' + prettier-plugin-sort-imports: '*' + prettier-plugin-style-order: '*' + prettier-plugin-svelte: '*' + peerDependenciesMeta: + '@ianvs/prettier-plugin-sort-imports': + optional: true + '@prettier/plugin-pug': + optional: true + '@shopify/prettier-plugin-liquid': + optional: true + '@trivago/prettier-plugin-sort-imports': + optional: true + '@zackad/prettier-plugin-twig-melody': + optional: true + prettier-plugin-astro: + optional: true + prettier-plugin-css-order: + optional: true + prettier-plugin-import-sort: + optional: true + prettier-plugin-jsdoc: + optional: true + prettier-plugin-marko: + optional: true + prettier-plugin-organize-attributes: + optional: true + prettier-plugin-organize-imports: + optional: true + prettier-plugin-sort-imports: + optional: true + prettier-plugin-style-order: + optional: true + prettier-plugin-svelte: + optional: true + dependencies: + prettier: 3.2.5 + dev: true + + /prettier@3.2.5: + resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==} + engines: {node: '>=14'} + hasBin: true + dev: true + /progress@2.0.3: resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==} engines: {node: '>=0.4.0'} diff --git a/packages/app-akeru/src/app/(dashboard)/layout.tsx b/packages/app-akeru/src/app/(dashboard)/layout.tsx index fbb3e6c..04340cc 100644 --- a/packages/app-akeru/src/app/(dashboard)/layout.tsx +++ b/packages/app-akeru/src/app/(dashboard)/layout.tsx @@ -1,10 +1,15 @@ -import React from 'react' -import Header from '../components/header' +import React from "react"; +import Header from "../features/app-header/header"; +import { Separator } from "@/components/ui/separator"; -const DashboardLayout = () => { +const DashboardLayout = ({ children }: { children: React.ReactNode }) => { return ( -
- ) -} +
+
+ +
{children}
+
+ ); +}; -export default DashboardLayout \ No newline at end of file +export default DashboardLayout; diff --git a/packages/app-akeru/src/app/(dashboard)/threads/features/assistants-list/assistants-list-item.tsx b/packages/app-akeru/src/app/(dashboard)/threads/features/assistants-list/assistants-list-item.tsx new file mode 100644 index 0000000..3892215 --- /dev/null +++ b/packages/app-akeru/src/app/(dashboard)/threads/features/assistants-list/assistants-list-item.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +const AssistantsListItem = () => { + return ( +
AssistantsListItem
+ ) +} + +export default AssistantsListItem \ No newline at end of file diff --git a/packages/app-akeru/src/app/(dashboard)/threads/features/assistants-list/assistants-list.tsx b/packages/app-akeru/src/app/(dashboard)/threads/features/assistants-list/assistants-list.tsx new file mode 100644 index 0000000..86ed4d2 --- /dev/null +++ b/packages/app-akeru/src/app/(dashboard)/threads/features/assistants-list/assistants-list.tsx @@ -0,0 +1,9 @@ +import React from "react"; + +const AssistantsList = () => { + return
+ +
; +}; + +export default AssistantsList; diff --git a/packages/app-akeru/src/app/(dashboard)/threads/features/assistants-list/test-data.ts b/packages/app-akeru/src/app/(dashboard)/threads/features/assistants-list/test-data.ts new file mode 100644 index 0000000..e69de29 diff --git a/packages/app-akeru/src/app/(dashboard)/threads/features/conversation-area/chat-display.tsx b/packages/app-akeru/src/app/(dashboard)/threads/features/conversation-area/chat-display.tsx new file mode 100644 index 0000000..5222264 --- /dev/null +++ b/packages/app-akeru/src/app/(dashboard)/threads/features/conversation-area/chat-display.tsx @@ -0,0 +1,9 @@ +import React from 'react' + +const ChatDisplay = () => { + return ( +
+ ) +} + +export default ChatDisplay \ No newline at end of file diff --git a/packages/app-akeru/src/app/(dashboard)/threads/features/conversation-area/chat-input.tsx b/packages/app-akeru/src/app/(dashboard)/threads/features/conversation-area/chat-input.tsx new file mode 100644 index 0000000..c066eff --- /dev/null +++ b/packages/app-akeru/src/app/(dashboard)/threads/features/conversation-area/chat-input.tsx @@ -0,0 +1,11 @@ +import { Input } from '@/components/ui/input' +import { Send } from 'lucide-react' +import React from 'react' + +const ChatInput = () => { + return ( + + ) +} + +export default ChatInput \ No newline at end of file diff --git a/packages/app-akeru/src/app/(dashboard)/threads/features/conversation-area/conversation-area.tsx b/packages/app-akeru/src/app/(dashboard)/threads/features/conversation-area/conversation-area.tsx new file mode 100644 index 0000000..5812f1a --- /dev/null +++ b/packages/app-akeru/src/app/(dashboard)/threads/features/conversation-area/conversation-area.tsx @@ -0,0 +1,14 @@ +import React from 'react' +import ChatInput from './chat-input' +import ChatDisplay from './chat-display' + +const ConversationArea = () => { + return ( +
+ + +
+ ) +} + +export default ConversationArea \ No newline at end of file diff --git a/packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/test-data.ts b/packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/test-data.ts new file mode 100644 index 0000000..a381904 --- /dev/null +++ b/packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/test-data.ts @@ -0,0 +1,44 @@ +import { ThreadsListItemProps } from "./threads-list-item"; + +export const THREADS_LIST_MOCK_DATA: ThreadsListItemProps[] = [ + { + title: "Understanding React Hooks", + description: "A deep dive into the use of hooks in React for state and lifecycle management.", + date: "2024-05-01" + }, + { + title: "Announcing TypeScript 5.0", + description: "Explore the new features and improvements in the latest TypeScript release.", + date: "2024-04-15" + }, + { + title: "Getting Started with Python", + description: "An introductory guide to programming in Python for beginners.", + date: "2024-03-20" + }, + { + title: "AI Breakthrough in Natural Language Processing", + description: "How the latest advancements in AI are revolutionizing language understanding.", + date: "2024-02-10" + }, + { + title: "Join the Annual Developer Conference", + description: "Meet and network with other developers at this year's conference. Keynotes, workshops, and more!", + date: "2024-06-05" + }, + { + title: "Hiring Frontend Engineers", + description: "We are looking for talented frontend engineers to join our team. Apply now!", + date: "2024-05-20" + }, + { + title: "Top 10 Books for Software Engineers", + description: "A curated list of must-read books for anyone in the software development field.", + date: "2024-01-30" + }, + { + title: "Critical Security Patch Released", + description: "A new security patch has been released to address vulnerabilities in the system. Update immediately.", + date: "2024-04-05" + } +]; diff --git a/packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/threads-list-item.tsx b/packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/threads-list-item.tsx new file mode 100644 index 0000000..e99657d --- /dev/null +++ b/packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/threads-list-item.tsx @@ -0,0 +1,18 @@ +import React from "react"; + +export interface ThreadsListItemProps { + title: string; + description: string; + date: string; + isActive?: boolean; +} + +const ThreadsListItem = (props: ThreadsListItemProps) => { + return ( +
+

{props.title}

+
+ ); +}; + +export default ThreadsListItem; diff --git a/packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/threads-list.tsx b/packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/threads-list.tsx new file mode 100644 index 0000000..8293498 --- /dev/null +++ b/packages/app-akeru/src/app/(dashboard)/threads/features/thread-list/threads-list.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import { THREADS_LIST_MOCK_DATA } from "./test-data"; +import { ScrollArea } from "@/components/ui/scroll-area"; +import ThreadsListItem from "./threads-list-item"; +import { Input } from "@/components/ui/input"; +import { Search } from "lucide-react"; + +const ThreadsList = () => { + return ( +
+
+ +
+ + {/* This is just for the overflow gradient */} +
+ {/* This is just for the overflow gradient */} +
+ {THREADS_LIST_MOCK_DATA.map((thread, key) => { + return ; + })} +
+
+
+ ); +}; + +export default ThreadsList; diff --git a/packages/app-akeru/src/app/(dashboard)/threads/page.tsx b/packages/app-akeru/src/app/(dashboard)/threads/page.tsx index 7820600..f09a813 100644 --- a/packages/app-akeru/src/app/(dashboard)/threads/page.tsx +++ b/packages/app-akeru/src/app/(dashboard)/threads/page.tsx @@ -1,9 +1,18 @@ -import React from 'react' +import React from "react"; +import ThreadsList from "./features/thread-list/threads-list"; +import AssistantsList from "./features/assistants-list/assistants-list"; +import ConversationArea from "./features/conversation-area/conversation-area"; const ThreadsPage = () => { return ( -
ThreadsPage
- ) -} +
+
+ + +
+ +
+ ); +}; -export default ThreadsPage \ No newline at end of file +export default ThreadsPage; diff --git a/packages/app-akeru/src/app/components/header.tsx b/packages/app-akeru/src/app/components/header.tsx deleted file mode 100644 index 6aaa5e6..0000000 --- a/packages/app-akeru/src/app/components/header.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' - -const Header = () => { - return ( -
-

Akeru UI

-
- ) -} - -export default Header \ No newline at end of file diff --git a/packages/app-akeru/src/app/features/app-header/header-logo.tsx b/packages/app-akeru/src/app/features/app-header/header-logo.tsx new file mode 100644 index 0000000..feee864 --- /dev/null +++ b/packages/app-akeru/src/app/features/app-header/header-logo.tsx @@ -0,0 +1,13 @@ +import { Sprout } from "lucide-react"; +import React from "react"; + +const HeaderLogo = () => { + return ( +
+ +

Akeru

+
+ ); +}; + +export default HeaderLogo; diff --git a/packages/app-akeru/src/app/features/app-header/header-navbar.tsx b/packages/app-akeru/src/app/features/app-header/header-navbar.tsx new file mode 100644 index 0000000..5e13f92 --- /dev/null +++ b/packages/app-akeru/src/app/features/app-header/header-navbar.tsx @@ -0,0 +1,55 @@ +"use client"; +import { cn } from "@/lib/utils"; +import { Bot, Home, LucideIcon } from "lucide-react"; +import Link from "next/link"; +import { usePathname, useRouter } from "next/navigation"; +import React from "react"; + +interface NavBarItemProps { + name: string; + route: string; + icon: LucideIcon; +} + +const NAVBAR_ITEMS: NavBarItemProps[] = [ + { + name: "Threads", + route: "/threads", + icon: Home, + }, + { + name: "Assistants", + route: "/assistants", + icon: Bot, + }, +]; + +const NavBarItem = (props: NavBarItemProps) => { + const pathName = usePathname(); + + return ( + + {props.name} + + ); +}; + +const HeaderNavBar = () => { + return ( + + ); +}; + +export default HeaderNavBar; diff --git a/packages/app-akeru/src/app/features/app-header/header-profile.tsx b/packages/app-akeru/src/app/features/app-header/header-profile.tsx new file mode 100644 index 0000000..453d075 --- /dev/null +++ b/packages/app-akeru/src/app/features/app-header/header-profile.tsx @@ -0,0 +1,9 @@ +import React from "react"; + +const HeaderProfile = () => { + return ( +
+ ); +}; + +export default HeaderProfile; diff --git a/packages/app-akeru/src/app/features/app-header/header.tsx b/packages/app-akeru/src/app/features/app-header/header.tsx new file mode 100644 index 0000000..1b4d74d --- /dev/null +++ b/packages/app-akeru/src/app/features/app-header/header.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import HeaderLogo from "./header-logo"; +import HeaderNavBar from "./header-navbar"; +import HeaderProfile from "./header-profile"; + +const Header = () => { + return ( +
+ +
+ + +
+
+ ); +}; + +export default Header; diff --git a/packages/app-akeru/src/app/layout.tsx b/packages/app-akeru/src/app/layout.tsx index dce03b8..7a28fcf 100644 --- a/packages/app-akeru/src/app/layout.tsx +++ b/packages/app-akeru/src/app/layout.tsx @@ -15,7 +15,7 @@ export default function RootLayout({ }>) { return ( - {children} + {children} ); } diff --git a/packages/app-akeru/src/components/ui/input.tsx b/packages/app-akeru/src/components/ui/input.tsx index 677d05f..fb38f90 100644 --- a/packages/app-akeru/src/components/ui/input.tsx +++ b/packages/app-akeru/src/components/ui/input.tsx @@ -1,25 +1,46 @@ -import * as React from "react" +import * as React from "react"; -import { cn } from "@/lib/utils" +import { LucideIcon } from "lucide-react"; +import { cn } from "@/lib/utils"; export interface InputProps - extends React.InputHTMLAttributes {} + extends React.InputHTMLAttributes { + startIcon?: LucideIcon; + endIcon?: LucideIcon; +} const Input = React.forwardRef( - ({ className, type, ...props }, ref) => { + ({ className, type, startIcon, endIcon, ...props }, ref) => { + const StartIcon = startIcon; + const EndIcon = endIcon; + return ( - + {StartIcon && ( +
+ +
+ )} + + {EndIcon && ( +
+ +
)} - ref={ref} - {...props} - /> - ) - } -) -Input.displayName = "Input" + + ); + }, +); +Input.displayName = "Input"; -export { Input } +export { Input }; diff --git a/packages/app-akeru/src/components/ui/popover.tsx b/packages/app-akeru/src/components/ui/popover.tsx new file mode 100644 index 0000000..a0ec48b --- /dev/null +++ b/packages/app-akeru/src/components/ui/popover.tsx @@ -0,0 +1,31 @@ +"use client" + +import * as React from "react" +import * as PopoverPrimitive from "@radix-ui/react-popover" + +import { cn } from "@/lib/utils" + +const Popover = PopoverPrimitive.Root + +const PopoverTrigger = PopoverPrimitive.Trigger + +const PopoverContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( + + + +)) +PopoverContent.displayName = PopoverPrimitive.Content.displayName + +export { Popover, PopoverTrigger, PopoverContent } diff --git a/packages/app-akeru/src/components/ui/scroll-area.tsx b/packages/app-akeru/src/components/ui/scroll-area.tsx new file mode 100644 index 0000000..0b4a48d --- /dev/null +++ b/packages/app-akeru/src/components/ui/scroll-area.tsx @@ -0,0 +1,48 @@ +"use client" + +import * as React from "react" +import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area" + +import { cn } from "@/lib/utils" + +const ScrollArea = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + {children} + + + + +)) +ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName + +const ScrollBar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, orientation = "vertical", ...props }, ref) => ( + + + +)) +ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName + +export { ScrollArea, ScrollBar } diff --git a/packages/app-akeru/src/components/ui/separator.tsx b/packages/app-akeru/src/components/ui/separator.tsx new file mode 100644 index 0000000..12d81c4 --- /dev/null +++ b/packages/app-akeru/src/components/ui/separator.tsx @@ -0,0 +1,31 @@ +"use client" + +import * as React from "react" +import * as SeparatorPrimitive from "@radix-ui/react-separator" + +import { cn } from "@/lib/utils" + +const Separator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>( + ( + { className, orientation = "horizontal", decorative = true, ...props }, + ref + ) => ( + + ) +) +Separator.displayName = SeparatorPrimitive.Root.displayName + +export { Separator }