feat: user card in feed column

RSSNext · Apr 27, 2024 · cbb2496 · cbb2496
1 parent 3dcf86f
commit cbb2496
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 14 deletions.
diff --git a/src/renderer/src/components/feed-column/index.tsx b/src/renderer/src/components/feed-column/index.tsx
@@ -11,6 +11,7 @@ import { cn, clamp } from "@renderer/lib/utils"
 import { m, useSpring } from "framer-motion"
 import { FeedList } from "./list"
 import { ActivedList } from "@renderer/lib/types"
+import { UserButton } from "@renderer/components/user-button"
 
 const lethargy = new Lethargy()
 
@@ -101,6 +102,9 @@ export function FeedColumn({
         })
       }
     >
+      <div className="flex justify-center py-2 mx-3 my-2 rounded-xl font-medium cursor-pointer bg-stone-300 text-zinc-600">
+        <UserButton className="h-8" />
+      </div>
       <div className="flex text-zinc-500 w-full justify-between text-xl my-2 px-5">
         <TooltipProvider delayDuration={300}>
           {items.map((item, index) => (
@@ -139,14 +143,6 @@ export function FeedColumn({
           ))}
         </m.div>
       </div>
-      <a
-        href={`${import.meta.env.VITE_ELECTRON_REMOTE_URL}/login`}
-        target="_blank"
-        className="h-14 flex items-center justify-center gap-1 rounded-xl m-2 bg-zinc-100 font-medium cursor-pointer"
-      >
-        <i className="i-mingcute-emoji-2-line text-xl" />
-        <span className="text-lg">Log in</span>
-      </a>
     </div>
   )
 }
diff --git a/src/renderer/src/components/user-button.tsx b/src/renderer/src/components/user-button.tsx
@@ -4,18 +4,27 @@ import {
   AvatarImage,
 } from "@renderer/components/ui/avatar"
 import { useSession } from "@hono/auth-js/react"
+import { cn } from "@renderer/lib/utils"
 
-export function UserButton() {
+export function UserButton({ className }: { className?: string }) {
   const { data: session, status } = useSession()
 
   if (status !== "authenticated") {
-    return null
+    return (
+      <div className="flex items-center gap-2">
+        <i className="i-mingcute-emoji-2-line text-xl" />
+        <span className="text-lg">Log in</span>
+      </div>
+    )
   }
 
   return (
-    <Avatar className="size-20">
-      <AvatarImage src={session?.user?.image || undefined} />
-      <AvatarFallback>{session?.user?.name}</AvatarFallback>
-    </Avatar>
+    <div className={cn("h-20 flex items-center gap-2", className)}>
+      <Avatar className="w-auto h-full aspect-square">
+        <AvatarImage src={session?.user?.image || undefined} />
+        <AvatarFallback>{session?.user?.name?.slice(0, 2)}</AvatarFallback>
+      </Avatar>
+      <div>{session?.user?.name}</div>
+    </div>
   )
 }