designed widget tabs

yashpokar · Mar 29, 2024 · 22b571b · 22b571b
1 parent 70d52bb
commit 22b571b
Show file tree

Hide file tree

Showing 8 changed files with 65 additions and 112 deletions.
diff --git a/apps/ui/index.html b/apps/ui/index.html
@@ -9,7 +9,7 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Inter:[email protected]&display=swap" rel="stylesheet" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/apps/ui/package.json b/apps/ui/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^1.7.18",
+    "@headlessui/tailwindcss": "^0.2.0",
     "@heroicons/react": "^2.1.3",
     "dotenv": "^16.4.5",
     "react": "^18.2.0",

diff --git a/apps/ui/src/App.tsx b/apps/ui/src/App.tsx
@@ -9,7 +9,7 @@ const App: React.FC = () => {
 
   return (
     <div
-      className="flex gap-x-4 p-4 md:gap-x-8 md:p-8 h-screen antialiased font-normal bg-zinc-100 dark:bg-zinc-900"
+      className="flex gap-x-4 p-4 md:gap-x-8 md:p-8 h-screen antialiased font-normal font-display bg-zinc-100 dark:bg-zinc-900"
       data-mode={isDarkMode ? 'dark' : 'light'}
     >
       <div className="flex-1">

diff --git a/apps/ui/src/components/Chat.tsx b/apps/ui/src/components/Chat.tsx
@@ -20,9 +20,12 @@ const Chat: React.FC = () => {
     <div className="flex flex-col w-full h-full rounded-lg bg-zinc-200 dark:bg-zinc-800">
       <div className="flex-1"></div>
 
-      <form className="relative py-2 px-4" onSubmit={onMessageSubmit}>
+      <form
+        className="relative py-2 px-4 lg:py-4 lg:px-6"
+        onSubmit={onMessageSubmit}
+      >
         <textarea
-          className="w-full border-0 resize-none max-h-full rounded-lg text-sm leading-5 tracking-wide font-chat p-2 shadow-none md:p-3.5 bg-zinc-100 placeholder:text-zinc-400 focus:ring-0 dark:bg-zinc-700 dark:text-white"
+          className="w-full border-0 resize-none max-h-full rounded-lg text-sm leading-5 tracking-wide font-chat p-2 shadow-none md:p-3.5 bg-zinc-100 transition placeholder:text-zinc-400 focus:ring-0 focus:bg-opacity-75 dark:bg-zinc-700 dark:text-white"
           placeholder="Your requirements here..."
           data-testid="chat-input"
           onChange={e => setQuery(e.target.value)}
@@ -31,7 +34,7 @@ const Chat: React.FC = () => {
         ></textarea>
 
         <button
-          className="absolute bottom-6 right-6 text-sm py-1.5 px-2.5 rounded-lg font-medium text-zinc-50 bg-green-500"
+          className="absolute bottom-8 right-8 mr-0.5 mb-0.5 text-sm py-1.5 px-2.5 rounded-lg font-medium text-zinc-50 bg-green-500 transition focus:outline-none hover:bg-green-600 focus:bg-green-600"
           type="submit"
         >
           Send

diff --git a/apps/ui/src/components/Navbar.tsx b/apps/ui/src/components/Navbar.tsx
@@ -10,7 +10,7 @@ const Navbar: React.FC = () => {
       <ul className="flex flex-col">
         <li className="">
           <button
-            className="p-0.5 md:p-1 rounded-full hover:bg-zinc-300 dark:hover:bg-zinc-700"
+            className="p-0.5 md:p-1 rounded-full focus:outline-none hover:bg-zinc-300 dark:hover:bg-zinc-700"
             onClick={toggleTheme}
           >
             {isDarkMode ? (

diff --git a/apps/ui/src/components/Widgets.tsx b/apps/ui/src/components/Widgets.tsx
@@ -1,8 +1,45 @@
 import React from 'react'
+import { Tab } from '@headlessui/react'
 
 const Widgets: React.FC = () => {
   return (
-    <div className="w-full h-full rounded-lg bg-zinc-200 dark:bg-zinc-800"></div>
+    <div className="flex flex-col w-full h-full rounded-lg bg-zinc-200 dark:bg-zinc-800">
+      <div className=""></div>
+
+      <div className="flex flex-col flex-1 p-1.5 md:p-2.5 lg:p-6">
+        <Tab.Group>
+          <Tab.List className="flex px-4 gap-x-2 md:gap-x-4 lg:gap-x-8">
+            <Tab className="py-1 md:py-2 lg:py-3 focus:outline-none">
+              <span className="font-semibold text-sm text-zinc-700 dark:text-zinc-400 ui-selected:text-zinc-900 dark:ui-selected:text-zinc-200">
+                Shell
+              </span>
+            </Tab>
+            <Tab className="py-1 md:py-2 lg:py-3 focus:outline-none">
+              <span className="font-semibold text-sm text-zinc-700 dark:text-zinc-400 ui-selected:text-zinc-900 dark:ui-selected:text-zinc-200">
+                Browser
+              </span>
+            </Tab>
+            <Tab className="py-1 md:py-2 lg:py-3 focus:outline-none">
+              <span className="font-semibold text-sm text-zinc-700 dark:text-zinc-400 ui-selected:text-zinc-900 dark:ui-selected:text-zinc-200">
+                Editor
+              </span>
+            </Tab>
+            <Tab className="py-1 md:py-2 lg:py-3 focus:outline-none">
+              <span className="font-semibold text-sm text-zinc-700 dark:text-zinc-400 ui-selected:text-zinc-900 dark:ui-selected:text-zinc-200">
+                Planner
+              </span>
+            </Tab>
+          </Tab.List>
+
+          <Tab.Panels className="border flex-1 rounded-lg border-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-900">
+            <Tab.Panel></Tab.Panel>
+            <Tab.Panel></Tab.Panel>
+            <Tab.Panel></Tab.Panel>
+            <Tab.Panel></Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
+      </div>
+    </div>
   )
 }
 

diff --git a/apps/ui/tailwind.config.js b/apps/ui/tailwind.config.js
@@ -1,5 +1,6 @@
 import typography from '@tailwindcss/typography'
 import form from '@tailwindcss/forms'
+import headlessui from '@headlessui/tailwindcss'
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -8,10 +9,10 @@ export default {
   theme: {
     extend: {
       fontFamily: {
-        chat: ['Poppins', 'sans-serif']
-      },
-      rotate: {}
+        chat: ['Poppins', 'sans-serif'],
+        display: ['Inter', 'sans-serif']
+      }
     }
   },
-  plugins: [typography, form]
+  plugins: [typography, form, headlessui({ prefix: 'ui' })]
 }