From c84f8e4c06ac163d43f1e3d19e53f0a040d05138 Mon Sep 17 00:00:00 2001
From: floxxih <harobedjosh@gmail.com>
Date: Fri, 27 Mar 2026 07:22:24 +0100
Subject: [PATCH] feat: add reusable creator metadata and input state UI

---
 src/components/common/CategoryTag.tsx         |  25 ++
 .../common/CompactEmptyWalletState.tsx        |  33 ++
 src/components/common/CreatorCard.tsx         |  27 +-
 .../common/InlineValidationMessage.tsx        |  27 ++
 src/components/common/SearchBar.tsx           |  32 +-
 src/components/common/VerifiedBadge.tsx       |  33 ++
 src/pages/LandingPage.tsx                     | 324 ++++++++++--------
 src/services/course.service.ts                |   6 +-
 8 files changed, 343 insertions(+), 164 deletions(-)
 create mode 100644 src/components/common/CategoryTag.tsx
 create mode 100644 src/components/common/CompactEmptyWalletState.tsx
 create mode 100644 src/components/common/InlineValidationMessage.tsx
 create mode 100644 src/components/common/VerifiedBadge.tsx

diff --git a/src/components/common/CategoryTag.tsx b/src/components/common/CategoryTag.tsx
new file mode 100644
index 00000000..a1bb1c11
--- /dev/null
+++ b/src/components/common/CategoryTag.tsx
@@ -0,0 +1,25 @@
+import { cn } from '@/lib/utils';
+
+interface CategoryTagProps {
+	label?: string;
+	className?: string;
+}
+
+const CategoryTag: React.FC<CategoryTagProps> = ({
+	label = 'Uncategorized',
+	className,
+}) => {
+	return (
+		<span
+			className={cn(
+				'inline-flex max-w-full items-center rounded-md border border-white/15 bg-white/10 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.12em] text-white/80',
+				className
+			)}
+			title={label}
+		>
+			<span className="truncate">{label}</span>
+		</span>
+	);
+};
+
+export default CategoryTag;
diff --git a/src/components/common/CompactEmptyWalletState.tsx b/src/components/common/CompactEmptyWalletState.tsx
new file mode 100644
index 00000000..b25d5c68
--- /dev/null
+++ b/src/components/common/CompactEmptyWalletState.tsx
@@ -0,0 +1,33 @@
+import { WalletMinimal } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface CompactEmptyWalletStateProps {
+	title?: string;
+	description?: string;
+	className?: string;
+}
+
+const CompactEmptyWalletState: React.FC<CompactEmptyWalletStateProps> = ({
+	title = 'No wallet balance yet',
+	description = 'Connect and fund your wallet to unlock creator key purchases.',
+	className,
+}) => {
+	return (
+		<div
+			className={cn(
+				'flex items-start gap-3 rounded-xl border border-amber-300/25 bg-amber-400/8 p-3 text-left',
+				className
+			)}
+		>
+			<div className="mt-0.5 rounded-lg bg-amber-300/20 p-1.5">
+				<WalletMinimal className="size-4 text-amber-200" />
+			</div>
+			<div>
+				<p className="text-sm font-semibold text-amber-100">{title}</p>
+				<p className="mt-0.5 text-xs text-amber-100/75">{description}</p>
+			</div>
+		</div>
+	);
+};
+
+export default CompactEmptyWalletState;
diff --git a/src/components/common/CreatorCard.tsx b/src/components/common/CreatorCard.tsx
index d36a0c2a..339f2ded 100644
--- a/src/components/common/CreatorCard.tsx
+++ b/src/components/common/CreatorCard.tsx
@@ -7,6 +7,9 @@ import { ShoppingCart, Wallet, Link as LinkIcon } from 'lucide-react';
 import toast from 'react-hot-toast';
 import showToast from '@/utils/toast.util';
 import TransactionRetryNotice from '@/components/common/TransactionRetryNotice';
