Merge branch 'preview'

pdelfan · Feb 13, 2024 · 6e9aa2b · 6e9aa2b
2 parents eaeca99 + 40cd1f3
commit 6e9aa2b
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 57 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@tanstack/react-query": "^5.17.19",

diff --git a/src/components/contentDisplay/searchList/SearchList.tsx b/src/components/contentDisplay/searchList/SearchList.tsx
@@ -4,6 +4,8 @@ import { useState } from "react";
 import PostSearchContainer from "@/containers/search/PostSearchContainer";
 import UserSearchContainer from "@/containers/search/UserSearchContainer";
 import { useSession } from "next-auth/react";
+import Tabs from "@/components/navigational/tabs/Tabs";
+import TabItem from "@/components/navigational/tabs/TabItem";
 
 interface Props {
   query: string;
@@ -27,35 +29,22 @@ export default function SearchList(props: Props) {
   };
 
   return (
-    <section className="mt-5">
-      <div
-        role="tablist"
-        aria-orientation="horizontal"
-        className="no-scrollbar flex flex-nowrap gap-3 overflow-auto px-3 md:px-0"
-      >
-        <button
-          role="tab"
+    <section>
+      <Tabs>
+        <TabItem
+          asButton
           onClick={() => handleTabChange("posts")}
-          className={`border-b-3 hover:text-primary shrink-0 cursor-pointer px-3 pb-2 font-semibold ${
-            currentTab === "posts"
-              ? "border-primary-600 text-primary border-primary"
-              : "border-transparent text-neutral-500"
-          }`}
-        >
-          Posts
-        </button>
-        <button
-          role="tab"
+          label="Posts"
+          isActive={currentTab === "posts"}
+        />
+
+        <TabItem
+          asButton
           onClick={() => handleTabChange("users")}
-          className={`border-b-3 hover:text-primary shrink-0 cursor-pointer px-3 pb-2 font-semibold ${
-            currentTab === "users"
-              ? "border-primary-600 text-primary border-primary"
-              : "border-transparent text-neutral-500"
-          }`}
-        >
-          Users
-        </button>
-      </div>
+          label="Users"
+          isActive={currentTab === "users"}
+        />
+      </Tabs>
 
       {currentTab === "posts" && (
         <PostSearchContainer query={onSearchPost(query)} />

diff --git a/src/components/navigational/tabs/TabItem.tsx b/src/components/navigational/tabs/TabItem.tsx
@@ -3,18 +3,38 @@ import Link from "next/link";
 
 interface Props {
   label: string;
-  path: string | Url;
+  path?: string | Url;
   isActive: boolean;
+  asButton?: boolean;
+  onClick?: () => void;
 }
 
 export default function TabItem(props: Props) {
-  const { label, path, isActive } = props;
+  const { label, path, isActive, asButton, onClick } = props;
+
+  if (asButton) {
+    return (
+      <button
+        onClick={onClick}
+        role="tab"
+        aria-aria-selected={isActive}
+        className={`border-b-3 hover:text-primary inline-block shrink-0 p-3 font-semibold ${
+          isActive
+            ? "border-primary-600 text-primary border-primary"
+            : "border-transparent text-neutral-500"
+        }`}
+      >
+        {label}
+      </button>
+    );
+  }
 
   return (
     <Link
-      href={path}
+      href={path ?? ""}
       role="tab"
-      className={`inline-block shrink-0 border-b-3 p-3 first:ml-3 last:mr-3 font-semibold hover:text-primary ${
+      aria-aria-selected={isActive}
+      className={`border-b-3 hover:text-primary inline-block shrink-0 p-3 font-semibold first:ml-3 last:mr-3 ${
         isActive
           ? "border-primary-600 text-primary border-primary"
           : "border-transparent text-neutral-500"

diff --git a/src/components/navigational/tabs/Tabs.tsx b/src/components/navigational/tabs/Tabs.tsx
@@ -1,17 +1,21 @@
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+
 interface Props {
   children: React.ReactNode;
+  className?: string;
 }
 
 export default function Tabs(props: Props) {
-  const { children } = props;
+  const { children, className } = props;
 
   return (
-    <div
-      role="tablist"
-      aria-orientation="horizontal"
-      className="flex flex-nowrap gap-3 overflow-x-scroll"
-    >
-      {children}
-    </div>
+    <ScrollArea.Root role="tablist">
+      <div className={`flex flex-nowrap overflow-x-auto ${className}`}>
+        {children}
+      </div>
+      <ScrollArea.Scrollbar orientation="horizontal">
+        <ScrollArea.Thumb />
+      </ScrollArea.Scrollbar>
+    </ScrollArea.Root>
   );
 }
diff --git a/src/containers/notifications/NotificationsContainer.tsx b/src/containers/notifications/NotificationsContainer.tsx
@@ -3,6 +3,8 @@
 import { useState } from "react";
 import FilteredNotificationsContainer from "./FilteredNotificationsContainer";
 import { NOTIFICATION_FILTER } from "@/lib/consts/notification";
+import Tabs from "@/components/navigational/tabs/Tabs";
+import TabItem from "@/components/navigational/tabs/TabItem";
 
 export default function NotificationsContainer() {
   const [currentTab, setCurrentTab] = useState<"all" | NotificationReason>(
@@ -15,26 +17,17 @@ export default function NotificationsContainer() {
 
   return (
     <section>
-      <div
-        role="tablist"
-        aria-orientation="horizontal"
-        className="no-scrollbar mt-5 flex flex-nowrap gap-3 overflow-auto px-3 md:px-0"
-      >
+      <Tabs>
         {NOTIFICATION_FILTER.map((type) => (
-          <button
+          <TabItem
             key={type.label}
-            role="tab"
+            asButton
             onClick={() => handleTabChange(type.value)}
-            className={`border-b-3 hover:text-primary shrink-0 cursor-pointer px-3 pb-2 font-semibold ${
-              currentTab === type.value
-                ? "border-primary-600 text-primary border-primary"
-                : "border-transparent text-neutral-500"
-            }`}
-          >
-            {type.label}
-          </button>
+            label={type.label}
+            isActive={currentTab === type.value}
+          />
         ))}
-      </div>
+      </Tabs>
       <FilteredNotificationsContainer filter={currentTab} />
     </section>
   );

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -20,12 +20,12 @@
 @layer utilities {
     /* hide scrollbar for Chrome, Safari and Opera */
     .no-scrollbar::-webkit-scrollbar {
-        display: none;
+        width: 0px;
+        height: 0px;
     }
 
     /* hide scrollbar for IE, Edge and Firefox */
     .no-scrollbar {
-        -ms-overflow-style: none; /* IE and Edge */
         scrollbar-width: none; /* Firefox */
     }
 }