@xenterprises/nuxt-x-marketing 1.2.2 → 1.4.0

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

@@ -1,382 +0,0 @@
-<template>
-	<section>
-		<!-- Disclosure -->
-		<XMarkAffiliateDisclosure
-			v-if="disclosure"
-			:text="disclosure"
-			variant="subtle"
-			class="mb-6"
-		/>
-
-		<!-- Desktop Table -->
-		<div
-			class="hidden md:block overflow-x-auto rounded-2xl border border-neutral-200 dark:border-neutral-700"
-		>
-			<table class="w-full text-sm">
-				<thead>
-					<tr class="border-b border-neutral-200 dark:border-neutral-700">
-						<!-- Spec label column header -->
-						<th
-							class="px-5 py-4 text-left font-semibold text-neutral-500 dark:text-neutral-400 bg-neutral-50 dark:bg-neutral-800/50 w-40"
-						>
-							Feature
-						</th>
-						<!-- Product column headers -->
-						<th
-							v-for="product in products"
-							:key="product.name"
-							class="px-5 py-4 text-center bg-neutral-50 dark:bg-neutral-800/50"
-						>
-							<div class="flex flex-col items-center gap-2">
-								<figure
-									v-if="product.image"
-									class="w-14 h-14 rounded-xl overflow-hidden bg-white dark:bg-neutral-700 border border-neutral-200 dark:border-neutral-600"
-								>
-									<img
-										:src="product.image"
-										:alt="product.name"
-										class="w-full h-full object-contain p-1"
-									/>
-								</figure>
-								<div
-									v-else
-									class="w-14 h-14 rounded-xl bg-primary-100 dark:bg-primary-900/40 flex items-center justify-center"
-								>
-									<span
-										class="text-primary-600 dark:text-primary-400 font-bold text-xl"
-									>
-										{{ product.name.charAt(0) }}
-									</span>
-								</div>
-								<span
-									class="font-semibold text-neutral-900 dark:text-white text-sm leading-snug text-center"
-								>
-									{{ product.name }}
-								</span>
-								<span
-									v-if="product.price"
-									class="font-bold text-primary-600 dark:text-primary-400 text-base"
-								>
-									{{ product.price }}
-								</span>
-							</div>
-						</th>
-					</tr>
-				</thead>
-				<tbody>
-					<!-- Spec rows -->
-					<tr
-						v-for="(spec, specIdx) in specs"
-						:key="spec.key"
-						:class="
-							specIdx % 2 === 0
-								? 'bg-white dark:bg-neutral-900'
-								: 'bg-neutral-50/50 dark:bg-neutral-800/30'
-						"
-						class="border-b border-neutral-100 dark:border-neutral-800 last:border-0"
-					>
-						<!-- Spec label -->
-						<td
-							class="px-5 py-3.5 font-medium text-neutral-600 dark:text-neutral-400 border-r border-neutral-100 dark:border-neutral-800"
-						>
-							{{ spec.label }}
-						</td>
-						<!-- Product values -->
-						<td
-							v-for="product in products"
-							:key="product.name"
-							class="px-5 py-3.5 text-center transition-colors"
-							:class="
-								highlightBest && isBestValue(spec, product)
-									? 'bg-primary-50 dark:bg-primary-900/20 text-primary-600 dark:text-primary-400 font-semibold'
-									: 'text-neutral-800 dark:text-neutral-200'
-							"
-						>
-							<span v-if="product.specs?.[spec.key] !== undefined">
-								{{ product.specs[spec.key] }}
-							</span>
-							<span v-else class="text-neutral-300 dark:text-neutral-600"
-								>—</span
-							>
-						</td>
-					</tr>
-
-					<!-- Buy buttons row -->
-					<tr
-						v-if="showBuyButtons"
-						class="bg-neutral-50 dark:bg-neutral-800/50"
-					>
-						<td
-							class="px-5 py-4 font-medium text-neutral-600 dark:text-neutral-400 border-r border-neutral-100 dark:border-neutral-800"
-						>
-							Buy
-						</td>
-						<td
-							v-for="product in products"
-							:key="product.name"
-							class="px-5 py-4 text-center"
-						>
-							<a
-								:href="getAffiliateHref(product)"
-								target="_blank"
-								rel="noopener noreferrer"
-							>
-								<UButton
-									:label="buttonLabel"
-									trailing-icon="i-lucide-external-link"
-									color="primary"
-									variant="solid"
-									size="sm"
-								/>
-							</a>
-						</td>
-					</tr>
-				</tbody>
-			</table>
-		</div>
-
-		<!-- Mobile: one product at a time with prev/next -->
-		<div class="md:hidden">
-			<!-- Navigation -->
-			<div class="flex items-center justify-between mb-4">
-				<button
-					class="p-2 rounded-lg border border-neutral-200 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-					:disabled="mobileIndex === 0"
-					aria-label="Previous product"
-					@click="mobileIndex--"
-				>
-					<UIcon
-						name="i-lucide-chevron-left"
-						class="w-5 h-5 text-neutral-600 dark:text-neutral-400"
-					/>
-				</button>
-
-				<div class="text-center">
-					<div class="font-semibold text-neutral-900 dark:text-white">
-						{{ products[mobileIndex]?.name }}
-					</div>
-					<div class="text-xs text-neutral-500 dark:text-neutral-400">
-						{{ mobileIndex + 1 }} of {{ products.length }}
-					</div>
-				</div>
-
-				<button
-					class="p-2 rounded-lg border border-neutral-200 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
-					:disabled="mobileIndex === products.length - 1"
-					aria-label="Next product"
-					@click="mobileIndex++"
-				>
-					<UIcon
-						name="i-lucide-chevron-right"
-						class="w-5 h-5 text-neutral-600 dark:text-neutral-400"
-					/>
-				</button>
-			</div>
-
-			<!-- Mobile product card -->
-			<div
-				class="rounded-2xl border border-neutral-200 dark:border-neutral-700 overflow-hidden"
-			>
-				<!-- Product header -->
-				<div
-					class="p-5 bg-neutral-50 dark:bg-neutral-800/50 border-b border-neutral-200 dark:border-neutral-700 flex items-center gap-4"
-				>
-					<figure
-						v-if="products[mobileIndex]?.image"
-						class="w-16 h-16 rounded-xl overflow-hidden bg-white dark:bg-neutral-700 border border-neutral-200 dark:border-neutral-600 flex-shrink-0"
-					>
-						<img
-							:src="products[mobileIndex].image"
-							:alt="products[mobileIndex].name"
-							class="w-full h-full object-contain p-1"
-						/>
-					</figure>
-					<div>
-						<div class="font-semibold text-neutral-900 dark:text-white">
-							{{ products[mobileIndex]?.name }}
-						</div>
-						<div
-							v-if="products[mobileIndex]?.price"
-							class="font-bold text-primary-600 dark:text-primary-400 text-lg"
-						>
-							{{ products[mobileIndex].price }}
-						</div>
-					</div>
-				</div>
-
-				<!-- Spec rows -->
-				<div>
-					<div
-						v-for="(spec, specIdx) in specs"
-						:key="spec.key"
-						class="flex items-center justify-between px-5 py-3 border-b border-neutral-100 dark:border-neutral-800 last:border-0"
-						:class="
-							specIdx % 2 === 0
-								? 'bg-white dark:bg-neutral-900'
-								: 'bg-neutral-50/50 dark:bg-neutral-800/30'
-						"
-					>
-						<span
-							class="font-medium text-neutral-600 dark:text-neutral-400 text-sm"
-							>{{ spec.label }}</span
-						>
-						<span
-							class="text-sm font-medium"
-							:class="
-								highlightBest && isBestValue(spec, products[mobileIndex])
-									? 'text-primary-600 dark:text-primary-400 font-semibold'
-									: 'text-neutral-800 dark:text-neutral-200'
-							"
-						>
-							{{ products[mobileIndex]?.specs?.[spec.key] ?? "—" }}
-						</span>
-					</div>
-				</div>
-
-				<!-- Buy button -->
-				<div
-					v-if="showBuyButtons"
-					class="p-4 bg-neutral-50 dark:bg-neutral-800/50"
-				>
-					<a
-						:href="getAffiliateHref(products[mobileIndex])"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						<UButton
-							:label="buttonLabel"
-							trailing-icon="i-lucide-external-link"
-							color="primary"
-							variant="solid"
-							size="md"
-							block
-							class="justify-center"
-						/>
-					</a>
-				</div>
-			</div>
-
-			<!-- Dot indicators -->
-			<div class="flex justify-center gap-1.5 mt-4">
-				<button
-					v-for="(_, idx) in products"
-					:key="idx"
-					class="w-2 h-2 rounded-full transition-all duration-200"
-					:class="
-						idx === mobileIndex
-							? 'bg-primary-500 w-4'
-							: 'bg-neutral-300 dark:bg-neutral-600'
-					"
-					:aria-label="`Go to product ${idx + 1}`"
-					@click="mobileIndex = idx"
-				/>
-			</div>
-		</div>
-	</section>
-</template>
-
-<script setup>
-const props = defineProps({
-	/** Array of 2–4 products to compare */
-	products: {
-		type: Array,
-		default: () => [
-			{
-				name: "Product A",
-				price: "$79.99",
-				affiliateUrl: "#",
-				specs: {
-					price: "$79.99",
-					rating: "4.5/5",
-					battery: "20 hours",
-					weight: "250g",
-				},
-			},
-			{
-				name: "Product B",
-				price: "$99.99",
-				affiliateUrl: "#",
-				specs: {
-					price: "$99.99",
-					rating: "4.8/5",
-					battery: "30 hours",
-					weight: "220g",
-				},
-			},
-		],
-	},
-	/** Spec rows to display [{ label, key }] */
-	specs: {
-		type: Array,
-		default: () => [
-			{ label: "Price", key: "price" },
-			{ label: "Rating", key: "rating" },
-			{ label: "Battery Life", key: "battery" },
-		],
-	},
-	/** Show buy buttons in last row */
-	showBuyButtons: {
-		type: Boolean,
-		default: true,
-	},
-	/** Highlight best value in each row */
-	highlightBest: {
-		type: Boolean,
-		default: true,
-	},
-	/** Buy button label */
-	buttonLabel: {
-		type: String,
-		default: "Buy on Amazon",
-	},
-	/** Disclosure text shown above table */
-	disclosure: {
-		type: String,
-		default: "",
-	},
-});
-
-/** Mobile carousel index */
-const mobileIndex = ref(0);
-
-/** Build affiliate URL with optional tag */
-const getAffiliateHref = (product) => {
-	if (!product) return "#";
-	const url = product.affiliateUrl || "#";
-	const tag = product.affiliateTag;
-	if (!tag || url === "#") return url;
-	const separator = url.includes("?") ? "&" : "?";
-	return `${url}${separator}tag=${tag}`;
-};
-
-/**
- * Determine if a product has the "best" value for a given spec.
- * For numeric values: lowest price wins, highest rating wins.
- * For non-numeric: no highlighting.
- */
-const isBestValue = (spec, product) => {
-	if (!props.highlightBest || !product?.specs) return false;
-	const rawValue = product.specs[spec.key];
-	if (rawValue === undefined || rawValue === null) return false;
-
-	// Extract numeric portion (strip $, %, /5, /10, etc.)
-	const numericValue = parseFloat(String(rawValue).replace(/[^0-9.]/g, ""));
-	if (isNaN(numericValue)) return false;
-
-	const allValues = props.products
-		.map((p) =>
-			parseFloat(String(p.specs?.[spec.key] ?? "").replace(/[^0-9.]/g, ""))
-		)
-		.filter((v) => !isNaN(v));
-
-	if (allValues.length < 2) return false;
-
-	const key = spec.key.toLowerCase();
-	// Price: lower is better
-	if (key.includes("price") || key.includes("cost")) {
-		return numericValue === Math.min(...allValues);
-	}
-	// Everything else: higher is better (rating, battery, etc.)
-	return numericValue === Math.max(...allValues);
-};
-</script>

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

