@xenterprises/nuxt-x-marketing 1.2.2 → 1.4.0

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

@@ -1,410 +0,0 @@
-<template>
-	<article class="product-detail">
-		<!-- Disclosure -->
-		<XMarkAffiliateDisclosure
-			v-if="disclosure"
-			:text="disclosure"
-			variant="subtle"
-			class="mb-8"
-		/>
-
-		<!-- Product Header -->
-		<header class="mb-8">
-			<div class="flex flex-wrap items-start gap-4">
-				<div class="flex-1 min-w-0">
-					<h1
-						class="text-2xl sm:text-3xl lg:text-4xl font-bold text-neutral-900 dark:text-white leading-tight"
-					>
-						{{ product.name }}
-					</h1>
-
-					<!-- Rating + Review Count -->
-					<div
-						v-if="product.rating"
-						class="flex items-center gap-3 mt-3 flex-wrap"
-					>
-						<div class="flex items-center gap-1">
-							<UIcon
-								v-for="i in 5"
-								:key="i"
-								name="i-lucide-star"
-								class="w-4 h-4"
-								:class="
-									i <= Math.round(product.rating)
-										? 'text-yellow-400'
-										: 'text-neutral-300 dark:text-neutral-600'
-								"
-							/>
-						</div>
-						<span class="font-semibold text-neutral-800 dark:text-neutral-200">
-							{{ product.rating.toFixed(1) }}
-						</span>
-						<span
-							v-if="product.reviewCount"
-							class="text-sm text-neutral-500 dark:text-neutral-400"
-						>
-							({{ product.reviewCount.toLocaleString() }} reviews)
-						</span>
-					</div>
-
-					<!-- Price -->
-					<div class="flex items-baseline gap-3 mt-3">
-						<span
-							v-if="product.price"
-							class="text-2xl font-bold text-neutral-900 dark:text-white"
-						>
-							{{ product.price }}
-						</span>
-						<span
-							v-if="product.originalPrice"
-							class="text-lg text-neutral-400 dark:text-neutral-500 line-through"
-						>
-							{{ product.originalPrice }}
-						</span>
-					</div>
-				</div>
-
-				<!-- Editorial Score Badge -->
-				<div
-					v-if="score !== null"
-					class="flex-shrink-0 w-20 h-20 rounded-2xl bg-primary-500 dark:bg-primary-600 flex flex-col items-center justify-center shadow-lg"
-					aria-label="Editorial score"
-				>
-					<span class="text-2xl font-bold text-white leading-none">{{
-						score
-					}}</span>
-					<span class="text-xs text-primary-100 mt-0.5">/10</span>
-				</div>
-			</div>
-		</header>
-
-		<!-- Content Grid: main + sidebar -->
-		<div class="grid lg:grid-cols-[1fr_300px] gap-10 lg:gap-14">
-			<!-- Main Content -->
-			<div class="min-w-0 space-y-10">
-				<!-- Image Gallery -->
-				<section v-if="allImages.length" aria-label="Product images">
-					<!-- Main Image -->
-					<figure
-						class="aspect-4/3 rounded-2xl overflow-hidden bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 mb-3"
-					>
-						<img
-							:src="activeImage"
-							:alt="product.name"
-							class="w-full h-full object-contain p-6 transition-opacity duration-200"
-						/>
-					</figure>
-
-					<!-- Thumbnails -->
-					<div v-if="allImages.length > 1" class="flex gap-2 flex-wrap">
-						<button
-							v-for="(img, idx) in allImages"
-							:key="idx"
-							class="w-16 h-16 rounded-lg overflow-hidden border-2 transition-all duration-200 bg-neutral-50 dark:bg-neutral-800"
-							:class="
-								activeImage === img
-									? 'border-primary-500 dark:border-primary-400'
-									: 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-400'
-							"
-							:aria-label="`View image ${idx + 1}`"
-							@click="activeImage = img"
-						>
-							<img
-								:src="img"
-								:alt="`${product.name} image ${idx + 1}`"
-								class="w-full h-full object-contain p-1"
-							/>
-						</button>
-					</div>
-				</section>
-
-				<!-- Description -->
-				<section v-if="product.description">
-					<p
-						class="text-neutral-700 dark:text-neutral-300 leading-relaxed text-base"
-					>
-						{{ product.description }}
-					</p>
-				</section>
-
-				<!-- Pros & Cons Table -->
-				<section
-					v-if="
-						hasProsConsTable && (product.pros?.length || product.cons?.length)
-					"
-					aria-label="Pros and cons"
-				>
-					<h2 class="text-xl font-bold text-neutral-900 dark:text-white mb-4">
-						Pros &amp; Cons
-					</h2>
-					<div class="grid sm:grid-cols-2 gap-4">
-						<!-- Pros -->
-						<div
-							class="rounded-xl border border-green-200 dark:border-green-900/50 bg-green-50 dark:bg-green-900/10 p-4"
-						>
-							<h3
-								class="font-semibold text-green-800 dark:text-green-400 mb-3 flex items-center gap-2"
-							>
-								<UIcon name="i-lucide-thumbs-up" class="w-4 h-4" />
-								Pros
-							</h3>
-							<ul class="space-y-2">
-								<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>
-						</div>
-
-						<!-- Cons -->
-						<div
-							class="rounded-xl border border-red-200 dark:border-red-900/50 bg-red-50 dark:bg-red-900/10 p-4"
-						>
-							<h3
-								class="font-semibold text-red-800 dark:text-red-400 mb-3 flex items-center gap-2"
-							>
-								<UIcon name="i-lucide-thumbs-down" class="w-4 h-4" />
-								Cons
-							</h3>
-							<ul class="space-y-2">
-								<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>
-						</div>
-					</div>
-				</section>
-
-				<!-- Specs Table -->
-				<section
-					v-if="hasSpecs && product.specs && Object.keys(product.specs).length"
-					aria-label="Product specifications"
-				>
-					<h2 class="text-xl font-bold text-neutral-900 dark:text-white mb-4">
-						Specifications
-					</h2>
-					<div
-						class="rounded-xl border border-neutral-200 dark:border-neutral-700 overflow-hidden"
-					>
-						<table class="w-full text-sm">
-							<tbody>
-								<tr
-									v-for="(value, key, idx) in product.specs"
-									:key="key"
-									:class="
-										idx % 2 === 0
-											? 'bg-neutral-50 dark:bg-neutral-800/50'
-											: 'bg-white dark:bg-neutral-900'
-									"
-								>
-									<th
-										class="px-4 py-3 text-left font-medium text-neutral-600 dark:text-neutral-400 w-2/5 border-r border-neutral-200 dark:border-neutral-700"
-									>
-										{{ key }}
-									</th>
-									<td class="px-4 py-3 text-neutral-900 dark:text-white">
-										{{ value }}
-									</td>
-								</tr>
-							</tbody>
-						</table>
-					</div>
-				</section>
-
-				<!-- Verdict -->
-				<section v-if="product.verdict" aria-label="Editorial verdict">
-					<h2 class="text-xl font-bold text-neutral-900 dark:text-white mb-4">
-						Our Verdict
-					</h2>
-					<div
-						class="relative pl-5 border-l-4 border-primary-400 dark:border-primary-500"
-					>
-						<blockquote
-							class="text-lg italic text-neutral-700 dark:text-neutral-300 leading-relaxed"
-						>
-							{{ product.verdict }}
-						</blockquote>
-						<div v-if="score !== null" class="mt-4 flex items-center gap-3">
-							<div
-								class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-700 dark:text-primary-300 font-semibold text-sm"
-							>
-								<UIcon name="i-lucide-award" class="w-4 h-4" />
-								Editorial Score: {{ score }}/10
-							</div>
-						</div>
-					</div>
-				</section>
-
-				<!-- After Verdict Slot -->
-				<slot name="after-verdict" />
-			</div>
-
-			<!-- Sidebar -->
-			<aside class="lg:block">
-				<div class="sticky top-24 space-y-6">
-					<!-- Buy Box -->
-					<slot name="buy-box">
-						<div
-							v-if="hasBuyBox"
-							class="rounded-2xl border border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 p-5 shadow-sm"
-						>
-							<h3 class="font-semibold text-neutral-900 dark:text-white mb-1">
-								{{ product.name }}
-							</h3>
-
-							<!-- Price in buy box -->
-							<div class="flex items-baseline gap-2 mb-4">
-								<span
-									v-if="product.price"
-									class="text-2xl font-bold text-neutral-900 dark:text-white"
-								>
-									{{ product.price }}
-								</span>
-								<span
-									v-if="product.originalPrice"
-									class="text-sm text-neutral-400 line-through"
-								>
-									{{ product.originalPrice }}
-								</span>
-							</div>
-
-							<!-- Score in buy box -->
-							<div v-if="score !== null" class="flex items-center gap-2 mb-4">
-								<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((score / 10) * 5)
-												? 'text-yellow-400'
-												: 'text-neutral-300 dark:text-neutral-600'
-										"
-									/>
-								</div>
-								<span
-									class="text-sm font-medium text-neutral-700 dark:text-neutral-300"
-								>
-									{{ score }}/10
-								</span>
-							</div>
-
-							<!-- CTA Button -->
-							<a
-								:href="affiliateHref"
-								target="_blank"
-								rel="noopener noreferrer"
-								class="block"
-							>
-								<UButton
-									label="Check Price on Amazon"
-									trailing-icon="i-lucide-external-link"
-									color="primary"
-									variant="solid"
-									size="lg"
-									block
-									class="justify-center"
-								/>
-							</a>
-
-							<!-- Disclosure in buy box -->
-							<p
-								v-if="disclosure"
-								class="mt-3 text-xs text-neutral-400 dark:text-neutral-500 text-center italic leading-relaxed"
-							>
-								{{ disclosure }}
-							</p>
-						</div>
-					</slot>
-
-					<!-- Sidebar Slot -->
-					<slot name="sidebar" />
-				</div>
-			</aside>
-		</div>
-	</article>
-</template>
-
-<script setup>
-const props = defineProps({
-	/** Full product data for the review page */
-	product: {
-		type: Object,
-		default: () => ({
-			name: "Product Review",
-			price: "$99.99",
-			rating: 4.5,
-			reviewCount: 1200,
-			pros: ["Excellent build quality", "Long battery life", "Great value"],
-			cons: ["No IP rating", "Bulky design"],
-			description: "A comprehensive review of this product.",
-			verdict: "A solid choice for most users.",
-		}),
-	},
-	/** Editorial score 0–10 */
-	score: {
-		type: Number,
-		default: null,
-	},
-	/** Show the buy box sidebar widget */
-	hasBuyBox: {
-		type: Boolean,
-		default: true,
-	},
-	/** Show the specs table */
-	hasSpecs: {
-		type: Boolean,
-		default: true,
-	},
-	/** Show the pros/cons two-column table */
-	hasProsConsTable: {
-		type: Boolean,
-		default: true,
-	},
-	/** Affiliate disclosure text */
-	disclosure: {
-		type: String,
-		default: "",
-	},
-});
-
-/** Build the affiliate URL with optional tag param */
-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}`;
-});
-
-/** Collect all images: images array or single image */
-const allImages = computed(() => {
-	if (props.product.images?.length) return props.product.images;
-	if (props.product.image) return [props.product.image];
-	return [];
-});
-
-/** Currently displayed main image */
-const activeImage = ref(allImages.value[0] || "");
-
-/** Update active image when product changes */
-watch(allImages, (imgs) => {
-	if (imgs.length) activeImage.value = imgs[0];
-});
-</script>

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

@@ -1,101 +0,0 @@
-<template>
-	<section>
-		<!-- Disclosure at top -->
-		<XMarkAffiliateDisclosure
-			v-if="disclosure"
-			:text="disclosure"
-			variant="subtle"
-			class="mb-6"
-		/>
-
-		<!-- Grid layout -->
-		<div v-if="layout === 'grid'" :class="gridClasses">
-			<XMarkAffiliateProductCard
-				v-for="(product, index) in rankedProducts"
-				:key="product.name + index"
-				:product="product"
-				:layout="cardLayout"
-				:button-label="buttonLabel"
-				class="xFadeUp"
-				:style="{ animationDelay: `${index * 80}ms` }"
-			/>
-		</div>
-
-		<!-- List layout -->
-		<div v-else-if="layout === 'list'" class="space-y-4">
-			<XMarkAffiliateProductCard
-				v-for="(product, index) in rankedProducts"
-				:key="product.name + index"
-				:product="product"
-				layout="row"
-				:button-label="buttonLabel"
-				class="xFadeUp"
-				:style="{ animationDelay: `${index * 60}ms` }"
-			/>
-		</div>
-	</section>
-</template>
-
-<script setup>
-const props = defineProps({
-	/** Array of product objects */
-	products: {
-		type: Array,
-		default: () => [],
-	},
-	/** Grid or list display */
-	layout: {
-		type: String,
-		default: "grid",
-		validator: (v) => ["grid", "list"].includes(v),
-	},
-	/** Number of columns in grid mode (2 or 3) */
-	columns: {
-		type: Number,
-		default: 3,
-		validator: (v) => [2, 3].includes(v),
-	},
-	/** Show rank badges (#1 Pick, #2 Pick, etc.) on first 3 products */
-	showRanking: {
-		type: Boolean,
-		default: true,
-	},
-	/** Disclosure text shown once at top of grid */
-	disclosure: {
-		type: String,
-		default: "",
-	},
-	/** CTA button label passed to each card */
-	buttonLabel: {
-		type: String,
-		default: "Check Price on Amazon",
-	},
-	/** Card layout variant passed to each ProductCard */
-	cardLayout: {
-		type: String,
-		default: "card",
-		validator: (v) => ["card", "row", "compact"].includes(v),
-	},
-});
-
-const rankLabels = ["#1 Pick", "#2 Pick", "#3 Pick"];
-
-/** Inject rank badges into first 3 products when showRanking is true */
-const rankedProducts = computed(() => {
-	if (!props.showRanking) return props.products;
-	return props.products.map((product, index) => {
-		if (index < 3 && !product.badge) {
-			return { ...product, badge: rankLabels[index] };
-		}
-		return product;
-	});
-});
-
-const gridClasses = computed(() => {
-	const colMap = {
-		2: "grid grid-cols-1 sm:grid-cols-2 gap-6",
-		3: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6",
-	};
-	return colMap[props.columns] || colMap[3];
-});
-</script>