feat(apps/web/components/thoughts/card): add edit button

apps/web/app/components/thoughts/thought-card.tsx

@@ -1,25 +1,42 @@
-import { User } from 'lucide-react'
+import { User, Pencil } from 'lucide-react'
 import { Card, CardContent, CardHeader } from '@repo/ui/components/card'
+import { Button } from '@repo/ui/components/button'
 
 import type { Thought } from '../../types/thoughts'
 
-export function ThoughtCard({
-  content,
-  author,
-}: Readonly<Pick<Thought, 'content' | 'author'>>) {
+namespace ThoughtCard {
+  export type Props = Readonly<
+    Pick<Thought, 'content' | 'author'> & {
+      currentUserId: string
+    }
+  >
+}
+
+function ThoughtCard({ content, author, currentUserId }: ThoughtCard.Props) {
   return (
     <Card className="flex flex-col gap-2 px-4">
-      <CardHeader className="flex flex-row items-center gap-2">
-        <User />
-        <div>
-          <p className="text-lg">{author.name}</p>
-          <p className="text-muted-foreground text-xs">
-            {new Date(author.createdAt).toLocaleDateString()}
-          </p>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <div className="flex flex-row items-center gap-2">
+          <User />
+
+          <div>
+            <p className="text-lg">{author.name}</p>
+            <p className="text-muted-foreground text-xs">
+              {new Date(author.createdAt).toLocaleDateString()}
+            </p>
+          </div>
         </div>
+
+        {currentUserId === author.id && (
+          <Button variant="outline" className="gap-2" size="icon">
+            <Pencil className="h-4 w-4" />
+          </Button>
+        )}
       </CardHeader>
 
       <CardContent className="text-lg text-neutral-50">{content}</CardContent>
     </Card>
   )
 }
+
+export { ThoughtCard }

apps/web/app/thoughts/page.tsx

@@ -1,7 +1,9 @@
 import { getThoughts } from '../actions/thoughts'
+import { getCurrentUser } from '../actions/users'
 import { CreateThoughtForm, ThoughtCard } from '../components/thoughts'
 
 export default async function ThoughtsPage() {
+  const currentUser = await getCurrentUser()
   const thoughts = await getThoughts()
 
   return (
@@ -17,8 +19,13 @@ export default async function ThoughtsPage() {
           </header>
 
           <div className="flex flex-col gap-2">
-            {thoughts.reverse().map(({ id, content, author }) => (
-              <ThoughtCard key={id} content={content} author={author} />
+            {thoughts.toReversed().map(({ id, content, author }) => (
+              <ThoughtCard
+                key={id}
+                content={content}
+                author={author}
+                currentUserId={currentUser.id}
+              />
             ))}
           </div>
         </section>