feat: view selector as radio

RSSNext · Jul 29, 2024 · 7d0c10b · 7d0c10b
1 parent 26c2288
commit 7d0c10b
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/src/renderer/src/components/ui/card.tsx b/src/renderer/src/components/ui/card.tsx
@@ -8,7 +8,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "rounded-lg border bg-card text-card-foreground",
       className,
     )}
     {...props}

diff --git a/src/renderer/src/constants/tabs.tsx b/src/renderer/src/constants/tabs.tsx
@@ -5,13 +5,15 @@ export const views = [
     name: "Articles",
     icon: <i className="i-mgc-paper-cute-fi" />,
     className: "text-orange-600",
+    peerClassName: "peer-checked:text-orange-600",
     translation: "title,description",
     view: FeedViewType.Articles,
   },
   {
     name: "Social Media",
     icon: <i className="i-mgc-twitter-cute-fi" />,
     className: "text-sky-600",
+    peerClassName: "peer-checked:text-sky-600",
     wideMode: true,
     translation: "description",
     view: FeedViewType.SocialMedia,
@@ -20,6 +22,7 @@ export const views = [
     name: "Pictures",
     icon: <i className="i-mgc-pic-cute-fi" />,
     className: "text-green-600",
+    peerClassName: "peer-checked:text-green-600",
     gridMode: true,
     wideMode: true,
     translation: "title",
@@ -29,6 +32,7 @@ export const views = [
     name: "Videos",
     icon: <i className="i-mgc-video-cute-fi" />,
     className: "text-red-600",
+    peerClassName: "peer-checked:text-red-600",
     gridMode: true,
     wideMode: true,
     translation: "title",
@@ -38,13 +42,15 @@ export const views = [
     name: "Audios",
     icon: <i className="i-mgc-mic-cute-fi" />,
     className: "text-purple-600",
+    peerClassName: "peer-checked:text-purple-600",
     translation: "title",
     view: FeedViewType.Audios,
   },
   {
     name: "Notifications",
     icon: <i className="i-mgc-announcement-cute-fi" />,
     className: "text-yellow-600",
+    peerClassName: "peer-checked:text-yellow-600",
     translation: "title",
     view: FeedViewType.Notifications,
   },

diff --git a/src/renderer/src/modules/discover/feed-form.tsx b/src/renderer/src/modules/discover/feed-form.tsx
@@ -15,13 +15,8 @@ import {
 } from "@renderer/components/ui/form"
 import { LoadingCircle } from "@renderer/components/ui/loading"
 import { useCurrentModal } from "@renderer/components/ui/modal"
-import {
-  Select,
-  SelectTrigger,
-  SelectValue,
-} from "@renderer/components/ui/select"
 import { Switch } from "@renderer/components/ui/switch"
-import { ViewSelectContent } from "@renderer/components/view-select-content"
+import { views } from "@renderer/constants"
 import { useDeleteSubscription } from "@renderer/hooks/biz/useSubscriptionActions"
 import { useAuthQuery } from "@renderer/hooks/common"
 import { apiClient } from "@renderer/lib/api-fetch"
@@ -204,17 +199,28 @@ export const FeedForm: Component<{
                   <FormField
                     control={form.control}
                     name="view"
-                    render={({ field }) => (
+                    render={() => (
                       <FormItem>
                         <FormLabel>View</FormLabel>
-                        <Select onValueChange={field.onChange} value={field.value}>
-                          <FormControl>
-                            <SelectTrigger>
-                              <SelectValue />
-                            </SelectTrigger>
-                          </FormControl>
-                          <ViewSelectContent />
-                        </Select>
+                        <Card>
+                          <CardHeader className="grid grid-cols-6 space-y-0 px-2 py-3">
+                            {views.map((view) => (
+                              <div key={view.name}>
+                                <input
+                                  className="peer hidden"
+                                  type="radio"
+                                  id={view.name}
+                                  value={view.view}
+                                  {...form.register("view")}
+                                />
+                                <label htmlFor={view.name} className={cn(view.peerClassName, "center flex h-10 flex-col text-xs leading-none text-theme-vibrancyFg")}>
+                                  <span className="text-lg">{view.icon}</span>
+                                  {view.name}
+                                </label>
+                              </div>
+                            ))}
+                          </CardHeader>
+                        </Card>
                         <FormMessage />
                       </FormItem>
                     )}