feat: add empty cards for contribution (#1447)

guildxyz · Aug 22, 2024 · ce679a7 · ce679a7
1 parent 5c97d88
commit ce679a7
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git 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
@@ -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"
@@ -53,7 +55,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" />
@@ -78,6 +80,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} />
         ))}