From ed23617b23b32180a8e4e8eeb1781373696620d2 Mon Sep 17 00:00:00 2001
From: Ishaan Dey <ishaan1013@gmail.com>
Date: Tue, 30 Apr 2024 23:34:44 -0400
Subject: [PATCH] avatar component

---
 frontend/components/dashboard/shared.tsx    |  3 ++-
 frontend/components/editor/navbar/share.tsx |  5 +++--
 frontend/components/ui/avatar.tsx           | 23 +++++++++++++++++++++
 3 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 frontend/components/ui/avatar.tsx

diff --git a/frontend/components/dashboard/shared.tsx b/frontend/components/dashboard/shared.tsx
index cceb46d..e74174e 100644
--- a/frontend/components/dashboard/shared.tsx
+++ b/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>
diff --git a/frontend/components/editor/navbar/share.tsx b/frontend/components/editor/navbar/share.tsx
index e49d1b9..4f82b30 100644
--- a/frontend/components/editor/navbar/share.tsx
+++ b/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">
diff --git a/frontend/components/ui/avatar.tsx b/frontend/components/ui/avatar.tsx
new file mode 100644
index 0000000..98767c8
--- /dev/null
+++ b/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>
+  )
+}