WIP: sidebar

app/chat/@sidebar/main.tsx

@@ -0,0 +1,32 @@
+'use client'
+import Button from '@/components/button'
+import PencilSquare from '@heroicons/react/24/solid/PencilSquareIcon'
+
+const Main = () => {
+  return (
+    <div className='flex flex-col shrink-0 w-40 h-screen bg-gray-100'>
+      <div className='flex items-center w-full h-16 p-4'>
+        <span className='h-8 w-8 mr-3 inline-flex items-center justify-center bg-blue-100 rounded-lg shrink-0'>
+          🤖️
+        </span>
+        <span className='text-gray-800 text-md font-semibold truncate'>
+          Chatbotttttttttt
+        </span>
+      </div>
+      <div className='flex w-full px-4'>
+        <Button
+          text=''
+          type='transparent'
+          onClick={() => {}}
+          className='w-full'
+        >
+          <PencilSquare className='h-4 w-4 mr-2 text-blue-600' />
+          <span className='text-blue-600'>New Chat</span>
+        </Button>
+      </div>
+      <div></div>
+    </div>
+  )
+}
+
+export default Main

app/chat/@sidebar/page.tsx

@@ -1,5 +1,7 @@
+import Main from './main'
+
 const Sidebar = async () => {
-  return <div className='flex shrink-0 w-40 m-h-screen bg-gray-200'></div>
+  return <Main />
 }
 
 export default Sidebar

components/button/index.tsx

@@ -16,20 +16,22 @@ const Button: FC<ButtonProps> = ({
   type = 'blue',
   onClick
 }: ButtonProps) => {
-  return <button
-    onClick={onClick}
-    className={cn(
-      className && className,
-      styles.button,
-      type === 'blue' && styles.blue,
-      type === 'gray' && styles.gray,
-      type === 'red' && styles.red,
-      type === 'white' && styles.white,
-      type === 'transparent' && styles.transparent
-    )}
-  >
-    {children || text}
-  </button>
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        styles.button,
+        type === 'blue' && styles.blue,
+        type === 'gray' && styles.gray,
+        type === 'red' && styles.red,
+        type === 'white' && styles.white,
+        type === 'transparent' && styles.transparent,
+        className && className
+      )}
+    >
+      {children || text}
+    </button>
+  )
 }
 
 export default Button

components/button/style.module.css

@@ -1,5 +1,5 @@
 .button {
-  @apply inline-flex text-xs py-2 px-4 rounded-lg items-center justify-center;
+  @apply inline-flex text-xs py-2 px-4 rounded-lg items-center;
 }
 
 .button.blue {