avatar component

frontend/components/dashboard/shared.tsx

@@ -11,6 +11,7 @@ import {
 import Image from "next/image"
 import Button from "../ui/customButton"
 import { ChevronRight } from "lucide-react"
+import Avatar from "../ui/avatar"
 
 export default function DashboardSharedWithMe({
   sandboxes,
@@ -51,7 +52,7 @@ export default function DashboardSharedWithMe({
                 </TableCell>
                 <TableCell>
                   <div className="flex items-center">
-                    <div className="h-5 w-5 bg-red-500 rounded-full mr-2" />
+                    <Avatar name="Ishaan Dey" className="mr-2" />
                     Ishaan Dey
                   </div>
                 </TableCell>

frontend/components/editor/navbar/share.tsx

@@ -33,6 +33,7 @@ import { Loader2, UserPlus, X } from "lucide-react"
 import { useState } from "react"
 import { Sandbox } from "@/lib/types"
 import { Button } from "@/components/ui/button"
+import Avatar from "@/components/ui/avatar"
 
 const formSchema = z.object({
   email: z.string().email(),
@@ -107,12 +108,12 @@ export default function ShareSandboxModal({
         <div className="w-full h-[1px] bg-border" />
         <div className="p-6 pt-3">
           <DialogHeader className="mb-6">
-            <DialogTitle>Share Sandbox</DialogTitle>
+            <DialogTitle>Manage Access</DialogTitle>
           </DialogHeader>
           <div className="space-y-2">
             <div className="flex items-center justify-between">
               <div className="flex items-center">
-                <div className="h-5 w-5 bg-red-500 rounded-full mr-2" />
+                <Avatar name="Ishaan Dey" className="mr-2" />
                 Ishaan Dey
               </div>
               <Button variant="ghost" size="smIcon">

frontend/components/ui/avatar.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils"
+
+export default function Avatar({
+  name,
+  className,
+}: {
+  name: string
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        className,
+        "w-5 h-5 font-mono rounded-full overflow-hidden bg-gradient-to-t from-neutral-800 to-neutral-600 flex items-center justify-center text-[0.5rem] font-medium"
+      )}
+    >
+      {name
+        .split(" ")
+        .slice(0, 2)
+        .map((letter) => letter[0].toUpperCase())}
+    </div>
+  )
+}