+import VerifiedBadge from '@/components/common/VerifiedBadge';
+import CategoryTag from '@/components/common/CategoryTag';
+import CompactEmptyWalletState from '@/components/common/CompactEmptyWalletState';
 
 interface CreatorCardProps {
 	creator: Course;
@@ -71,12 +74,21 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
 			</div>
 
 			<div className="mb-4">
-				<h3 className="font-jakarta text-lg font-bold text-white">
-					{creator.title}
-				</h3>
+				<div className="flex items-center gap-2">
+					<h3 className="font-jakarta text-lg font-bold text-white">
+						{creator.title}
+					</h3>
+					<VerifiedBadge
+						verified={Boolean(creator.isVerified)}
+						reserveSpace={true}
+					/>
+				</div>
 				<p className="font-jakarta text-sm text-white/50">
 					@{creator.instructorId || 'creator'}
 				</p>
+				<div className="mt-2">
+					<CategoryTag label={creator.category} />
+				</div>
 				{creator.socialHandle ? (
 					<div className="mt-2 flex items-center gap-1.5 text-xs text-white/60">
 						<LinkIcon className="size-3 text-amber-500/70" />
@@ -116,9 +128,12 @@ const CreatorCard: React.FC<CreatorCardProps> = ({ creator, className }) => {
 			</div>
 
 			{!isConnected && (
-				<div className="mt-3 flex items-center gap-2 text-[10px] font-medium uppercase tracking-widest text-amber-500/70">
-					<Wallet className="size-3" />
-					Wallet Required
+				<div className="mt-4 space-y-3">
+					<div className="flex items-center gap-2 text-[10px] font-medium uppercase tracking-widest text-amber-500/70">
+						<Wallet className="size-3" />
+						Wallet Required
+					</div>
+					<CompactEmptyWalletState />
 				</div>
 			)}
 
diff --git a/src/components/common/InlineValidationMessage.tsx b/src/components/common/InlineValidationMessage.tsx
new file mode 100644
index 00000000..1d120a78
--- /dev/null
+++ b/src/components/common/InlineValidationMessage.tsx
@@ -0,0 +1,27 @@
+import { AlertCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface InlineValidationMessageProps {
+	message: string;
+	className?: string;
+}
+
+const InlineValidationMessage: React.FC<InlineValidationMessageProps> = ({
+	message,
+	className,
+}) => {
+	return (
+		<p
+			className={cn(
+				'mt-2 inline-flex items-start gap-1.5 text-xs font-medium text-amber-200/90',
+				className
+			)}
+			role="status"
+		>
+			<AlertCircle className="mt-0.5 size-3.5 shrink-0 text-amber-300" />
+			<span>{message}</span>
+		</p>
+	);
+};
+
+export default InlineValidationMessage;
diff --git a/src/components/common/SearchBar.tsx b/src/components/common/SearchBar.tsx
index 75064a14..cb6bd623 100644
--- a/src/components/common/SearchBar.tsx
+++ b/src/components/common/SearchBar.tsx
@@ -1,11 +1,13 @@
 import { Search } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import InlineValidationMessage from '@/components/common/InlineValidationMessage';
 
 interface SearchBarProps {
 	value: string;
 	onChange: (value: string) => void;
 	placeholder?: string;
 	className?: string;
+	validationMessage?: string;
 }
 
 const SearchBar: React.FC<SearchBarProps> = ({
@@ -13,19 +15,29 @@ const SearchBar: React.FC<SearchBarProps> = ({
 	onChange,
 	placeholder = 'Search creators by name or handle...',
 	className,
+	validationMessage,
 }) => {
 	return (
-		<div className={cn('relative w-full max-w-md', className)}>
-			<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-				<Search className="size-5 text-white/50" aria-hidden="true" />
+		<div className={cn('w-full max-w-md', className)}>
+			<div className="relative">
+				<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+					<Search className="size-5 text-white/50" aria-hidden="true" />
+				</div>
+				<input
+					type="text"
+					className={cn(
+						'block w-full rounded-xl border border-white/10 bg-white/5 py-3 pl-10 pr-3 text-sm text-white placeholder:text-white/40 focus:border-amber-500/50 focus:bg-white/10 focus:outline-none focus:ring-2 focus:ring-amber-500/20',
+						validationMessage &&
+							'border-amber-400/45 focus:border-amber-400/65 focus:ring-amber-300/20'
+					)}
+					placeholder={placeholder}
+					value={value}
+					onChange={e => onChange(e.target.value)}
+				/>
 			</div>
-			<input
-				type="text"
-				className="block w-full rounded-xl border border-white/10 bg-white/5 py-3 pl-10 pr-3 text-sm text-white placeholder:text-white/40 focus:border-amber-500/50 focus:bg-white/10 focus:outline-none focus:ring-2 focus:ring-amber-500/20"
-				placeholder={placeholder}
-				value={value}
-				onChange={e => onChange(e.target.value)}
-			/>
+			{validationMessage && (
+				<InlineValidationMessage message={validationMessage} />
+			)}
 		</div>
 	);
 };
diff --git a/src/components/common/VerifiedBadge.tsx b/src/components/common/VerifiedBadge.tsx
new file mode 100644
index 00000000..be2e5942
--- /dev/null
+++ b/src/components/common/VerifiedBadge.tsx
@@ -0,0 +1,33 @@
+import { BadgeCheck } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface VerifiedBadgeProps {
+	verified?: boolean;
+	reserveSpace?: boolean;
+	className?: string;
+}
+
+const VerifiedBadge: React.FC<VerifiedBadgeProps> = ({
+	verified = false,
+	reserveSpace = false,
+	className,
+}) => {
+	if (!verified && !reserveSpace) {
+		return null;
+	}
+
+	return (
+		<span
+			className={cn(
+				'inline-flex items-center gap-1 rounded-full border border-emerald-300/35 bg-emerald-400/12 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-[0.12em] text-emerald-200',
+				!verified && 'invisible',
+				className
+			)}
+		>
+			<BadgeCheck className="size-3" />
+			Verified
+		</span>
+	);
+};
+
+export default VerifiedBadge;
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index b63301ec..7bde0449 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -10,162 +10,196 @@ import { UnavailableAction } from '@/components/ui/unavailable-action';
 
 // Fallback demo data in case API fails
 const DEMO_CREATORS: Course[] = [
-  {
-    id: '1',
-    title: 'Alex Rivers',
-    description: 'Digital Artist & Illustrator',
-    price: 0.05,
-    instructorId: 'arivers',
-    category: 'Art',
-    level: 'BEGINNER',
-    thumbnail: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
-  },
-  {
-    id: '2',
-    title: 'Sarah Chen',
-    description: 'Solidity Developer',
-    price: 0.12,
-    instructorId: 'schen_dev',
-    category: 'Tech',
-    level: 'ADVANCED',
-    thumbnail: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop',
-  },
-  {
-    id: '3',
-    title: 'Marcus Thorne',
-    description: 'Crypto Strategist',
-    price: 0.08,
-    instructorId: 'mthorne',
-    category: 'Finance',
-    level: 'INTERMEDIATE',
-    thumbnail: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop',
-  },
-  {
-    id: '4',
-    title: 'Elena Vance',
-    description: 'UI/UX Designer',
-    price: 0.04,
-    instructorId: 'evance_design',
-    category: 'Design',
-    level: 'BEGINNER',
-    thumbnail: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop',
-  },
-  {
-    id: '5',
-    title: 'David Kojo',
-    description: 'Music Producer',
-    price: 0.15,
-    instructorId: 'dkojo_beats',
-    category: 'Music',
-    level: 'ADVANCED',
-    thumbnail: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop',
-  },
-  {
-    id: '6',
-    title: 'Yuki Sato',
-    description: 'Motion Designer',
-    price: 0.07,
-    instructorId: 'yuki_s',
-    category: 'Design',
-    level: 'INTERMEDIATE',
-    thumbnail: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&h=400&fit=crop',
-  },
+	{
+		id: '1',
+		title: 'Alex Rivers',
+		description: 'Digital Artist & Illustrator',
+		price: 0.05,
+		instructorId: 'arivers',
+		category: 'Art',
+		level: 'BEGINNER',
+		isVerified: true,
+		thumbnail:
+			'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop',
+	},
+	{
+		id: '2',
+		title: 'Sarah Chen',
+		description: 'Solidity Developer',
+		price: 0.12,
+		instructorId: 'schen_dev',
+		category: 'Tech',
+		level: 'ADVANCED',
+		isVerified: true,
+		thumbnail:
+			'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop',
+	},
+	{
+		id: '3',
+		title: 'Marcus Thorne',
+		description: 'Crypto Strategist',
+		price: 0.08,
+		instructorId: 'mthorne',
+		category: 'Finance',
+		level: 'INTERMEDIATE',
+		isVerified: false,
+		thumbnail:
+			'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop',
+	},
+	{
+		id: '4',
+		title: 'Elena Vance',
+		description: 'UI/UX Designer',
+		price: 0.04,
+		instructorId: 'evance_design',
+		category: 'Design',
+		level: 'BEGINNER',
+		isVerified: true,
+		thumbnail:
+			'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop',
+	},
+	{
+		id: '5',
+		title: 'David Kojo',
+		description: 'Music Producer',
+		price: 0.15,
+		instructorId: 'dkojo_beats',
+		category: 'Music',
+		level: 'ADVANCED',
+		isVerified: false,
+		thumbnail:
+			'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop',
+	},
+	{
+		id: '6',
+		title: 'Yuki Sato',
+		description: 'Motion Designer',
+		price: 0.07,
+		instructorId: 'yuki_s',
+		category: 'Design',
+		level: 'INTERMEDIATE',
+		isVerified: true,
+		thumbnail:
+			'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&h=400&fit=crop',
+	},
 ];
 
 function LandingPage() {
-  const [creators, setCreators] = useState<Course[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
+	const [creators, setCreators] = useState<Course[]>([]);
+	const [isLoading, setIsLoading] = useState(true);
+	const [searchQuery, setSearchQuery] = useState('');
 
-  useEffect(() => {
-    const fetchCreators = async () => {
-      setIsLoading(true);
-      try {
-        const data = await courseService.getCourses();
-        if (data && data.length > 0) {
-          setCreators(data);
-        } else {
-          setCreators(DEMO_CREATORS);
-        }
-      } catch (error) {
-        console.error('Failed to fetch creators:', error);
-        setCreators(DEMO_CREATORS);
-      } finally {
-        setTimeout(() => setIsLoading(false), 800);
-      }
-    };
+	const trimmedSearchQuery = searchQuery.trim();
+	const hasInvalidSearchInput = /[^a-zA-Z0-9_\s-]/.test(trimmedSearchQuery);
+	const searchValidationMessage = hasInvalidSearchInput
+		? 'Only letters, numbers, spaces, hyphens, and underscores are supported.'
+		: undefined;
 
-    fetchCreators();
-  }, []);
+	useEffect(() => {
+		const fetchCreators = async () => {
+			setIsLoading(true);
+			try {
+				const data = await courseService.getCourses();
+				if (data && data.length > 0) {
+					setCreators(data);
+				} else {
+					setCreators(DEMO_CREATORS);
+				}
+			} catch (error) {
+				console.error('Failed to fetch creators:', error);
+				setCreators(DEMO_CREATORS);
+			} finally {
+				setTimeout(() => setIsLoading(false), 800);
+			}
+		};
 
-  const filteredCreators = useMemo(() => {
-    return creators.filter(
-      creator =>
-        creator.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        creator.instructorId.toLowerCase().includes(searchQuery.toLowerCase())
-    );
-  }, [creators, searchQuery]);
+		fetchCreators();
+	}, []);
 
-  const handleResetSearch = () => setSearchQuery('');
+	const filteredCreators = useMemo(() => {
+		if (hasInvalidSearchInput) {
+			return [];
+		}
 
-  return (
-    <main className="relative min-h-screen overflow-x-hidden bg-[linear-gradient(160deg,#08111f_0%,#10213b_45%,#f0b14d_160%)] px-6 py-12 md:px-12">
-      <div className="absolute left-[-4rem] top-[10%] size-72 rounded-full bg-amber-300/20 blur-[100px]" />
-      <div className="absolute bottom-[8%] right-[-3rem] size-72 rounded-full bg-emerald-300/15 blur-[100px]" />
-      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,186,73,0.1),transparent_40%),radial-gradient(circle_at_bottom_left,rgba(74,222,128,0.08),transparent_35%)]" />
+		return creators.filter(
+			creator =>
+				creator.title
+					.toLowerCase()
+					.includes(trimmedSearchQuery.toLowerCase()) ||
+				creator.instructorId
+					.toLowerCase()
+					.includes(trimmedSearchQuery.toLowerCase())
+		);
+	}, [creators, trimmedSearchQuery, hasInvalidSearchInput]);
 
-      <div className="relative z-10 mx-auto max-w-7xl">
-        <header className="mb-16 text-center">
-          <img className="mx-auto mb-8 size-10" src="/icons/logo.svg" alt="Access Layer logo" />
-          <p className="mb-3 text-sm font-bold uppercase tracking-[0.25em] text-amber-400/80">
-            Creator Keys Marketplace
-          </p>
-          <h1 className="mb-8 font-grotesque text-[clamp(2.5rem,8vw,5rem)] font-extrabold leading-[1.1] tracking-tight text-white">
-            Access Layer
-          </h1>
-          <div className="mb-8 flex justify-center">
-            <UnavailableAction disabled={true} reason="Feature coming soon">
-              <Button>Buy Access</Button>
-            </UnavailableAction>
-          </div>
-        </header>
+	const handleResetSearch = () => setSearchQuery('');
 
-        <StickyFilterBar
-          eyebrow="Marketplace filters"
-          title="Find creators without losing your place"
-          description="Search by creator name or handle while you keep scrolling through the marketplace. The filter shell stays visible and compact so you can refine results without losing your place."
-          resultCount={filteredCreators.length}
-        >
-          <SearchBar
-            value={searchQuery}
-            onChange={setSearchQuery}
-            className="max-w-none shadow-2xl shadow-black/20"
-          />
-        </StickyFilterBar>
+	return (
+		<main className="relative min-h-screen overflow-x-hidden bg-[linear-gradient(160deg,#08111f_0%,#10213b_45%,#f0b14d_160%)] px-6 py-12 md:px-12">
+			<div className="absolute left-[-4rem] top-[10%] size-72 rounded-full bg-amber-300/20 blur-[100px]" />
+			<div className="absolute bottom-[8%] right-[-3rem] size-72 rounded-full bg-emerald-300/15 blur-[100px]" />
+			<div className="absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(255,186,73,0.1),transparent_40%),radial-gradient(circle_at_bottom_left,rgba(74,222,128,0.08),transparent_35%)]" />
 
-        <section className="mt-2">
-          {isLoading ? (
-            <CreatorGridSkeleton count={6} />
-          ) : filteredCreators.length > 0 ? (
-            <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
-              {filteredCreators.map(creator => (
-                <CreatorCard key={creator.id} creator={creator} />
-              ))}
-            </div>
-          ) : (
-            <div className="flex justify-center py-12">
-              <EmptyState
-                image="/images/no-results.png"
-                title="No creators found"
-                description={`We couldn't find any creators matching "${searchQuery}". Try a different name or handle.`}
-                onReset={handleResetSearch}
-              />
-            </div>
-          )}
-        </section>
-      </div>
-    </main>
-  );
+			<div className="relative z-10 mx-auto max-w-7xl">
+				<header className="mb-16 text-center">
+					<img
+						className="mx-auto mb-8 size-10"
+						src="/icons/logo.svg"
+						alt="Access Layer logo"
+					/>
+					<p className="mb-3 text-sm font-bold uppercase tracking-[0.25em] text-amber-400/80">
+						Creator Keys Marketplace
+					</p>
+					<h1 className="mb-8 font-grotesque text-[clamp(2.5rem,8vw,5rem)] font-extrabold leading-[1.1] tracking-tight text-white">
+						Access Layer
+					</h1>
+					<div className="mb-8 flex justify-center">
+						<UnavailableAction
+							disabled={true}
+							reason="Feature coming soon"
+						>
+							<Button>Buy Access</Button>
+						</UnavailableAction>
+					</div>
+				</header>
+
+				<StickyFilterBar
+					eyebrow="Marketplace filters"
+					title="Find creators without losing your place"
+					description="Search by creator name or handle while you keep scrolling through the marketplace. The filter shell stays visible and compact so you can refine results without losing your place."
+					resultCount={filteredCreators.length}
+				>
+					<SearchBar
+						value={searchQuery}
+						onChange={setSearchQuery}
+						validationMessage={searchValidationMessage}
+						className="max-w-none shadow-2xl shadow-black/20"
+					/>
+				</StickyFilterBar>
+
+				<section className="mt-2">
+					{isLoading ? (
+						<CreatorGridSkeleton count={6} />
+					) : filteredCreators.length > 0 ? (
+						<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+							{filteredCreators.map(creator => (
+								<CreatorCard key={creator.id} creator={creator} />
+							))}
+						</div>
+					) : (
+						<div className="flex justify-center py-12">
+							<EmptyState
+								image="/images/no-results.png"
+								title="No creators found"
+								description={`We couldn't find any creators matching "${searchQuery}". Try a different name or handle.`}
+								onReset={handleResetSearch}
+							/>
+						</div>
+					)}
+				</section>
+			</div>
+		</main>
+	);
 }
 
 export default LandingPage;
diff --git a/src/services/course.service.ts b/src/services/course.service.ts
index ca1e377f..2863e075 100644
--- a/src/services/course.service.ts
+++ b/src/services/course.service.ts
@@ -11,6 +11,7 @@ export interface Course {
 	category: string;
 	level: 'BEGINNER' | 'INTERMEDIATE' | 'ADVANCED';
 	socialHandle?: string;
+	isVerified?: boolean;
 }
 
 export interface GetCoursesParams {
@@ -51,9 +52,8 @@ class CourseService extends BaseApiService {
 	// Get enrolled courses - GET /courses/enrolled
 	async getEnrolledCourses(): Promise<Course[]> {
 		try {
-			const response = await this.api.get<APIResponse<Course[]>>(
-				'/courses/enrolled'
-			);
+			const response =
+				await this.api.get<APIResponse<Course[]>>('/courses/enrolled');
 
 			return response.data.data;
 		} catch (error) {