From dfb70e7b51259ed0da8c716f2ec7a1bbfe9868e7 Mon Sep 17 00:00:00 2001
From: Jesse Pinho <jesse@jessepinho.com>
Date: Thu, 16 May 2024 09:57:52 -0700
Subject: [PATCH] Extract a <GradientHeader /> component

---
 .../src/components/shared/edu-panels/edu-info-card.tsx    | 5 ++---
 .../src/components/swap/dutch-auction/auctions.tsx        | 7 ++++---
 .../src/components/swap/swap/unclaimed-swaps.tsx          | 5 ++---
 packages/ui/components/ui/gradient-header.tsx             | 8 ++++++++
 4 files changed, 16 insertions(+), 9 deletions(-)
 create mode 100644 packages/ui/components/ui/gradient-header.tsx

diff --git a/apps/minifront/src/components/shared/edu-panels/edu-info-card.tsx b/apps/minifront/src/components/shared/edu-panels/edu-info-card.tsx
index 6ef6b0ee71..6616665029 100644
--- a/apps/minifront/src/components/shared/edu-panels/edu-info-card.tsx
+++ b/apps/minifront/src/components/shared/edu-panels/edu-info-card.tsx
@@ -1,5 +1,6 @@
 import { Card } from '@penumbra-zone/ui/components/ui/card';
 import { cn } from '@penumbra-zone/ui/lib/utils';
+import { GradientHeader } from '@penumbra-zone/ui/components/ui/gradient-header';
 import { EduPanel, eduPanelContent } from './content';
 
 interface HelperCardProps {
@@ -14,9 +15,7 @@ export const EduInfoCard = ({ src, label, className, content }: HelperCardProps)
     <Card gradient className={cn('p-5 row-span-1', className)}>
       <div className='flex gap-2'>
         <img src={src} alt='icons' className='size-[30px] md:size-8' />
-        <p className='bg-text-linear bg-clip-text font-headline text-xl font-semibold leading-[30px] text-transparent md:text-2xl md:font-bold md:leading-9'>
-          {label}
-        </p>
+        <GradientHeader>{label}</GradientHeader>
       </div>
       <p className='mt-4 text-muted-foreground md:mt-2'>{eduPanelContent[content]}</p>
     </Card>
diff --git a/apps/minifront/src/components/swap/dutch-auction/auctions.tsx b/apps/minifront/src/components/swap/dutch-auction/auctions.tsx
index 0dc38a76cf..cfc9eeb2e7 100644
--- a/apps/minifront/src/components/swap/dutch-auction/auctions.tsx
+++ b/apps/minifront/src/components/swap/dutch-auction/auctions.tsx
@@ -7,6 +7,7 @@ import {
 } from '@buf/penumbra-zone_penumbra.bufbuild_es/penumbra/core/asset/v1/asset_pb';
 import { useStoreShallow } from '../../../utils/use-store-shallow';
 import { bech32mAssetId } from '@penumbra-zone/bech32m/passet';
+import { GradientHeader } from '@penumbra-zone/ui/components/ui/gradient-header';
 
 const getMetadata = (metadataByAssetId: Record<string, Metadata>, assetId?: AssetId) => {
   let metadata: Metadata | undefined;
@@ -30,9 +31,9 @@ export const Auctions = () => {
 
   return (
     <>
-      <p className='mb-2 bg-text-linear bg-clip-text font-headline text-xl font-semibold leading-[30px] text-transparent md:text-2xl md:font-bold md:leading-9'>
-        My auctions
-      </p>
+      <div className='mb-2'>
+        <GradientHeader>My Auctions</GradientHeader>
+      </div>
 
       <div className='flex flex-col gap-2'>
         {!auctionInfos.length && "You don't currently have any auctions running."}
diff --git a/apps/minifront/src/components/swap/swap/unclaimed-swaps.tsx b/apps/minifront/src/components/swap/swap/unclaimed-swaps.tsx
index 5401445913..a93a9f955f 100644
--- a/apps/minifront/src/components/swap/swap/unclaimed-swaps.tsx
+++ b/apps/minifront/src/components/swap/swap/unclaimed-swaps.tsx
@@ -7,6 +7,7 @@ import { useStore } from '../../../state';
 import { unclaimedSwapsSelector } from '../../../state/unclaimed-swaps';
 import { getSwapRecordCommitment } from '@penumbra-zone/getters/swap-record';
 import { uint8ArrayToBase64 } from '@penumbra-zone/types/base64';
+import { GradientHeader } from '@penumbra-zone/ui/components/ui/gradient-header';
 
 export const UnclaimedSwaps = () => {
   const { unclaimedSwaps } = useLoaderData() as SwapLoaderResponse;
@@ -27,9 +28,7 @@ const _UnclaimedSwaps = ({ unclaimedSwaps }: { unclaimedSwaps: UnclaimedSwapsWit
 
   return (
     <Card className='order-1 md:order-3 xl:order-1'>
-      <p className='bg-text-linear bg-clip-text font-headline text-xl font-semibold leading-[30px] text-transparent md:text-2xl md:font-bold md:leading-9'>
-        Unclaimed Swaps
-      </p>
+      <GradientHeader>Unclaimed Swaps</GradientHeader>
       <p className='text-gray-400'>
         Swaps on Penumbra are a two step process. The first transaction issues the request and the
         second claims the result of the swap action. For some reason, these second transactions were
diff --git a/packages/ui/components/ui/gradient-header.tsx b/packages/ui/components/ui/gradient-header.tsx
new file mode 100644
index 0000000000..2969453c9f
--- /dev/null
+++ b/packages/ui/components/ui/gradient-header.tsx
@@ -0,0 +1,8 @@
+/**
+ * A header with text whose color is a gradient of brand colors.
+ */
+export const GradientHeader = ({ children }: { children: string }) => (
+  <p className='bg-text-linear bg-clip-text font-headline text-xl font-semibold leading-[30px] text-transparent md:text-2xl md:font-bold md:leading-9'>
+    {children}
+  </p>
+);