@@ -1,138 +0,0 @@
-<template>
-	<div>
-		<!-- Subtle variant -->
-		<Transition name="fade">
-			<div
-				v-if="visible && variant === 'subtle'"
-				class="flex items-start gap-2.5 px-4 py-2.5 rounded-lg bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 text-sm"
-			>
-				<UIcon
-					:name="icon"
-					class="w-4 h-4 flex-shrink-0 mt-0.5 text-neutral-500 dark:text-neutral-400"
-				/>
-				<p class="flex-1 leading-relaxed">{{ text }}</p>
-				<button
-					v-if="dismissible"
-					class="flex-shrink-0 p-0.5 rounded hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
-					aria-label="Dismiss disclosure"
-					@click="dismiss"
-				>
-					<UIcon name="i-lucide-x" class="w-3.5 h-3.5" />
-				</button>
-			</div>
-		</Transition>
-
-		<!-- Banner variant -->
-		<Transition name="slide-down">
-			<div
-				v-if="visible && variant === 'banner'"
-				class="relative w-full bg-amber-50 dark:bg-amber-900/20 border-b border-amber-200 dark:border-amber-800"
-			>
-				<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-2.5">
-					<div
-						class="flex items-center justify-center gap-x-3 text-sm text-amber-800 dark:text-amber-300"
-					>
-						<UIcon
-							:name="icon"
-							class="w-4 h-4 flex-shrink-0 text-amber-600 dark:text-amber-400"
-						/>
-						<p class="text-center leading-relaxed">{{ text }}</p>
-						<button
-							v-if="dismissible"
-							class="absolute right-4 top-1/2 -translate-y-1/2 p-1 rounded-full hover:bg-amber-100 dark:hover:bg-amber-800/50 transition-colors"
-							aria-label="Dismiss disclosure"
-							@click="dismiss"
-						>
-							<UIcon name="i-lucide-x" class="w-4 h-4" />
-						</button>
-					</div>
-				</div>
-			</div>
-		</Transition>
-
-		<!-- Inline variant -->
-		<span
-			v-if="visible && variant === 'inline'"
-			class="inline-flex items-start gap-1.5 text-xs text-neutral-500 dark:text-neutral-400 italic"
-		>
-			<UIcon :name="icon" class="w-3.5 h-3.5 flex-shrink-0 mt-0.5" />
-			<span>{{ text }}</span>
-		</span>
-	</div>
-</template>
-
-<script setup>
-const props = defineProps({
-	/** Disclosure text shown to users */
-	text: {
-		type: String,
-		default:
-			"This page contains affiliate links. As an Amazon Associate, we earn from qualifying purchases at no extra cost to you.",
-	},
-	/** Visual variant of the disclosure */
-	variant: {
-		type: String,
-		default: "subtle",
-		validator: (v) => ["subtle", "banner", "inline"].includes(v),
-	},
-	/** Icon to display alongside the text */
-	icon: {
-		type: String,
-		default: "i-lucide-info",
-	},
-	/** Whether the disclosure can be dismissed */
-	dismissible: {
-		type: Boolean,
-		default: false,
-	},
-	/** localStorage key for persisting dismissed state */
-	storageKey: {
-		type: String,
-		default: "affiliate-disclosure-dismissed",
-	},
-});
-
-const emit = defineEmits(["dismiss"]);
-
-const visible = ref(true);
-
-onMounted(() => {
-	if (props.dismissible && props.storageKey && import.meta.client) {
-		const dismissed = localStorage.getItem(props.storageKey);
-		if (dismissed) {
-			visible.value = false;
-		}
-	}
-});
-
-const dismiss = () => {
-	if (props.storageKey && import.meta.client) {
-		localStorage.setItem(props.storageKey, "true");
-	}
-	visible.value = false;
-	emit("dismiss");
-};
-</script>
-
-<style scoped>
-.fade-enter-active,
-.fade-leave-active {
-	transition: opacity 0.3s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-	opacity: 0;
-}
-
-.slide-down-enter-active,
-.slide-down-leave-active {
-	transition: transform 0.3s ease, opacity 0.3s ease;
-}
-
-.slide-down-enter-from,
-.slide-down-leave-to {
-	transform: translateY(-100%);
-	opacity: 0;
-}
-</style>