style: 💄 add responsive tabs

julianoalvescode · Apr 9, 2024 · ddac836 · ddac836
1 parent 5a3ce1a
commit ddac836
Show file tree

Hide file tree

Showing 5 changed files with 99 additions and 51 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@formkit/auto-animate": "^0.8.1",
     "@radix-ui/react-collapsible": "^1.0.3",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-tabs": "^1.0.4",
     "framer-motion": "^11.0.25",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -18,9 +18,9 @@ export default function RootLayout({
   return (
     <html lang="en" className="antialiased">
       <body className={inter.className}>
-        <div className="grid min-h-screen grid-cols-app">
+        <div className="min-h-screen lg:grid lg:grid-cols-app">
           <Sidebar />
-          <main className="px-4 pb-12 pt-24 lg:col-start-2 lg:px-8 lg:pt-8">
+          <main className="max-w-[100vw] px-4 pb-12 pt-24 lg:col-start-2 lg:px-8 lg:pt-8">
             {children}
           </main>
         </div>

diff --git a/src/components/SettingsTabs/TabItem.tsx b/src/components/SettingsTabs/TabItem.tsx
@@ -17,7 +17,7 @@ export function TabItem({ title, value, isSelected = false }: TabItems) {
         value={value}
         className=":px-1 group relative pb-4 text-sm font-medium text-zinc-500 outline-none hover:text-violet-700 data-[state=active]:text-violet-700"
       >
-        <span className="rounded group-focus-visible:ring-2 group-focus-visible:ring-violet-400 group-focus-visible:ring-offset-4">
+        <span className="whitespace-nowrap rounded group-focus-visible:ring-2 group-focus-visible:ring-violet-400 group-focus-visible:ring-offset-4">
           {title}
         </span>
         {isSelected && (

diff --git a/src/components/SettingsTabs/index.tsx b/src/components/SettingsTabs/index.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import * as Tabs from "@radix-ui/react-tabs";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
 import { TabItem } from "./TabItem";
 import { useState } from "react";
 
@@ -10,54 +11,68 @@ export function SettingsTabs() {
   return (
     <>
       <Tabs.Root value={currentTab} onValueChange={setCurrentTab}>
-        <Tabs.List className="mt-6 flex w-full items-center gap-4 border-b border-zinc-200">
-          <TabItem
-            value="my-details"
-            title="My Details"
-            isSelected={currentTab === "my-details"}
-          />
-          <TabItem
-            value="profile"
-            title="Profile"
-            isSelected={currentTab === "profile"}
-          />
-          <TabItem
-            value="password"
-            title="Password"
-            isSelected={currentTab === "password"}
-          />
-          <TabItem
-            value="team"
-            title="Team"
-            isSelected={currentTab === "team"}
-          />
-          <TabItem
-            value="plan"
-            title="Plan"
-            isSelected={currentTab === "plan"}
-          />
-          <TabItem
-            value="billing"
-            title="Billing"
-            isSelected={currentTab === "billing"}
-          />
-          <TabItem
-            value="email"
-            title="Email"
-            isSelected={currentTab === "email"}
-          />
-          <TabItem
-            value="notifications"
-            title="Notifications"
-            isSelected={currentTab === "notifications"}
-          />
-          <TabItem
-            value="integration"
-            title="Integration"
-            isSelected={currentTab === "integration"}
-          />
-          <TabItem value="apí" title="API" isSelected={currentTab === "apí"} />
-        </Tabs.List>
+        <ScrollArea.Root className="w-full" type="scroll">
+          <ScrollArea.Viewport className="w-full overflow-x-scroll">
+            <Tabs.List className="mt-6 flex w-full items-center gap-4 border-b border-zinc-200">
+              <TabItem
+                value="my-details"
+                title="My Details"
+                isSelected={currentTab === "my-details"}
+              />
+              <TabItem
+                value="profile"
+                title="Profile"
+                isSelected={currentTab === "profile"}
+              />
+              <TabItem
+                value="password"
+                title="Password"
+                isSelected={currentTab === "password"}
+              />
+              <TabItem
+                value="team"
+                title="Team"
+                isSelected={currentTab === "team"}
+              />
+              <TabItem
+                value="plan"
+                title="Plan"
+                isSelected={currentTab === "plan"}
+              />
+              <TabItem
+                value="billing"
+                title="Billing"
+                isSelected={currentTab === "billing"}
+              />
+              <TabItem
+                value="email"
+                title="Email"
+                isSelected={currentTab === "email"}
+              />
+              <TabItem
+                value="notifications"
+                title="Notifications"
+                isSelected={currentTab === "notifications"}
+              />
+              <TabItem
+                value="integration"
+                title="Integration"
+                isSelected={currentTab === "integration"}
+              />
+              <TabItem
+                value="apí"
+                title="API"
+                isSelected={currentTab === "apí"}
+              />
+            </Tabs.List>
+          </ScrollArea.Viewport>
+          <ScrollArea.Scrollbar
+            className="flex h-0.5 translate-y-1.5 touch-none select-none flex-col bg-zinc-100"
+            orientation="horizontal"
+          >
+            <ScrollArea.Thumb className="relative flex-1 rounded-lg bg-zinc-300" />
+          </ScrollArea.Scrollbar>
+        </ScrollArea.Root>
       </Tabs.Root>
     </>
   );