Merge pull request #74 from Obiajulu-gif/codex/add-creator-share-supply-row

Add creator share supply stat row

Author: Chucks1093

src/components/common/CreatorCard.tsx

@@ -16,6 +16,7 @@ import TransactionStatusIcon from '@/components/common/TransactionStatusIcon';
 import MiniStatChip from '@/components/common/MiniStatChip';
 import CreatorListRowDivider from '@/components/common/CreatorListRowDivider';
 import BuyActionHelperText from '@/components/common/BuyActionHelperText';
+import CreatorLabeledStatRow from '@/components/common/CreatorLabeledStatRow';
 
 interface CreatorCardProps {
 	creator: Course;
@@ -105,6 +106,17 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
 				</div>
 				<CreatorListRowDivider className="my-4" />
 				<div className="mt-3 space-y-1.5">
+					<CreatorLabeledStatRow
+						label="Creator Share Supply"
+						value={
+							creator.creatorShareSupply
+								? `${creator.creatorShareSupply} shares`
+								: 'Supply pending'
+						}
+						className="px-3 py-3"
+						labelClassName="text-[0.6rem]"
+						valueClassName="text-sm md:text-sm"
+					/>
 					<CardMetaRow
 						label={
 							<span className="inline-flex items-center gap-1.5">

src/components/common/CreatorLabeledStatRow.tsx

@@ -0,0 +1,49 @@
+import type { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+interface CreatorLabeledStatRowProps {
+	label: ReactNode;
+	value: ReactNode;
+	className?: string;
+	labelClassName?: string;
+	valueClassName?: string;
+}
+
+const CreatorLabeledStatRow: React.FC<CreatorLabeledStatRowProps> = ({
+	label,
+	value,
+	className,
+	labelClassName,
+	valueClassName,
+}) => {
+	return (
+		<div
+			className={cn(
+				'group relative overflow-hidden rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-4 backdrop-blur-md transition-all duration-300 hover:border-amber-500/30 hover:bg-white/[0.06] hover:shadow-[0_8px_30px_rgb(0,0,0,0.12)]',
+				className
+			)}
+		>
+			<div className="absolute inset-0 bg-gradient-to-br from-white/[0.02] to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100" />
+			<div className="relative z-10 flex items-start justify-between gap-4">
+				<div
+					className={cn(
+						'text-[0.65rem] font-bold uppercase tracking-[0.22em] text-white/40 transition-colors duration-300 group-hover:text-amber-200/50',
+						labelClassName
+					)}
+				>
+					{label}
+				</div>
+				<div
+					className={cn(
+						'text-right font-jakarta text-base font-bold text-white md:text-[1.05rem]',
+						valueClassName
+					)}
+				>
+					{value}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default CreatorLabeledStatRow;

src/pages/LandingPage.tsx

@@ -11,6 +11,7 @@ import { UnavailableAction } from '@/components/ui/unavailable-action';
 import SectionHeading from '@/components/common/SectionHeading';
 import CompactSectionSubtitle from '@/components/common/CompactSectionSubtitle';
 import CreatorProfileInfoGrid from '@/components/common/CreatorProfileInfoGrid';
+import CreatorLabeledStatRow from '@/components/common/CreatorLabeledStatRow';
 import MiniStatChip from '@/components/common/MiniStatChip';
 import MarketplaceSection from '@/components/common/MarketplaceSection';
 
@@ -28,6 +29,7 @@ const DEMO_CREATORS: Course[] = [
 		title: 'Alex Rivers',
 		description: 'Digital Artist & Illustrator',
 		price: 0.05,
+		creatorShareSupply: 120,
 		instructorId: 'arivers',
 		category: 'Art',
 		level: 'BEGINNER',
@@ -40,6 +42,7 @@ const DEMO_CREATORS: Course[] = [
 		title: 'Sarah Chen',
 		description: 'Solidity Developer',
 		price: 0.12,
+		creatorShareSupply: 64,
 		instructorId: 'schen_dev',
 		category: 'Tech',
 		level: 'ADVANCED',
@@ -52,6 +55,7 @@ const DEMO_CREATORS: Course[] = [
 		title: 'Marcus Thorne',
 		description: 'Crypto Strategist',
 		price: 0.08,
+		creatorShareSupply: 88,
 		instructorId: 'mthorne',
 		category: 'Finance',
 		level: 'INTERMEDIATE',
@@ -64,6 +68,7 @@ const DEMO_CREATORS: Course[] = [
 		title: 'Elena Vance',
 		description: 'UI/UX Designer',
 		price: 0.04,
+		creatorShareSupply: 150,
 		instructorId: 'evance_design',
 		category: 'Design',
 		level: 'BEGINNER',
@@ -76,6 +81,7 @@ const DEMO_CREATORS: Course[] = [
 		title: 'David Kojo',
 		description: 'Music Producer',
 		price: 0.15,
+		creatorShareSupply: 42,
 		instructorId: 'dkojo_beats',
 		category: 'Music',
 		level: 'ADVANCED',
@@ -88,6 +94,7 @@ const DEMO_CREATORS: Course[] = [
 		title: 'Yuki Sato',
 		description: 'Motion Designer',
 		price: 0.07,
+		creatorShareSupply: 96,
 		instructorId: 'yuki_s',
 		category: 'Design',
 		level: 'INTERMEDIATE',
@@ -246,7 +253,13 @@ function LandingPage() {
 							<MiniStatChip label="Access" value="Member-first drops" />
 						</div>
 					</div>
-					<CreatorProfileInfoGrid items={FEATURED_CREATOR_FACTS} />
+					<div className="space-y-3">
+						<CreatorProfileInfoGrid items={FEATURED_CREATOR_FACTS} />
+						<CreatorLabeledStatRow
+							label="Creator Share Supply"
+							value="250 shares available"
+						/>
+					</div>
 				</MarketplaceSection>
 			</div>
 		</main>

src/services/course.service.ts

@@ -6,6 +6,7 @@ export interface Course {
 	title: string;
 	description: string;
 	price: number;
+	creatorShareSupply?: number;
 	instructorId: string;
 	thumbnail?: string;
 	category: string;