From 2da9b05f3616959d7877eb0c765d88a31f164289 Mon Sep 17 00:00:00 2001
From: Marvell69 <adewunmimarvel@gmail.com>
Date: Wed, 27 May 2026 23:51:50 +0100
Subject: [PATCH] added layout guard

---
 src/components/common/CreatorBio.tsx            |  7 +++++++
 .../common/CreatorSocialLinksList.tsx           |  7 +++++++
 .../common/EmptyTransactionTimelineState.tsx    | 17 ++++++++++++++---
 src/components/common/MarketplaceSection.tsx    |  7 +++++++
 src/components/common/SectionDivider.tsx        |  7 +++++++
 src/pages/LandingPage.tsx                       |  1 +
 6 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/src/components/common/CreatorBio.tsx b/src/components/common/CreatorBio.tsx
index 5b8bd973..7408e32f 100644
--- a/src/components/common/CreatorBio.tsx
+++ b/src/components/common/CreatorBio.tsx
@@ -7,6 +7,8 @@ interface CreatorBioProps {
 	fallback?: string;
 	/** Variant — `card` is muted/italic for list rows, `profile` is slightly more prominent for the detail header. */
 	variant?: 'card' | 'profile';
+	/** If true, returns null instead of a fallback when bio is missing. */
+	allowEmpty?: boolean;
 	className?: string;
 }
 
@@ -33,12 +35,17 @@ const CreatorBio: React.FC<CreatorBioProps> = ({
 	bio,
 	fallback = DEFAULT_FALLBACK,
 	variant = 'card',
+	allowEmpty = false,
 	className,
 }) => {
 	const trimmed = bio?.trim();
 	const styles = variantClasses[variant];
 
 	if (!trimmed) {
+		if (allowEmpty) {
+			return null;
+		}
+
 		return (
 			<p className={cn(styles.fallback, className)} aria-label="Bio not provided">
 				{fallback}
diff --git a/src/components/common/CreatorSocialLinksList.tsx b/src/components/common/CreatorSocialLinksList.tsx
index 10b71a1f..a4fc1e47 100644
--- a/src/components/common/CreatorSocialLinksList.tsx
+++ b/src/components/common/CreatorSocialLinksList.tsx
@@ -12,6 +12,8 @@ interface CreatorSocialLinksListProps {
 	handle?: string;
 	/** Override the default empty-state placeholder copy. */
 	emptyPlaceholder?: string;
+	/** If true, returns null instead of a placeholder when handle is missing. */
+	allowEmpty?: boolean;
 	className?: string;
 }
 
@@ -27,9 +29,14 @@ interface SocialLinkItem {
 const CreatorSocialLinksList: React.FC<CreatorSocialLinksListProps> = ({
 	handle,
 	emptyPlaceholder = DEFAULT_EMPTY_PLACEHOLDER,
+	allowEmpty = false,
 	className,
 }) => {
 	if (!handle?.trim()) {
+		if (allowEmpty) {
+			return null;
+		}
+
 		return (
 			<div
 				role="note"
diff --git a/src/components/common/EmptyTransactionTimelineState.tsx b/src/components/common/EmptyTransactionTimelineState.tsx
index 79ace51d..5d7e6356 100644
--- a/src/components/common/EmptyTransactionTimelineState.tsx
+++ b/src/components/common/EmptyTransactionTimelineState.tsx
@@ -14,7 +14,7 @@ interface TimelineEntry {
 	status: 'confirmed' | 'pending' | 'failed';
 }
 
-const TIMELINE_ENTRIES: TimelineEntry[] = [
+const DEFAULT_TIMELINE_ENTRIES: TimelineEntry[] = [
 	{
 		id: 'entry-1',
 		action: 'Buy',
@@ -43,9 +43,20 @@ const TIMELINE_ENTRIES: TimelineEntry[] = [
 
 const shortenTxHash = (hash: string) => `${hash.slice(0, 8)}...${hash.slice(-6)}`;
 
-const EmptyTransactionTimelineState: React.FC = () => {
+interface EmptyTransactionTimelineStateProps {
+	/** Optional transaction data. If provided and empty, the component returns null. */
+	data?: TimelineEntry[];
+}
+
+const EmptyTransactionTimelineState: React.FC<EmptyTransactionTimelineStateProps> = ({
+	data = DEFAULT_TIMELINE_ENTRIES,
+}) => {
 	const [copyStateById, setCopyStateById] = useState<Record<string, CopyState>>({});
 
+	if (!data || data.length === 0) {
+		return null;
+	}
+
 	const copyTxHash = async (entryId: string, txHash: string) => {
 		try {
 			await navigator.clipboard.writeText(txHash);
@@ -77,7 +88,7 @@ const EmptyTransactionTimelineState: React.FC = () => {
 				</div>
 
 				<div className="space-y-2">
-					{TIMELINE_ENTRIES.map(entry => {
+					{data.map(entry => {
 						const copyState = copyStateById[entry.id] ?? 'idle';
 						const isSuccess = copyState === 'success';
 						const isError = copyState === 'error';
diff --git a/src/components/common/MarketplaceSection.tsx b/src/components/common/MarketplaceSection.tsx
index 4bb47dac..36f81c9c 100644
--- a/src/components/common/MarketplaceSection.tsx
+++ b/src/components/common/MarketplaceSection.tsx
@@ -28,6 +28,8 @@ interface MarketplaceSectionProps
 		React.HTMLAttributes<HTMLElement>,
 		VariantProps<typeof marketplaceSectionVariants> {
 	as?: 'section' | 'div' | 'header' | 'footer';
+	/** If true, the section and its spacing/dividers will not be rendered. */
+	isEmpty?: boolean;
 }
 
 const MarketplaceSection: React.FC<MarketplaceSectionProps> = ({
@@ -35,9 +37,14 @@ const MarketplaceSection: React.FC<MarketplaceSectionProps> = ({
 	spacing,
 	container,
 	className,
+	isEmpty = false,
 	as: Tag = 'section',
 	...props
 }) => {
+	if (isEmpty) {
+		return null;
+	}
+
 	return (
 		<Tag
 			className={cn(
diff --git a/src/components/common/SectionDivider.tsx b/src/components/common/SectionDivider.tsx
index 3db586aa..395ed0a0 100644
--- a/src/components/common/SectionDivider.tsx
+++ b/src/components/common/SectionDivider.tsx
@@ -6,6 +6,8 @@ interface SectionDividerProps {
 	title?: string;
 	spacing?: SectionDividerSpacing;
 	className?: string;
+	/** If true, the divider will not be rendered. */
+	isEmpty?: boolean;
 }
 
 const spacingClasses: Record<SectionDividerSpacing, string> = {
@@ -18,7 +20,12 @@ function SectionDivider({
 	title,
 	spacing = 'default',
 	className,
+	isEmpty = false,
 }: SectionDividerProps) {
+	if (isEmpty) {
+		return null;
+	}
+
 	return (
 		<div
 			className={cn(
diff --git a/src/pages/LandingPage.tsx b/src/pages/LandingPage.tsx
index af03e972..114731f1 100644
--- a/src/pages/LandingPage.tsx
+++ b/src/pages/LandingPage.tsx
@@ -700,6 +700,7 @@ function LandingPage() {
 				<SectionDivider
 					title="Transaction timeline pattern"
 					spacing="relaxed"
+					isEmpty={false}
 				/>
 				<MarketplaceSection spacing="relaxed">
 					<EmptyTransactionTimelineState />