feat(PointsRequirement): use Tailwind CSS

guildxyz · Oct 17, 2024 · 610d94e · 610d94e
1 parent 8172aeb
commit 610d94e
Showing 1 changed file with 42 additions and 31 deletions.
diff --git a/src/requirements/Points/PointsRequirement.tsx b/src/requirements/Points/PointsRequirement.tsx
@@ -1,5 +1,5 @@
-import { Link } from "@chakra-ui/next-js"
-import { Skeleton } from "@chakra-ui/react"
+import { Anchor } from "@/components/ui/Anchor"
+import { Skeleton } from "@/components/ui/Skeleton"
 import { GuildReward } from "@guildxyz/types"
 import {
   Requirement,
@@ -12,20 +12,24 @@ import useGuildPlatform from "components/[guild]/hooks/useGuildPlatform"
 import Star from "static/icons/star.svg"
 import useSWRImmutable from "swr/immutable"
 
-const ExternalGuildLink = ({ name, urlName }) => (
+type PointsRequirementTypes = "POINTS_AMOUNT" | "POINTS_TOTAL_AMOUNT" | "POINTS_RANK"
+
+const ExternalGuildLink = ({ name, urlName }: { name: string; urlName: string }) => (
   <>
-    {` in the `}
-    <Skeleton display="inline" isLoaded={!!name}>
-      <Link colorScheme="blue" fontWeight="medium" href={urlName} isExternal>
-        {name ?? "Loading..."}
-      </Link>
-    </Skeleton>
-    {` guild`}
+    <span>{" in the "}</span>
+    {!name ? (
+      <Skeleton className="inline-block h-5 w-40" />
+    ) : (
+      <Anchor href={urlName} variant="highlighted" showExternal target="_blank">
+        {name}
+      </Anchor>
+    )}
+    <span>{" guild"}</span>
   </>
 )
 
 const PointsRank = (props: RequirementProps): JSX.Element => {
-  const requirement = useRequirementContext()
+  const requirement = useRequirementContext<PointsRequirementTypes>()
   const { guildId, minAmount, maxAmount } = requirement.data
   const { name, urlName } = useSimpleGuild(guildId)
   const { id: currentGuildId } = useGuild()
@@ -36,40 +40,45 @@ const PointsRank = (props: RequirementProps): JSX.Element => {
 
   return (
     <Requirement
-      image={pointsReward.platformGuildData.imageUrl ?? <Star />}
+      image={pointsReward.platformGuildData?.imageUrl ?? <Star />}
       {...props}
     >
-      {minAmount
-        ? `Have a rank between ${minAmount} - ${maxAmount} on the `
-        : `Be in the top ${maxAmount ?? ""} members on the `}
-      <Link
-        colorScheme={"blue"}
-        fontWeight={"medium"}
+      <span>
+        {minAmount
+          ? `Have a rank between ${minAmount} - ${maxAmount} on the `
+          : `Be in the top ${maxAmount ?? ""} members on the `}
+      </span>
+      <Anchor
         href={`/${urlName}/leaderboard/${pointsReward.id}`}
-      >{`${pointsReward.platformGuildData.name} leaderboard`}</Link>
+        variant="highlighted"
+        showExternal
+        target="_blank"
+      >{`${pointsReward.platformGuildData?.name ?? "Unknown"} leaderboard`}</Anchor>
       {guildId !== currentGuildId && <ExternalGuildLink {...{ name, urlName }} />}
     </Requirement>
   )
 }
 
 const PointsTotalAmount = (props: RequirementProps): JSX.Element => {
-  const requirement = useRequirementContext()
+  const requirement = useRequirementContext<PointsRequirementTypes>()
   const { guildId, minAmount, maxAmount } = requirement.data
   const { name, urlName } = useSimpleGuild(guildId)
   const { id: currentGuildId } = useGuild()
 
   return (
     <Requirement image={<Star />} {...props}>
-      {maxAmount
-        ? `Have a total score between ${minAmount} - ${maxAmount} summing all point types`
-        : `Have a total score of at least ${minAmount} summing all point types`}
+      <span>
+        {maxAmount
+          ? `Have a total score between ${minAmount} - ${maxAmount} summing all point types`
+          : `Have a total score of at least ${minAmount} summing all point types`}
+      </span>
       {guildId !== currentGuildId && <ExternalGuildLink {...{ name, urlName }} />}
     </Requirement>
   )
 }
 
 const PointsAmount = (props: RequirementProps): JSX.Element => {
-  const requirement = useRequirementContext()
+  const requirement = useRequirementContext<PointsRequirementTypes>()
   const { guildId, minAmount, maxAmount } = requirement.data
   const { name, urlName } = useSimpleGuild(guildId)
   const { id: currentGuildId } = useGuild()
@@ -78,16 +87,18 @@ const PointsAmount = (props: RequirementProps): JSX.Element => {
 
   if (!pointsReward) return <RequirementSkeleton />
 
-  const pointsName = pointsReward.platformGuildData.name || "points"
+  const pointsName = pointsReward.platformGuildData?.name || "points"
 
   return (
     <Requirement
-      image={pointsReward.platformGuildData.imageUrl ?? <Star />}
+      image={pointsReward.platformGuildData?.imageUrl ?? <Star />}
       {...props}
     >
-      {maxAmount
-        ? `Have between ${minAmount} - ${maxAmount} ${pointsName}`
-        : `Have at least ${minAmount} ${pointsName}`}
+      <span>
+        {maxAmount
+          ? `Have between ${minAmount} - ${maxAmount} ${pointsName}`
+          : `Have at least ${minAmount} ${pointsName}`}
+      </span>
       {guildId !== currentGuildId && <ExternalGuildLink {...{ name, urlName }} />}
     </Requirement>
   )
@@ -96,7 +107,7 @@ const PointsAmount = (props: RequirementProps): JSX.Element => {
 const usePointsRewardForCurrentRequirement = () => {
   const {
     data: { guildPlatformId, guildId },
-  } = useRequirementContext()
+  } = useRequirementContext<Exclude<PointsRequirementTypes, "POINTS_TOTAL_AMOUNT">>()
 
   const { id: currentGuildId } = useGuild()
   const { guildPlatform: pointsRewardInCurrentGuild } =
@@ -120,7 +131,7 @@ const types = {
 }
 
 const PointsRequirement = (props: RequirementProps) => {
-  const { type } = useRequirementContext()
+  const { type } = useRequirementContext<PointsRequirementTypes>()
   const Component = types[type]
   return <Component {...props} />
 }