feat: type tab

RSSNext · Apr 11, 2024 · 4a42565 · 4a42565
1 parent 4b7806c
commit 4a42565
Show file tree

Hide file tree

Showing 8 changed files with 634 additions and 87 deletions.
diff --git a/package.json b/package.json
@@ -23,11 +23,11 @@
   "dependencies": {
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
+    "@radix-ui/react-tabs": "1.0.4",
+    "@radix-ui/react-tooltip": "1.0.7",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.0",
     "electron-updater": "^6.1.7",
-    "lucide-react": "0.366.0",
-    "react-resizable-panels": "2.0.16",
     "react-router-dom": "6.22.3",
     "tailwind-merge": "2.2.2",
     "tailwindcss-animate": "1.0.7"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/renderer/src/assets/base.css b/src/renderer/src/assets/base.css
@@ -1,6 +1,7 @@
 body, #root {
-  height: 100vh;
-  user-select: none;
+  @apply h-screen;
+  @apply text-zinc-800;
+  @apply cursor-default;
 }
 
 .drag-region {

diff --git a/src/renderer/src/components/type-tab.tsx b/src/renderer/src/components/type-tab.tsx
@@ -0,0 +1,60 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@renderer/components/ui/tooltip"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@renderer/components/ui/tabs"
+
+export function TypeTab() {
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tabs defaultValue="articles">
+        <TabsList className="w-full justify-around text-xl my-2">
+          <TabsTrigger value="articles" className="data-[state=active]:text-indigo-600">
+            <Tooltip>
+              <TooltipTrigger><i className="i-mingcute-news-fill" /></TooltipTrigger>
+              <TooltipContent side="bottom">Articles</TooltipContent>
+            </Tooltip>
+          </TabsTrigger>
+          <TabsTrigger value="social-media" className="data-[state=active]:text-sky-600">
+            <Tooltip>
+              <TooltipTrigger><i className="i-mingcute-twitter-fill" /></TooltipTrigger>
+              <TooltipContent side="bottom">Social Media</TooltipContent>
+            </Tooltip>
+          </TabsTrigger>
+          <TabsTrigger value="pictures" className="data-[state=active]:text-green-600">
+            <Tooltip>
+              <TooltipTrigger><i className="i-mingcute-pic-fill" /></TooltipTrigger>
+              <TooltipContent side="bottom">Pictures</TooltipContent>
+            </Tooltip>
+          </TabsTrigger>
+          <TabsTrigger value="videos" className="data-[state=active]:text-red-600">
+            <Tooltip>
+              <TooltipTrigger><i className="i-mingcute-youtube-fill" /></TooltipTrigger>
+              <TooltipContent side="bottom">Videos</TooltipContent>
+            </Tooltip>
+          </TabsTrigger>
+          <TabsTrigger value="audios" className="data-[state=active]:text-purple-600">
+            <Tooltip>
+              <TooltipTrigger><i className="i-mingcute-headphone-fill" /></TooltipTrigger>
+              <TooltipContent side="bottom">Audios</TooltipContent>
+            </Tooltip>
+          </TabsTrigger>
+          <TabsTrigger value="notifications" className="data-[state=active]:text-yellow-600">
+            <Tooltip>
+              <TooltipTrigger><i className="i-mingcute-notification-fill" /></TooltipTrigger>
+              <TooltipContent side="bottom">Notifications</TooltipContent>
+            </Tooltip>
+          </TabsTrigger>
+        </TabsList>
+        <TabsContent value="articles">Articles</TabsContent>
+        <TabsContent value="social-media">Social Media</TabsContent>
+        <TabsContent value="pictures">Pictures</TabsContent>
+        <TabsContent value="videos">Videos</TabsContent>
+        <TabsContent value="audios">Audios</TabsContent>
+        <TabsContent value="notifications">Notifications</TabsContent>
+      </Tabs>
+    </TooltipProvider>
+  )
+}
diff --git a/src/renderer/src/components/ui/resizable.tsx b/src/renderer/src/components/ui/resizable.tsx
diff --git a/src/renderer/src/components/ui/tabs.tsx b/src/renderer/src/components/ui/tabs.tsx
@@ -0,0 +1,53 @@
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@renderer/lib/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 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 data-[state=active]:text-foreground",
+      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 }
diff --git a/src/renderer/src/components/ui/tooltip.tsx b/src/renderer/src/components/ui/tooltip.tsx
@@ -0,0 +1,28 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@renderer/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    )}
+    {...props}
+  />
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
diff --git a/src/renderer/src/pages/index.tsx b/src/renderer/src/pages/index.tsx
@@ -1,17 +1,13 @@
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@renderer/components/ui/resizable"
+import { TypeTab } from '@renderer/components/type-tab'
 
 export function Component() {
   return (
-    <>
-      <ResizablePanelGroup direction="horizontal">
-        <ResizablePanel>One</ResizablePanel>
-        <ResizableHandle withHandle />
-        <ResizablePanel>Two</ResizablePanel>
-      </ResizablePanelGroup>
-    </>
+    <div className="flex h-full">
+      <div className="w-80 pt-10 px-3 border-r shrink-0">
+        <TypeTab />
+      </div>
+      <div className="w-80 pt-10 px-5 border-r shrink-0">Two</div>
+      <div className="flex-1 pt-10 px-5">Three</div>
+    </div>
   )
 }