chore: add empty contribution card

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("")

src/app/(marketing)/profile/_components/Profile.tsx

@@ -54,7 +54,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,9 +81,18 @@ export const Profile = () => {
         </ProfileOwnerGuard>
       </div>
       <div className="grid grid-cols-1 gap-3">
-        {contributions.map((contribution) => (
-          <ContributionCard contribution={contribution} key={contribution.id} />
-        ))}
+        {contributions.length === 0 ? (
+          <div className="space-y-0.5 rounded-2xl border border-dashed p-6">
+            <h3 className="font-bold">Contributions will appear here</h3>
+            <p className="text-muted-foreground">
+              This profile doesn't have any contribution yet
+            </p>
+          </div>
+        ) : (
+          contributions.map((contribution) => (
+            <ContributionCard contribution={contribution} key={contribution.id} />
+          ))
+        )}
       </div>
       <div className="mt-8">
         <SectionTitle className="mb-3">Recent activity</SectionTitle>