[ASKRS-10] Brand Setting

package.json

@@ -54,8 +54,9 @@
     "next-themes": "^0.3.0",
     "openai": "^4.47.1",
     "pdf-parse": "^1.1.1",
-    "react": "^18",
-    "react-dom": "^18",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-dropzone": "^14.3.5",
     "react-hook-form": "^7.53.2",
     "react-markdown": "^9.0.1",
     "react-syntax-highlighter": "^15.5.0",

src/app/(admin)/(auth)/layout.tsx

@@ -13,7 +13,7 @@ export default function AdminLayout({
     <div className={`h-screen w-screen ${manrope.className}`}>
       <div className='flex h-full w-full justify-between'>
         {children}
-        <div className='relative h-full w-full flex-[1] bg-dashboardBg'>
+        <div className='relative h-full w-full flex-1 bg-dashboardBg'>
           <AuthCarousel />
         </div>
       </div>

src/app/(admin)/dashboard/_components/DashboardSideBar/DashboardSideBar.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import React, { useState } from 'react'
+import Image from 'next/image'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+
+export default function DashboardSideBar() {
+  const pathname = usePathname()
+  const url = pathname?.split('/')[2] || ''
+
+  const links = [
+    {
+      id: 1,
+      icon: '/assets/brand-settings/bucket.svg',
+      title: 'Brand',
+      url: 'brandsettings',
+    },
+    {
+      id: 2,
+      icon: '/assets/brand-settings/book.svg',
+      title: 'Knowledge base settings',
+      url: 'knowledgebase',
+    },
+  ]
+  return (
+    <div className='h-full w-full flex-[2] bg-dashboardSecondary'>
+      <div className='m-auto h-full w-[90%] pt-5'>
+        <div className='h-[5%]'>
+          <Image src={`/logo/logo.svg`} width={150} height={150} alt='' />
+        </div>
+        <div className='mt-3 flex h-[93%] w-full flex-col justify-between pt-5'>
+          <ul className='flex flex-col space-y-4'>
+            {links.map((item, i) => (
+              <Link href={`/dashboard/${item.url}`} key={i}>
+                <li
+                  className={`flex w-full cursor-pointer space-x-2 rounded-lg p-3 ${item.url === url ? 'bg-dashboardActive' : ''}`}
+                >
+                  <img src={item.icon} alt='' />
+                  <span>{item.title}</span>
+                </li>
+              </Link>
+            ))}
+          </ul>
+          <div className='flex items-center justify-between space-x-2 border-t-2 border-solid border-dashboardBorder p-3'>
+            <div className='h-11 w-11'>
+              <Avatar>
+                <AvatarImage src='/assets/Avatar.png' />
+                <AvatarFallback>CN</AvatarFallback>
+              </Avatar>
+            </div>
+            <div className='flex-cl flex flex-col text-base'>
+              <span className='font-semibold'>Admin</span>
+              <span className='text-base text-gray-600'>admin@ripeseed.io</span>
+            </div>
+            <div>
+              <Image src={`/assets/icon.svg`} width={30} height={30} alt='' />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}