+
+ Showing {sortedParts.length} of {parts.length} parts
+ {hasActiveFilters && (
+
+ (filtered)
+
+ )}
- {/* Table Footer */}
-
-
-
- Showing {sortedParts.length} of {parts.length} parts
- {hasActiveFilters && (
-
- (filtered)
-
- )}
-
-
- Total Value: ${sortedParts.reduce((sum, part) => sum + Math.min(...part.offers.map(offer => offer.price)), 0).toFixed(2)}
-
+ {/* View Toggle */}
+
+
View:
+
+
+
+
+ {/* Restriction Alert Example */}
+ {sortedParts.some(part => part.restrictions.includes('NFA')) && (
+
+
+
+ )}
+
+ {/* Table View */}
+ {viewMode === 'table' && (
+
+
+
+
+
+ |
+ Category
+ |
+ handleSort('name')}
+ >
+
+ Name
+ {getSortIcon('name')}
+
+ |
+
+ Brand
+ |
+
+ Description
+ |
+ handleSort('price')}
+ >
+
+ Price
+ {getSortIcon('price')}
+
+ |
+
+ Actions
+ |
+
+
+
+ {sortedParts.map((part) => (
+
+ |
+
+ {part.category.name}
+
+ |
+
+
+ {part.name}
+
+
+ {part.brand.name}
+
+ |
+
+
+ {part.brand.name}
+
+ |
+
+
+ {part.description}
+
+ |
+
+
+ ${Math.min(...part.offers.map(offer => offer.price)).toFixed(2)}
+
+ |
+
+
+ |
+
+ ))}
+
+
+
+
+ {/* Table Footer */}
+
+
+
+ Showing {sortedParts.length} of {parts.length} parts
+ {hasActiveFilters && (
+
+ (filtered)
+
+ )}
+
+
+ Total Value: ${sortedParts.reduce((sum, part) => sum + Math.min(...part.offers.map(offer => offer.price)), 0).toFixed(2)}
+
+
+
+
+ )}
+
+ {/* Card View */}
+ {viewMode === 'cards' && (
+
+ {sortedParts.map((part) => (
+
+ ))}
+
+ )}
{/* Compact Restriction Legend */}
diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx
new file mode 100644
index 0000000..b1fcc40
--- /dev/null
+++ b/src/components/ProductCard.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import { useState } from 'react';
+
+interface ProductCardProps {
+ product: {
+ id: string;
+ name: string;
+ description: string;
+ image_url: string;
+ brand: { name: string };
+ category: { name: string };
+ restrictions: string[];
+ offers: Array<{ price: number; vendor: { name: string } }>;
+ };
+}
+
+export default function ProductCard({ product }: ProductCardProps) {
+ const [imageError, setImageError] = useState(false);
+ const lowestPrice = Math.min(...product.offers.map(offer => offer.price));
+
+ // Restriction badge component
+ const RestrictionBadge = ({ restriction }: { restriction: string }) => {
+ const restrictionConfig = {
+ NFA: {
+ label: 'NFA',
+ color: 'badge-error',
+ icon: 'π',
+ tooltip: 'National Firearms Act - Requires special registration'
+ },
+ SBR: {
+ label: 'SBR',
+ color: 'badge-warning',
+ icon: 'π',
+ tooltip: 'Short Barrel Rifle - Requires NFA registration'
+ },
+ SUPPRESSOR: {
+ label: 'Suppressor',
+ color: 'badge-secondary',
+ icon: 'π',
+ tooltip: 'Sound Suppressor - Requires NFA registration'
+ },
+ FFL_REQUIRED: {
+ label: 'FFL',
+ color: 'badge-info',
+ icon: 'πͺ',
+ tooltip: 'Federal Firearms License required for purchase'
+ },
+ STATE_RESTRICTIONS: {
+ label: 'State',
+ color: 'badge-warning',
+ icon: 'πΊοΈ',
+ tooltip: 'State-specific restrictions may apply'
+ },
+ HIGH_CAPACITY: {
+ label: 'High Cap',
+ color: 'badge-accent',
+ icon: 'π₯',
+ tooltip: 'High capacity magazine - check local laws'
+ },
+ SILENCERSHOP_PARTNER: {
+ label: 'SilencerShop',
+ color: 'badge-success',
+ icon: 'π€',
+ tooltip: 'Available through SilencerShop partnership'
+ }
+ };
+
+ const config = restrictionConfig[restriction as keyof typeof restrictionConfig];
+ if (!config) return null;
+
+ return (
+
+ {config.icon}
+ {config.label}
+
+ );
+ };
+
+ return (
+
+
+ 
setImageError(true)}
+ />
+ {product.restrictions && product.restrictions.length > 0 && (
+
+ {product.restrictions.map((restriction) => (
+
+ ))}
+
+ )}
+
+
+
+
{product.name}
+
{product.description}
+
+
+ {product.brand.name}
+ ${lowestPrice.toFixed(2)}
+
+
+
+ {product.category.name}
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/RestrictionAlert.tsx b/src/components/RestrictionAlert.tsx
new file mode 100644
index 0000000..d9d8109
--- /dev/null
+++ b/src/components/RestrictionAlert.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+interface RestrictionAlertProps {
+ type: 'warning' | 'error' | 'info' | 'success';
+ title: string;
+ message: string;
+ icon?: string;
+}
+
+export default function RestrictionAlert({ type, title, message, icon }: RestrictionAlertProps) {
+ const alertConfig = {
+ warning: {
+ className: 'alert alert-warning',
+ icon: icon || 'β οΈ'
+ },
+ error: {
+ className: 'alert alert-error',
+ icon: icon || 'π«'
+ },
+ info: {
+ className: 'alert alert-info',
+ icon: icon || 'βΉοΈ'
+ },
+ success: {
+ className: 'alert alert-success',
+ icon: icon || 'β
'
+ }
+ };
+
+ const config = alertConfig[type];
+
+ return (
+
+ );
+}
\ No newline at end of file
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
new file mode 100644
index 0000000..209c231
--- /dev/null
+++ b/src/components/Tooltip.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+interface TooltipProps {
+ content: string;
+ children: React.ReactNode;
+ position?: 'top' | 'bottom' | 'left' | 'right';
+ className?: string;
+}
+
+export default function Tooltip({ content, children, position = 'top', className = '' }: TooltipProps) {
+ return (
+
+ {children}
+
+ );
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 907cca6..9ee844d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,3 +1,4 @@
+console.log('DaisyUI plugin loaded');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
@@ -100,5 +101,54 @@ module.exports = {
},
},
},
- plugins: [],
+ plugins: [require('daisyui')],
+ daisyui: {
+ themes: [
+ {
+ light: {
+ "primary": "#0ea5e9",
+ "primary-content": "#ffffff",
+ "secondary": "#ef4444",
+ "secondary-content": "#ffffff",
+ "accent": "#f59e0b",
+ "accent-content": "#ffffff",
+ "neutral": "#737373",
+ "neutral-content": "#ffffff",
+ "base-100": "#ffffff",
+ "base-200": "#f5f5f5",
+ "base-300": "#e5e5e5",
+ "base-content": "#171717",
+ "info": "#0ea5e9",
+ "success": "#22c55e",
+ "warning": "#f59e0b",
+ "error": "#ef4444",
+ },
+ dark: {
+ "primary": "#38bdf8",
+ "primary-content": "#ffffff",
+ "secondary": "#f87171",
+ "secondary-content": "#ffffff",
+ "accent": "#fbbf24",
+ "accent-content": "#ffffff",
+ "neutral": "#a3a3a3",
+ "neutral-content": "#ffffff",
+ "base-100": "#171717",
+ "base-200": "#262626",
+ "base-300": "#404040",
+ "base-content": "#ffffff",
+ "info": "#38bdf8",
+ "success": "#4ade80",
+ "warning": "#fbbf24",
+ "error": "#f87171",
+ },
+ },
+ ],
+ darkTheme: "dark",
+ base: true,
+ styled: true,
+ utils: true,
+ prefix: "",
+ logs: true,
+ themeRoot: ":root",
+ },
};
\ No newline at end of file