@xenterprises/nuxt-x-marketing 1.2.2 → 1.4.0

package/app/components/X/Mark/Affiliate/ProductCard.vue

@@ -1,431 +0,0 @@
-<template>
-	<!-- Card Layout (vertical) -->
-	<article
-		v-if="layout === 'card'"
-		class="group relative flex flex-col rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 overflow-hidden transition-all duration-300 ease-out hover:-translate-y-1 hover:shadow-[0_12px_40px_rgba(128,128,128,0.15)] dark:hover:shadow-[0_12px_40px_rgba(255,255,255,0.07)]"
-	>
-		<!-- Rank Badge -->
-		<div v-if="product.badge" class="absolute top-3 left-3 z-10">
-			<UBadge
-				:label="product.badge"
-				color="primary"
-				variant="solid"
-				size="sm"
-			/>
-		</div>
-
-		<!-- Product Image -->
-		<figure
-			class="aspect-4/3 overflow-hidden bg-neutral-50 dark:bg-neutral-800"
-		>
-			<img
-				v-if="product.image"
-				:src="product.image"
-				:alt="product.name"
-				class="w-full h-full object-contain p-4 transition-transform duration-300 group-hover:scale-105"
-			/>
-			<div v-else class="w-full h-full flex items-center justify-center">
-				<UIcon
-					name="i-lucide-package"
-					class="w-16 h-16 text-neutral-300 dark:text-neutral-600"
-				/>
-			</div>
-		</figure>
-
-		<!-- Content -->
-		<div class="flex flex-col flex-1 p-5">
-			<!-- Name -->
-			<h3
-				class="font-semibold text-neutral-900 dark:text-white text-base leading-snug mb-2"
-			>
-				{{ product.name }}
-			</h3>
-
-			<!-- Rating -->
-			<div
-				v-if="showRating && product.rating"
-				class="flex items-center gap-2 mb-3"
-			>
-				<div class="flex items-center gap-0.5">
-					<UIcon
-						v-for="i in 5"
-						:key="i"
-						name="i-lucide-star"
-						class="w-3.5 h-3.5"
-						:class="
-							i <= Math.round(product.rating)
-								? 'text-yellow-400'
-								: 'text-neutral-300 dark:text-neutral-600'
-						"
-					/>
-				</div>
-				<span
-					class="text-sm font-medium text-neutral-700 dark:text-neutral-300"
-				>
-					{{ product.rating.toFixed(1) }}
-				</span>
-				<span
-					v-if="product.reviewCount"
-					class="text-xs text-neutral-500 dark:text-neutral-400"
-				>
-					({{ product.reviewCount.toLocaleString() }})
-				</span>
-			</div>
-
-			<!-- Price -->
-			<div v-if="showPrice" class="flex items-baseline gap-2 mb-4">
-				<span class="text-xl font-bold text-neutral-900 dark:text-white">
-					{{ product.price }}
-				</span>
-				<span
-					v-if="product.originalPrice"
-					class="text-sm text-neutral-400 dark:text-neutral-500 line-through"
-				>
-					{{ product.originalPrice }}
-				</span>
-			</div>
-
-			<!-- Pros -->
-			<ul v-if="showPros && product.pros?.length" class="space-y-1.5 mb-4">
-				<li
-					v-for="pro in product.pros"
-					:key="pro"
-					class="flex items-start gap-2 text-sm text-neutral-700 dark:text-neutral-300"
-				>
-					<UIcon
-						name="i-lucide-check"
-						class="w-4 h-4 text-green-500 flex-shrink-0 mt-0.5"
-					/>
-					<span>{{ pro }}</span>
-				</li>
-			</ul>
-
-			<!-- Cons -->
-			<ul v-if="showCons && product.cons?.length" class="space-y-1.5 mb-4">
-				<li
-					v-for="con in product.cons"
-					:key="con"
-					class="flex items-start gap-2 text-sm text-neutral-700 dark:text-neutral-300"
-				>
-					<UIcon
-						name="i-lucide-x"
-						class="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5"
-					/>
-					<span>{{ con }}</span>
-				</li>
-			</ul>
-
-			<!-- Spacer -->
-			<div class="flex-1" />
-
-			<!-- CTA Button -->
-			<a
-				:href="affiliateHref"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="mt-auto"
-			>
-				<UButton
-					:label="buttonLabel"
-					:trailing-icon="buttonIcon"
-					color="primary"
-					variant="solid"
-					size="md"
-					block
-					class="justify-center"
-				/>
-			</a>
-
-			<!-- Disclosure -->
-			<p
-				v-if="disclosure"
-				class="mt-2 text-xs text-neutral-400 dark:text-neutral-500 text-center italic"
-			>
-				{{ disclosure }}
-			</p>
-		</div>
-	</article>
-
-	<!-- Row Layout (horizontal) -->
-	<article
-		v-else-if="layout === 'row'"
-		class="group relative flex gap-4 p-4 rounded-xl border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-all duration-300 ease-out hover:-translate-y-0.5 hover:shadow-[0_8px_24px_rgba(128,128,128,0.12)] dark:hover:shadow-[0_8px_24px_rgba(255,255,255,0.06)]"
-	>
-		<!-- Rank Badge -->
-		<div v-if="product.badge" class="absolute top-3 right-3 z-10">
-			<UBadge
-				:label="product.badge"
-				color="primary"
-				variant="solid"
-				size="xs"
-			/>
-		</div>
-
-		<!-- Product Image -->
-		<figure
-			class="w-32 h-32 flex-shrink-0 rounded-xl overflow-hidden bg-neutral-50 dark:bg-neutral-800 border border-neutral-100 dark:border-neutral-700"
-		>
-			<img
-				v-if="product.image"
-				:src="product.image"
-				:alt="product.name"
-				class="w-full h-full object-contain p-2"
-			/>
-			<div v-else class="w-full h-full flex items-center justify-center">
-				<UIcon
-					name="i-lucide-package"
-					class="w-10 h-10 text-neutral-300 dark:text-neutral-600"
-				/>
-			</div>
-		</figure>
-
-		<!-- Content -->
-		<div class="flex flex-col flex-1 min-w-0">
-			<h3
-				class="font-semibold text-neutral-900 dark:text-white text-base leading-snug mb-1.5"
-			>
-				{{ product.name }}
-			</h3>
-
-			<!-- Rating -->
-			<div
-				v-if="showRating && product.rating"
-				class="flex items-center gap-1.5 mb-2"
-			>
-				<div class="flex items-center gap-0.5">
-					<UIcon
-						v-for="i in 5"
-						:key="i"
-						name="i-lucide-star"
-						class="w-3 h-3"
-						:class="
-							i <= Math.round(product.rating)
-								? 'text-yellow-400'
-								: 'text-neutral-300 dark:text-neutral-600'
-						"
-					/>
-				</div>
-				<span class="text-xs text-neutral-500 dark:text-neutral-400">
-					{{ product.rating.toFixed(1) }}
-					<span v-if="product.reviewCount"
-						>({{ product.reviewCount.toLocaleString() }})</span
-					>
-				</span>
-			</div>
-
-			<!-- Price -->
-			<div v-if="showPrice" class="flex items-baseline gap-2 mb-3">
-				<span class="text-lg font-bold text-neutral-900 dark:text-white">
-					{{ product.price }}
-				</span>
-				<span
-					v-if="product.originalPrice"
-					class="text-sm text-neutral-400 dark:text-neutral-500 line-through"
-				>
-					{{ product.originalPrice }}
-				</span>
-			</div>
-
-			<!-- Pros -->
-			<ul v-if="showPros && product.pros?.length" class="space-y-1 mb-3">
-				<li
-					v-for="pro in product.pros.slice(0, 3)"
-					:key="pro"
-					class="flex items-start gap-1.5 text-sm text-neutral-700 dark:text-neutral-300"
-				>
-					<UIcon
-						name="i-lucide-check"
-						class="w-3.5 h-3.5 text-green-500 flex-shrink-0 mt-0.5"
-					/>
-					<span>{{ pro }}</span>
-				</li>
-			</ul>
-
-			<!-- Cons -->
-			<ul v-if="showCons && product.cons?.length" class="space-y-1 mb-3">
-				<li
-					v-for="con in product.cons.slice(0, 2)"
-					:key="con"
-					class="flex items-start gap-1.5 text-sm text-neutral-700 dark:text-neutral-300"
-				>
-					<UIcon
-						name="i-lucide-x"
-						class="w-3.5 h-3.5 text-red-500 flex-shrink-0 mt-0.5"
-					/>
-					<span>{{ con }}</span>
-				</li>
-			</ul>
-
-			<!-- CTA Button -->
-			<a
-				:href="affiliateHref"
-				target="_blank"
-				rel="noopener noreferrer"
-				class="mt-auto"
-			>
-				<UButton
-					:label="buttonLabel"
-					:trailing-icon="buttonIcon"
-					color="primary"
-					variant="solid"
-					size="sm"
-				/>
-			</a>
-
-			<!-- Disclosure -->
-			<p
-				v-if="disclosure"
-				class="mt-1.5 text-xs text-neutral-400 dark:text-neutral-500 italic"
-			>
-				{{ disclosure }}
-			</p>
-		</div>
-	</article>
-
-	<!-- Compact Layout (minimal one-row) -->
-	<article
-		v-else-if="layout === 'compact'"
-		class="group flex items-center gap-3 py-3 px-3 rounded-lg border border-neutral-200 dark:border-neutral-800 bg-white dark:bg-neutral-900 transition-all duration-200 hover:bg-neutral-50 dark:hover:bg-neutral-800/50"
-	>
-		<!-- Product Image -->
-		<figure
-			class="w-16 h-16 flex-shrink-0 rounded-lg overflow-hidden bg-neutral-50 dark:bg-neutral-800 border border-neutral-100 dark:border-neutral-700"
-		>
-			<img
-				v-if="product.image"
-				:src="product.image"
-				:alt="product.name"
-				class="w-full h-full object-contain p-1"
-			/>
-			<div v-else class="w-full h-full flex items-center justify-center">
-				<UIcon
-					name="i-lucide-package"
-					class="w-7 h-7 text-neutral-300 dark:text-neutral-600"
-				/>
-			</div>
-		</figure>
-
-		<!-- Name + Rating -->
-		<div class="flex-1 min-w-0">
-			<div class="flex items-center gap-2 flex-wrap">
-				<h3
-					class="font-medium text-sm text-neutral-900 dark:text-white truncate"
-				>
-					{{ product.name }}
-				</h3>
-				<UBadge
-					v-if="product.badge"
-					:label="product.badge"
-					color="primary"
-					variant="subtle"
-					size="xs"
-				/>
-			</div>
-			<div
-				v-if="showRating && product.rating"
-				class="flex items-center gap-1 mt-0.5"
-			>
-				<UIcon name="i-lucide-star" class="w-3 h-3 text-yellow-400" />
-				<span class="text-xs text-neutral-500 dark:text-neutral-400">{{
-					product.rating.toFixed(1)
-				}}</span>
-			</div>
-		</div>
-
-		<!-- Price -->
-		<div v-if="showPrice" class="flex-shrink-0 text-right">
-			<div class="font-bold text-sm text-neutral-900 dark:text-white">
-				{{ product.price }}
-			</div>
-			<div
-				v-if="product.originalPrice"
-				class="text-xs text-neutral-400 line-through"
-			>
-				{{ product.originalPrice }}
-			</div>
-		</div>
-
-		<!-- CTA Button -->
-		<a
-			:href="affiliateHref"
-			target="_blank"
-			rel="noopener noreferrer"
-			class="flex-shrink-0"
-		>
-			<UButton
-				:label="buttonLabel"
-				:trailing-icon="buttonIcon"
-				color="primary"
-				variant="solid"
-				size="xs"
-			/>
-		</a>
-	</article>
-</template>
-
-<script setup>
-const props = defineProps({
-	/** Product data object */
-	product: {
-		type: Object,
-		default: () => ({
-			name: "Product Name",
-			price: "$99.99",
-			rating: 4.5,
-			reviewCount: 1200,
-			pros: ["Great quality", "Easy to use", "Good value"],
-			affiliateUrl: "#",
-		}),
-	},
-	/** Card display layout */
-	layout: {
-		type: String,
-		default: "card",
-		validator: (v) => ["card", "row", "compact"].includes(v),
-	},
-	/** Show pros list */
-	showPros: {
-		type: Boolean,
-		default: true,
-	},
-	/** Show cons list */
-	showCons: {
-		type: Boolean,
-		default: false,
-	},
-	/** Show star rating */
-	showRating: {
-		type: Boolean,
-		default: true,
-	},
-	/** Show price */
-	showPrice: {
-		type: Boolean,
-		default: true,
-	},
-	/** CTA button label */
-	buttonLabel: {
-		type: String,
-		default: "Check Price on Amazon",
-	},
-	/** CTA button trailing icon */
-	buttonIcon: {
-		type: String,
-		default: "i-lucide-external-link",
-	},
-	/** Small disclosure text shown below the button */
-	disclosure: {
-		type: String,
-		default: "",
-	},
-});
-
-/** Build the affiliate URL, appending tag param if affiliateTag is set */
-const affiliateHref = computed(() => {
-	const url = props.product.affiliateUrl || "#";
-	const tag = props.product.affiliateTag;
-	if (!tag || url === "#") return url;
-	const separator = url.includes("?") ? "&" : "?";
-	return `${url}${separator}tag=${tag}`;
-});
-</script>