👛🫔 ↝ [SSC-60 SSC-64]: Dicebear post avatars

Signal-K · Jan 11, 2025 · bde1ae8 · bde1ae8
1 parent d310b01
commit bde1ae8
Show file tree

Hide file tree

Showing 5 changed files with 563 additions and 9 deletions.
diff --git a/app/tests/page.tsx b/app/tests/page.tsx
@@ -1,13 +1,40 @@
 "use client";
 
 import PlanetFour from "@/components/Structures/Missions/Astronomers/SatellitePhotos/P4/PlanetFour";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
+
+interface Props {
+  author: string;
+}
+
+export const AvatarGenerator: React.FC<Props> = ({ author }) => {
+  const [avatarUrl, setAvatarUrl] = useState("");
+
+  useEffect(() => {
+    const generateAvatar = () => {
+      const apiUrl = `https://api.dicebear.com/6.x/bottts/svg?seed=${encodeURIComponent(author)}`;
+      setAvatarUrl(apiUrl);
+    };
+
+    generateAvatar();
+  }, [author]);
+
+  return (
+    <div>
+      {avatarUrl && (
+        <div className="mt-6">
+          <img src={avatarUrl} alt="Generated Avatar" className="w-16 h-16 rounded-md shadow-md" />
+        </div>
+      )}
+    </div>
+  );
+};
 
 export default function TestPage() {
     return (
         // <StarnetLayout>
           <>
-            <PlanetFour />
+            {/* <PlanetFour /> */}
           </>
         // {/* </StarnetLayout> */}
     );

diff --git a/content/Posts/PostSingle.tsx b/content/Posts/PostSingle.tsx
@@ -9,6 +9,7 @@ import { ThumbsUp, MessageSquare, Share2 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { useSession, useSupabaseClient } from "@supabase/auth-helpers-react";
 import { CommentCard } from "../Comments/CommentSingle";
+import { AvatarGenerator } from "@/app/tests/page";
 
 interface CommentProps {
   id: number;
@@ -185,8 +186,9 @@ export function PostCardSingle({
           <CardHeader>
             <div className="flex items-center space-x-4">
               <Avatar>
-                <AvatarImage src={`https://api.dicebear.com/6.x/initials/svg?seed=${author}`} />
+                <AvatarImage src={`https://api.dicebear.com/6.x/bottts/svg?seed=${encodeURIComponent(author)}`} />
                 <AvatarFallback>{author[0]}</AvatarFallback>
+                <AvatarGenerator author={author} />
               </Avatar>
               <div>
                 <CardTitle>{title}</CardTitle>

diff --git a/content/Posts/SimplePostSingle.tsx b/content/Posts/SimplePostSingle.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import StructuresOnPlanet from '@/components/Structures/Structures';
+import { AvatarGenerator } from '@/app/tests/page';
 
 interface SimplePostSingleProps {
   title: string;
@@ -35,10 +36,7 @@ export function SimplePostSingle({
       <Card className="w-full max-w-lg bg-white/30 backdrop-blur-md border border-white/10 shadow-lg rounded-lg">
         <CardHeader>
           <div className="flex items-center space-x-4">
-            <Avatar>
-              <AvatarImage src={`https://api.dicebear.com/6.x/initials/svg?seed=${author}`} />
-              <AvatarFallback>{author[0]}</AvatarFallback>
-            </Avatar>
+            <AvatarGenerator author={author} />
             <div>
               <CardTitle>{title}</CardTitle>
               <p className="text-sm text-muted-foreground">by {author}</p>

diff --git a/package.json b/package.json
@@ -12,6 +12,9 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^3.2.3",
+    "@dicebear/collection": "^9.2.2",
+    "@dicebear/converter": "^9.2.2",
+    "@dicebear/core": "^9.2.2",
     "@headlessui/react": "^2.2.0",
     "@hello-pangea/dnd": "^16.5.0",
     "@radix-ui/react-accordion": "^1.2.0",