✨ feat：新增频道类型 Tabs 组件

CCNUPracticalTraining-530-2 · Jul 11, 2024 · 5d43b1d · 5d43b1d
1 parent fad8d33
commit 5d43b1d
Show file tree

Hide file tree

Showing 4 changed files with 179 additions and 55 deletions.
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@tanstack/react-query": "^5.51.1",
     "@uploadthing/react": "^6.7.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/common/components/server/server-sidebar.tsx b/src/common/components/server/server-sidebar.tsx
@@ -1,9 +1,22 @@
 import { ChannelType, MemberRole } from '@prisma/client';
-import { Hash, Mic, ShieldCheck, UserCog, Video } from 'lucide-react';
+import {
+  Hash,
+  MessageCircleMore,
+  Mic,
+  ShieldCheck,
+  UserCog,
+  Video,
+} from 'lucide-react';
 import { redirect } from 'next/navigation';
 
 import { ScrollArea } from '@/common/components/ui/scroll-area';
 import { Separator } from '@/common/components/ui/separator';
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/common/components/ui/tabs';
 import { currentProfile } from '@/common/libs/current-profile';
 import { db } from '@/common/libs/db';
 
@@ -127,66 +140,85 @@ export const ServerSidebar = async ({ serverId }: ServerSidebarProps) => {
           />
         </div>
         <Separator className="my-2 rounded-md bg-zinc-200 dark:bg-zinc-700" />
-        {!!textChannels?.length && (
-          <div className="mb-2">
-            <ServerSection
-              sectionType="channels"
-              channelType={ChannelType.TEXT}
-              role={role}
-              label="文字频道"
-            />
-            <div className="space-y-[2px]">
-              {textChannels.map((channel) => (
-                <ServerChannel
-                  key={channel.id}
-                  channel={channel}
+        <Tabs defaultValue="text" className="w-full">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="text">
+              <MessageCircleMore className="mr-2 h-4 w-4" />
+            </TabsTrigger>
+            <TabsTrigger value="audio">
+              <Mic className="mr-2 h-4 w-4" />
+            </TabsTrigger>
+            <TabsTrigger value="video">
+              <Video className="mr-2 h-4 w-4" />
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="text">
+            {!!textChannels?.length && (
+              <div className="mb-2">
+                <ServerSection
+                  sectionType="channels"
+                  channelType={ChannelType.TEXT}
                   role={role}
-                  server={server}
+                  label="文字频道"
                 />
-              ))}
-            </div>
-          </div>
-        )}
-        {!!audioChannels?.length && (
-          <div className="mb-2">
-            <ServerSection
-              sectionType="channels"
-              channelType={ChannelType.AUDIO}
-              role={role}
-              label="语音频道"
-            />
-            <div className="space-y-[2px]">
-              {audioChannels.map((channel) => (
-                <ServerChannel
-                  key={channel.id}
-                  channel={channel}
+                <div className="space-y-[2px]">
+                  {textChannels.map((channel) => (
+                    <ServerChannel
+                      key={channel.id}
+                      channel={channel}
+                      role={role}
+                      server={server}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </TabsContent>
+          <TabsContent value="audio">
+            {!!audioChannels?.length && (
+              <div className="mb-2">
+                <ServerSection
+                  sectionType="channels"
+                  channelType={ChannelType.AUDIO}
                   role={role}
-                  server={server}
+                  label="语音频道"
                 />
-              ))}
-            </div>
-          </div>
-        )}
-        {!!videoChannels?.length && (
-          <div className="mb-2">
-            <ServerSection
-              sectionType="channels"
-              channelType={ChannelType.VIDEO}
-              role={role}
-              label="视讯频道"
-            />
-            <div className="space-y-[2px]">
-              {videoChannels.map((channel) => (
-                <ServerChannel
-                  key={channel.id}
-                  channel={channel}
+                <div className="space-y-[2px]">
+                  {audioChannels.map((channel) => (
+                    <ServerChannel
+                      key={channel.id}
+                      channel={channel}
+                      role={role}
+                      server={server}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </TabsContent>
+          <TabsContent value="video">
+            {!!videoChannels?.length && (
+              <div className="mb-2">
+                <ServerSection
+                  sectionType="channels"
+                  channelType={ChannelType.VIDEO}
                   role={role}
-                  server={server}
+                  label="视讯频道"
                 />
-              ))}
-            </div>
-          </div>
-        )}
+                <div className="space-y-[2px]">
+                  {videoChannels.map((channel) => (
+                    <ServerChannel
+                      key={channel.id}
+                      channel={channel}
+                      role={role}
+                      server={server}
+                    />
+                  ))}
+                </div>
+              </div>
+            )}
+          </TabsContent>
+        </Tabs>
         {!!members?.length && (
           <div className="mb-2">
             <ServerSection

diff --git a/src/common/components/ui/tabs.tsx b/src/common/components/ui/tabs.tsx
@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/common/utils/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }