From e9403811c475f7ba384513e4a4cb4a6a43d83699 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 21 Aug 2024 16:28:40 +0200
Subject: [PATCH] feat: add empty cards for contribution

---
 .../profile/_components/EditContributions.tsx   | 11 ++++++++++-
 .../(marketing)/profile/_components/Profile.tsx | 17 ++++++++++++++++-
 2 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/app/(marketing)/profile/_components/EditContributions.tsx b/src/app/(marketing)/profile/_components/EditContributions.tsx
index e428d5c431..cdd64eae56 100644
--- a/src/app/(marketing)/profile/_components/EditContributions.tsx
+++ b/src/app/(marketing)/profile/_components/EditContributions.tsx
@@ -23,7 +23,7 @@ import {
 import { useToast } from "@/components/ui/hooks/useToast"
 import { useYourGuilds } from "@/hooks/useYourGuilds"
 import { Guild, MembershipResult, Role, Schemas } from "@guildxyz/types"
-import { X } from "@phosphor-icons/react"
+import { WarningCircle, X } from "@phosphor-icons/react"
 import { PencilSimple } from "@phosphor-icons/react"
 import { AvatarFallback } from "@radix-ui/react-avatar"
 import { DialogDescription } from "@radix-ui/react-dialog"
@@ -117,6 +117,14 @@ export const EditContributions = () => {
         </DialogHeader>
         <DialogBody className="gap-7">
           <div className="flex flex-col gap-3">
+            {guilds?.length === 0 && (
+              <Card className="flex gap-2 border border-destructive-subtle p-4 text-destructive-subtle">
+                <WarningCircle size={32} weight="fill" />
+                <h3 className="font-medium">
+                  You have no verified guild membership to select from
+                </h3>
+              </Card>
+            )}
             {contributions.data?.slice(0, 3).map((contribution) => (
               <EditContributionCard
                 contribution={contribution}
@@ -132,6 +140,7 @@ export const EditContributions = () => {
               <div className="pb-2">
                 <Label>Guild</Label>
                 <Select
+                  disabled={guilds?.length === 0}
                   onValueChange={(value) => {
                     setGuildId(value)
                     setRoleId("")
diff --git a/src/app/(marketing)/profile/_components/Profile.tsx b/src/app/(marketing)/profile/_components/Profile.tsx
index 6be1abce6a..e3b45ce7f5 100644
--- a/src/app/(marketing)/profile/_components/Profile.tsx
+++ b/src/app/(marketing)/profile/_components/Profile.tsx
@@ -3,9 +3,11 @@
 import { CheckMark } from "@/components/CheckMark"
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/Avatar"
 import { AvatarGroup } from "@/components/ui/AvatarGroup"
+import { Card } from "@/components/ui/Card"
 import { Separator } from "@/components/ui/Separator"
 import { Skeleton } from "@/components/ui/Skeleton"
 import { cn } from "@/lib/utils"
+import { Info } from "@phosphor-icons/react"
 import { PropsWithChildren } from "react"
 import { ContributionCard } from "../_components/ContributionCard"
 import { EditContributions } from "../_components/EditContributions"
@@ -54,7 +56,7 @@ export const Profile = () => {
         </p>
         <div className="mt-8 grid grid-cols-[repeat(3,auto)] gap-x-6 gap-y-4 sm:grid-cols-[repeat(5,auto)]">
           <div className="flex flex-col items-center leading-tight">
-            <div className="font-bold text-lg">{referredUsers.length}</div>
+            <div className="font-bold md:text-lg">{referredUsers.length}</div>
             <div className="text-muted-foreground">Guildmates</div>
           </div>
           <Separator orientation="vertical" className="h-10 md:h-12" />
@@ -81,6 +83,19 @@ export const Profile = () => {
         </ProfileOwnerGuard>
       </div>
       <div className="grid grid-cols-1 gap-3">
+        {contributions.length === 0 && (
+          <Card className="flex gap-2 border border-info p-4">
+            <Info weight="fill" size={32} className="text-info" />
+            <div>
+              <h3 className="mb-1 font-bold text-md">
+                Contributions will appear here
+              </h3>
+              <p className="text-muted-foreground">
+                This profile doesn't have any contribution yet
+              </p>
+            </div>
+          </Card>
+        )}
         {contributions.map((contribution) => (
           <ContributionCard contribution={contribution} key={contribution.id} />
         ))}