feat(SW-353): dynamic rewards

components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx

@@ -0,0 +1,21 @@
+import { Minus } from "react-feather"
+
+import CheckCircle from "@/components/Icons/CheckCircle"
+
+import styles from "./rewardValue.module.css"
+
+import type { RewardValueProps } from "@/types/components/overviewTable"
+
+export default function RewardValue({ reward }: RewardValueProps) {
+  if (!reward) {
+    return <Minus color="var(--UI-Grey-40)" />
+  }
+  if (!reward.value) {
+    return <CheckCircle height={32} width={32} color="green" />
+  }
+  return (
+    <div className={styles.rewardValueContainer}>
+      <span className={styles.rewardValue}>{reward.value}</span>
+    </div>
+  )
+}

components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css

@@ -0,0 +1,19 @@
+.rewardValueContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+  padding: 0 var(--Spacing-x4) 0 var(--Spacing-x4);
+  text-wrap: balance;
+}
+
+.rewardValue {
+  font-size: var(--typography-Body-Bold-fontSize);
+  font-weight: var(--typography-Body-Bold-fontWeight);
+}
+
+.rewardValueDetails {
+  font-size: var(--typography-Footnote-Regular-fontSize);
+  text-align: center;
+  color: var(--UI-Grey-80);
+}