mirror of
https://gitea.gofwd.group/sean/gunbuilder-next-tailwind.git
synced 2025-12-06 02:56:45 -05:00
640 lines
27 KiB
TypeScript
640 lines
27 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useState, useEffect } from 'react';
|
|||
|
|
import { useSearchParams } from 'next/navigation';
|
|||
|
|
import { Listbox, Transition } from '@headlessui/react';
|
|||
|
|
import { ChevronUpDownIcon, CheckIcon, XMarkIcon } from '@heroicons/react/20/solid';
|
|||
|
|
import SearchInput from '@/components/SearchInput';
|
|||
|
|
import ProductCard from '@/components/ProductCard';
|
|||
|
|
import RestrictionAlert from '@/components/RestrictionAlert';
|
|||
|
|
import Tooltip from '@/components/Tooltip';
|
|||
|
|
import Link from 'next/link';
|
|||
|
|
import { mockProducts } from '@/mock/product';
|
|||
|
|
import type { Product } from '@/mock/product';
|
|||
|
|
|
|||
|
|
// Extract unique values for dropdowns
|
|||
|
|
const categories = ['All', ...Array.from(new Set(mockProducts.map(part => part.category.name)))];
|
|||
|
|
const brands = ['All', ...Array.from(new Set(mockProducts.map(part => part.brand.name)))];
|
|||
|
|
const vendors = ['All', ...Array.from(new Set(mockProducts.flatMap(part => part.offers.map(offer => offer.vendor.name))))];
|
|||
|
|
|
|||
|
|
// Restrictions for filter dropdown
|
|||
|
|
const restrictionOptions = [
|
|||
|
|
'',
|
|||
|
|
'NFA',
|
|||
|
|
'SBR',
|
|||
|
|
'SUPPRESSOR',
|
|||
|
|
'STATE_RESTRICTIONS',
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
type SortField = 'name' | 'category' | 'price';
|
|||
|
|
type SortDirection = 'asc' | 'desc';
|
|||
|
|
|
|||
|
|
// Restriction indicator component
|
|||
|
|
const RestrictionBadge = ({ restriction }: { restriction: string }) => {
|
|||
|
|
const restrictionConfig = {
|
|||
|
|
NFA: {
|
|||
|
|
label: 'NFA',
|
|||
|
|
color: 'bg-red-600 text-white',
|
|||
|
|
icon: '🔒',
|
|||
|
|
tooltip: 'National Firearms Act - Requires special registration'
|
|||
|
|
},
|
|||
|
|
SBR: {
|
|||
|
|
label: 'SBR',
|
|||
|
|
color: 'bg-orange-600 text-white',
|
|||
|
|
icon: '📏',
|
|||
|
|
tooltip: 'Short Barrel Rifle - Requires NFA registration'
|
|||
|
|
},
|
|||
|
|
SUPPRESSOR: {
|
|||
|
|
label: 'Suppressor',
|
|||
|
|
color: 'bg-purple-600 text-white',
|
|||
|
|
icon: '🔇',
|
|||
|
|
tooltip: 'Sound Suppressor - Requires NFA registration'
|
|||
|
|
},
|
|||
|
|
FFL_REQUIRED: {
|
|||
|
|
label: 'FFL',
|
|||
|
|
color: 'bg-blue-600 text-white',
|
|||
|
|
icon: '🏪',
|
|||
|
|
tooltip: 'Federal Firearms License required for purchase'
|
|||
|
|
},
|
|||
|
|
STATE_RESTRICTIONS: {
|
|||
|
|
label: 'State',
|
|||
|
|
color: 'bg-yellow-600 text-black',
|
|||
|
|
icon: '🗺️',
|
|||
|
|
tooltip: 'State-specific restrictions may apply'
|
|||
|
|
},
|
|||
|
|
HIGH_CAPACITY: {
|
|||
|
|
label: 'High Cap',
|
|||
|
|
color: 'bg-pink-600 text-white',
|
|||
|
|
icon: '🥁',
|
|||
|
|
tooltip: 'High capacity magazine - check local laws'
|
|||
|
|
},
|
|||
|
|
SILENCERSHOP_PARTNER: {
|
|||
|
|
label: 'SilencerShop',
|
|||
|
|
color: 'bg-green-600 text-white',
|
|||
|
|
icon: '🤝',
|
|||
|
|
tooltip: 'Available through SilencerShop partnership'
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const config = restrictionConfig[restriction as keyof typeof restrictionConfig];
|
|||
|
|
if (!config) return null;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${config.color} cursor-help`}
|
|||
|
|
title={config.tooltip}
|
|||
|
|
>
|
|||
|
|
<span>{config.icon}</span>
|
|||
|
|
<span>{config.label}</span>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Tailwind UI Dropdown Component
|
|||
|
|
const Dropdown = ({
|
|||
|
|
label,
|
|||
|
|
value,
|
|||
|
|
onChange,
|
|||
|
|
options,
|
|||
|
|
placeholder = "Select option"
|
|||
|
|
}: {
|
|||
|
|
label: string;
|
|||
|
|
value: string;
|
|||
|
|
onChange: (value: string) => void;
|
|||
|
|
options: string[];
|
|||
|
|
placeholder?: string;
|
|||
|
|
}) => {
|
|||
|
|
return (
|
|||
|
|
<div className="relative">
|
|||
|
|
<Listbox value={value} onChange={onChange}>
|
|||
|
|
<div className="relative">
|
|||
|
|
<Listbox.Label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
|||
|
|
{label}
|
|||
|
|
</Listbox.Label>
|
|||
|
|
<Listbox.Button className="relative w-full cursor-default rounded-lg bg-white dark:bg-neutral-800 py-2 pl-3 pr-10 text-left shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm">
|
|||
|
|
<span className="block truncate text-neutral-900 dark:text-white">
|
|||
|
|
{value || placeholder}
|
|||
|
|
</span>
|
|||
|
|
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
|||
|
|
<ChevronUpDownIcon
|
|||
|
|
className="h-5 w-5 text-neutral-400"
|
|||
|
|
aria-hidden="true"
|
|||
|
|
/>
|
|||
|
|
</span>
|
|||
|
|
</Listbox.Button>
|
|||
|
|
<Transition
|
|||
|
|
as="div"
|
|||
|
|
leave="transition ease-in duration-100"
|
|||
|
|
leaveFrom="opacity-100"
|
|||
|
|
leaveTo="opacity-0"
|
|||
|
|
className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-neutral-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
|||
|
|
>
|
|||
|
|
<Listbox.Options>
|
|||
|
|
{options.map((option, optionIdx) => (
|
|||
|
|
<Listbox.Option
|
|||
|
|
key={optionIdx}
|
|||
|
|
className={({ active }) =>
|
|||
|
|
`relative cursor-default select-none py-2 pl-10 pr-4 ${
|
|||
|
|
active ? 'bg-primary-100 dark:bg-primary-900 text-primary-900 dark:text-primary-100' : 'text-neutral-900 dark:text-white'
|
|||
|
|
}`
|
|||
|
|
}
|
|||
|
|
value={option}
|
|||
|
|
>
|
|||
|
|
{({ selected }) => (
|
|||
|
|
<>
|
|||
|
|
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
|
|||
|
|
{option}
|
|||
|
|
</span>
|
|||
|
|
{selected ? (
|
|||
|
|
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600 dark:text-primary-400">
|
|||
|
|
<CheckIcon className="h-5 w-5" aria-hidden="true" />
|
|||
|
|
</span>
|
|||
|
|
) : null}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</Listbox.Option>
|
|||
|
|
))}
|
|||
|
|
</Listbox.Options>
|
|||
|
|
</Transition>
|
|||
|
|
</div>
|
|||
|
|
</Listbox>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default function Home() {
|
|||
|
|
const searchParams = useSearchParams();
|
|||
|
|
const [selectedCategory, setSelectedCategory] = useState('All');
|
|||
|
|
const [selectedBrand, setSelectedBrand] = useState('All');
|
|||
|
|
const [selectedVendor, setSelectedVendor] = useState('All');
|
|||
|
|
const [priceRange, setPriceRange] = useState('');
|
|||
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|||
|
|
const [selectedRestriction, setSelectedRestriction] = useState('');
|
|||
|
|
const [sortField, setSortField] = useState<SortField>('name');
|
|||
|
|
const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
|
|||
|
|
const [viewMode, setViewMode] = useState<'table' | 'cards'>('table');
|
|||
|
|
|
|||
|
|
// Read category from URL parameter on page load
|
|||
|
|
useEffect(() => {
|
|||
|
|
const categoryParam = searchParams.get('category');
|
|||
|
|
if (categoryParam && categories.includes(categoryParam)) {
|
|||
|
|
setSelectedCategory(categoryParam);
|
|||
|
|
}
|
|||
|
|
}, [searchParams]);
|
|||
|
|
|
|||
|
|
// Filter parts based on selected criteria
|
|||
|
|
const filteredParts = mockProducts.filter(part => {
|
|||
|
|
const matchesCategory = selectedCategory === 'All' || part.category.name === selectedCategory;
|
|||
|
|
const matchesBrand = selectedBrand === 'All' || part.brand.name === selectedBrand;
|
|||
|
|
const matchesVendor = selectedVendor === 'All' || part.offers.some(offer => offer.vendor.name === selectedVendor);
|
|||
|
|
const matchesSearch = !searchTerm ||
|
|||
|
|
part.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|||
|
|
part.description.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|||
|
|
part.brand.name.toLowerCase().includes(searchTerm.toLowerCase());
|
|||
|
|
|
|||
|
|
// Restriction filter logic
|
|||
|
|
let matchesRestriction = true;
|
|||
|
|
if (selectedRestriction) {
|
|||
|
|
if (selectedRestriction === 'NFA') matchesRestriction = !!part.restrictions?.nfa;
|
|||
|
|
else if (selectedRestriction === 'SBR') matchesRestriction = !!part.restrictions?.sbr;
|
|||
|
|
else if (selectedRestriction === 'SUPPRESSOR') matchesRestriction = !!part.restrictions?.suppressor;
|
|||
|
|
else if (selectedRestriction === 'STATE_RESTRICTIONS') matchesRestriction = !!(part.restrictions?.stateRestrictions && part.restrictions.stateRestrictions.length > 0);
|
|||
|
|
else matchesRestriction = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Price range filtering
|
|||
|
|
let matchesPrice = true;
|
|||
|
|
if (priceRange) {
|
|||
|
|
const lowestPrice = Math.min(...part.offers.map(offer => offer.price));
|
|||
|
|
switch (priceRange) {
|
|||
|
|
case 'under-100':
|
|||
|
|
matchesPrice = lowestPrice < 100;
|
|||
|
|
break;
|
|||
|
|
case '100-300':
|
|||
|
|
matchesPrice = lowestPrice >= 100 && lowestPrice <= 300;
|
|||
|
|
break;
|
|||
|
|
case '300-500':
|
|||
|
|
matchesPrice = lowestPrice > 300 && lowestPrice <= 500;
|
|||
|
|
break;
|
|||
|
|
case 'over-500':
|
|||
|
|
matchesPrice = lowestPrice > 500;
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return matchesCategory && matchesBrand && matchesVendor && matchesSearch && matchesPrice && matchesRestriction;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Sort parts
|
|||
|
|
const sortedParts = [...filteredParts].sort((a, b) => {
|
|||
|
|
let aValue: any, bValue: any;
|
|||
|
|
|
|||
|
|
if (sortField === 'price') {
|
|||
|
|
aValue = Math.min(...a.offers.map(offer => offer.price));
|
|||
|
|
bValue = Math.min(...b.offers.map(offer => offer.price));
|
|||
|
|
} else if (sortField === 'category') {
|
|||
|
|
aValue = a.category.name.toLowerCase();
|
|||
|
|
bValue = b.category.name.toLowerCase();
|
|||
|
|
} else {
|
|||
|
|
aValue = a.name.toLowerCase();
|
|||
|
|
bValue = b.name.toLowerCase();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (sortDirection === 'asc') {
|
|||
|
|
return aValue > bValue ? 1 : -1;
|
|||
|
|
} else {
|
|||
|
|
return aValue < bValue ? 1 : -1;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const handleSort = (field: SortField) => {
|
|||
|
|
if (sortField === field) {
|
|||
|
|
setSortDirection(sortDirection === 'asc' ? 'desc' : 'asc');
|
|||
|
|
} else {
|
|||
|
|
setSortField(field);
|
|||
|
|
setSortDirection('asc');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const getSortIcon = (field: SortField) => {
|
|||
|
|
if (sortField !== field) {
|
|||
|
|
return '↕️';
|
|||
|
|
}
|
|||
|
|
return sortDirection === 'asc' ? '↑' : '↓';
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const clearFilters = () => {
|
|||
|
|
setSelectedCategory('All');
|
|||
|
|
setSelectedBrand('All');
|
|||
|
|
setSelectedVendor('All');
|
|||
|
|
setSearchTerm('');
|
|||
|
|
setPriceRange('');
|
|||
|
|
setSelectedRestriction('');
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const hasActiveFilters = selectedCategory !== 'All' || selectedBrand !== 'All' || selectedVendor !== 'All' || searchTerm || priceRange || selectedRestriction;
|
|||
|
|
|
|||
|
|
// RestrictionBadge for table view (show NFA/SBR/Suppressor/State)
|
|||
|
|
const getRestrictionFlags = (restrictions?: Product['restrictions']) => {
|
|||
|
|
const flags: string[] = [];
|
|||
|
|
if (restrictions?.nfa) flags.push('NFA');
|
|||
|
|
if (restrictions?.sbr) flags.push('SBR');
|
|||
|
|
if (restrictions?.suppressor) flags.push('SUPPRESSOR');
|
|||
|
|
if (restrictions?.stateRestrictions && restrictions.stateRestrictions.length > 0) flags.push('STATE_RESTRICTIONS');
|
|||
|
|
return flags;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<main className="min-h-screen bg-neutral-50 dark:bg-neutral-900">
|
|||
|
|
{/* Page Title */}
|
|||
|
|
<div className="bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700">
|
|||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|||
|
|
<h1 className="text-3xl font-bold text-neutral-900 dark:text-white">
|
|||
|
|
Parts Catalog
|
|||
|
|
{selectedCategory !== 'All' && (
|
|||
|
|
<span className="text-primary-600 dark:text-primary-400 ml-2 text-2xl">
|
|||
|
|
- {selectedCategory}
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</h1>
|
|||
|
|
<p className="text-neutral-600 dark:text-neutral-400 mt-2">
|
|||
|
|
{selectedCategory !== 'All'
|
|||
|
|
? `Showing ${selectedCategory} parts for your build`
|
|||
|
|
: 'Browse and filter firearm parts for your build'
|
|||
|
|
}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Search and Filters */}
|
|||
|
|
<div className="bg-white dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700">
|
|||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
|||
|
|
{/* Search Row */}
|
|||
|
|
<div className="mb-4 flex justify-end">
|
|||
|
|
<div className="w-1/2">
|
|||
|
|
<SearchInput
|
|||
|
|
label="Search"
|
|||
|
|
value={searchTerm}
|
|||
|
|
onChange={setSearchTerm}
|
|||
|
|
placeholder="Search parts..."
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Filters Row */}
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-6 gap-4">
|
|||
|
|
{/* Category Dropdown */}
|
|||
|
|
<Dropdown
|
|||
|
|
label="Category"
|
|||
|
|
value={selectedCategory}
|
|||
|
|
onChange={setSelectedCategory}
|
|||
|
|
options={categories}
|
|||
|
|
placeholder="All categories"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Brand Dropdown */}
|
|||
|
|
<Dropdown
|
|||
|
|
label="Brand"
|
|||
|
|
value={selectedBrand}
|
|||
|
|
onChange={setSelectedBrand}
|
|||
|
|
options={brands}
|
|||
|
|
placeholder="All brands"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Vendor Dropdown */}
|
|||
|
|
<Dropdown
|
|||
|
|
label="Vendor"
|
|||
|
|
value={selectedVendor}
|
|||
|
|
onChange={setSelectedVendor}
|
|||
|
|
options={vendors}
|
|||
|
|
placeholder="All vendors"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Price Range */}
|
|||
|
|
<div className="relative">
|
|||
|
|
<Listbox value={priceRange} onChange={setPriceRange}>
|
|||
|
|
<div className="relative">
|
|||
|
|
<Listbox.Label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-1">
|
|||
|
|
Price Range
|
|||
|
|
</Listbox.Label>
|
|||
|
|
<Listbox.Button className="relative w-full cursor-default rounded-lg bg-white dark:bg-neutral-800 py-2 pl-3 pr-10 text-left shadow-sm ring-1 ring-inset ring-neutral-300 dark:ring-neutral-600 focus:outline-none focus:ring-2 focus:ring-primary-500 sm:text-sm">
|
|||
|
|
<span className="block truncate text-neutral-900 dark:text-white">
|
|||
|
|
{priceRange === '' ? 'Select price range' :
|
|||
|
|
priceRange === 'under-100' ? 'Under $100' :
|
|||
|
|
priceRange === '100-300' ? '$100 - $300' :
|
|||
|
|
priceRange === '300-500' ? '$300 - $500' :
|
|||
|
|
priceRange === 'over-500' ? '$500+' : priceRange}
|
|||
|
|
</span>
|
|||
|
|
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
|||
|
|
<ChevronUpDownIcon
|
|||
|
|
className="h-5 w-5 text-neutral-400"
|
|||
|
|
aria-hidden="true"
|
|||
|
|
/>
|
|||
|
|
</span>
|
|||
|
|
</Listbox.Button>
|
|||
|
|
<Transition
|
|||
|
|
as="div"
|
|||
|
|
leave="transition ease-in duration-100"
|
|||
|
|
leaveFrom="opacity-100"
|
|||
|
|
leaveTo="opacity-0"
|
|||
|
|
className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white dark:bg-neutral-800 py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
|
|||
|
|
>
|
|||
|
|
<Listbox.Options>
|
|||
|
|
{[
|
|||
|
|
{ value: '', label: 'Select price range' },
|
|||
|
|
{ value: 'under-100', label: 'Under $100' },
|
|||
|
|
{ value: '100-300', label: '$100 - $300' },
|
|||
|
|
{ value: '300-500', label: '$300 - $500' },
|
|||
|
|
{ value: 'over-500', label: '$500+' }
|
|||
|
|
].map((option, optionIdx) => (
|
|||
|
|
<Listbox.Option
|
|||
|
|
key={optionIdx}
|
|||
|
|
className={({ active }) =>
|
|||
|
|
`relative cursor-default select-none py-2 pl-10 pr-4 ${
|
|||
|
|
active ? 'bg-primary-100 dark:bg-primary-900 text-primary-900 dark:text-primary-100' : 'text-neutral-900 dark:text-white'
|
|||
|
|
}`
|
|||
|
|
}
|
|||
|
|
value={option.value}
|
|||
|
|
>
|
|||
|
|
{({ selected }) => (
|
|||
|
|
<>
|
|||
|
|
<span className={`block truncate ${selected ? 'font-medium' : 'font-normal'}`}>
|
|||
|
|
{option.label}
|
|||
|
|
</span>
|
|||
|
|
{selected ? (
|
|||
|
|
<span className="absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600 dark:text-primary-400">
|
|||
|
|
<CheckIcon className="h-5 w-5" aria-hidden="true" />
|
|||
|
|
</span>
|
|||
|
|
) : null}
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</Listbox.Option>
|
|||
|
|
))}
|
|||
|
|
</Listbox.Options>
|
|||
|
|
</Transition>
|
|||
|
|
</div>
|
|||
|
|
</Listbox>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Restriction Filter */}
|
|||
|
|
<Dropdown
|
|||
|
|
label="Restriction"
|
|||
|
|
value={selectedRestriction}
|
|||
|
|
onChange={setSelectedRestriction}
|
|||
|
|
options={restrictionOptions}
|
|||
|
|
placeholder="All restrictions"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
{/* Clear Filters */}
|
|||
|
|
<div className="flex items-end">
|
|||
|
|
<button
|
|||
|
|
onClick={clearFilters}
|
|||
|
|
disabled={!hasActiveFilters}
|
|||
|
|
className={`w-full px-4 py-2 rounded-lg transition-colors flex items-center justify-center gap-2 ${
|
|||
|
|
hasActiveFilters
|
|||
|
|
? 'bg-accent-600 hover:bg-accent-700 dark:bg-accent-500 dark:hover:bg-accent-600 text-white'
|
|||
|
|
: 'bg-neutral-200 dark:bg-neutral-700 text-neutral-400 dark:text-neutral-500 cursor-not-allowed'
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
<XMarkIcon className="h-4 w-4" />
|
|||
|
|
Clear All
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Parts Display */}
|
|||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|||
|
|
{/* View Toggle and Results Count */}
|
|||
|
|
<div className="flex justify-between items-center mb-6">
|
|||
|
|
<div className="text-sm text-neutral-700 dark:text-neutral-300">
|
|||
|
|
Showing {sortedParts.length} of {mockProducts.length} parts
|
|||
|
|
{hasActiveFilters && (
|
|||
|
|
<span className="ml-2 text-primary-600 dark:text-primary-400">
|
|||
|
|
(filtered)
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* View Toggle */}
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<span className="text-sm text-neutral-600 dark:text-neutral-400">View:</span>
|
|||
|
|
<div className="btn-group">
|
|||
|
|
<button
|
|||
|
|
className={`btn btn-sm ${viewMode === 'table' ? 'btn-active' : ''}`}
|
|||
|
|
onClick={() => setViewMode('table')}
|
|||
|
|
>
|
|||
|
|
Table
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
className={`btn btn-sm ${viewMode === 'cards' ? 'btn-active' : ''}`}
|
|||
|
|
onClick={() => setViewMode('cards')}
|
|||
|
|
>
|
|||
|
|
Cards
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Restriction Alert Example */}
|
|||
|
|
{sortedParts.some(part => part.restrictions?.nfa) && (
|
|||
|
|
<div className="mb-6">
|
|||
|
|
<RestrictionAlert
|
|||
|
|
type="warning"
|
|||
|
|
title="NFA Items Detected"
|
|||
|
|
message="Some items in your search require National Firearms Act registration. Please ensure compliance with all federal and state regulations."
|
|||
|
|
icon="🔒"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Table View */}
|
|||
|
|
{viewMode === 'table' && (
|
|||
|
|
<div className="bg-white dark:bg-neutral-800 shadow-sm rounded-lg overflow-hidden border border-neutral-200 dark:border-neutral-700">
|
|||
|
|
<div className="overflow-x-auto">
|
|||
|
|
<table className="min-w-full divide-y divide-neutral-200 dark:divide-neutral-700">
|
|||
|
|
<thead className="bg-neutral-50 dark:bg-neutral-700">
|
|||
|
|
<tr>
|
|||
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider">
|
|||
|
|
Category
|
|||
|
|
</th>
|
|||
|
|
<th
|
|||
|
|
className="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-600"
|
|||
|
|
onClick={() => handleSort('name')}
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center space-x-1">
|
|||
|
|
<span>Name</span>
|
|||
|
|
<span className="text-sm">{getSortIcon('name')}</span>
|
|||
|
|
</div>
|
|||
|
|
</th>
|
|||
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider">
|
|||
|
|
Brand
|
|||
|
|
</th>
|
|||
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider">
|
|||
|
|
Description
|
|||
|
|
</th>
|
|||
|
|
<th
|
|||
|
|
className="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider cursor-pointer hover:bg-neutral-100 dark:hover:bg-neutral-600"
|
|||
|
|
onClick={() => handleSort('price')}
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center space-x-1">
|
|||
|
|
<span>Price</span>
|
|||
|
|
<span className="text-sm">{getSortIcon('price')}</span>
|
|||
|
|
</div>
|
|||
|
|
</th>
|
|||
|
|
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 dark:text-neutral-300 uppercase tracking-wider">
|
|||
|
|
Actions
|
|||
|
|
</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody className="bg-white dark:bg-neutral-800 divide-y divide-neutral-200 dark:divide-neutral-700">
|
|||
|
|
{sortedParts.map((part) => (
|
|||
|
|
<tr key={part.id} className="hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors">
|
|||
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|||
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 dark:bg-primary-900 text-primary-800 dark:text-primary-200">
|
|||
|
|
{part.category.name}
|
|||
|
|
</span>
|
|||
|
|
</td>
|
|||
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|||
|
|
<div className="text-sm font-medium text-neutral-900 dark:text-white">
|
|||
|
|
{part.name}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-sm text-neutral-500 dark:text-neutral-400">
|
|||
|
|
{part.brand.name}
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|||
|
|
<div className="text-sm text-neutral-900 dark:text-white">
|
|||
|
|
{part.brand.name}
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td className="px-6 py-4">
|
|||
|
|
<div className="text-sm text-neutral-500 dark:text-neutral-400 max-w-xs">
|
|||
|
|
{part.description}
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td className="px-6 py-4 whitespace-nowrap">
|
|||
|
|
<div className="text-sm font-semibold text-neutral-900 dark:text-white">
|
|||
|
|
${Math.min(...part.offers.map(offer => offer.price)).toFixed(2)}
|
|||
|
|
</div>
|
|||
|
|
</td>
|
|||
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
|
|||
|
|
<Link href={`/products/${part.id}`} legacyBehavior>
|
|||
|
|
<a className="btn btn-primary btn-sm">
|
|||
|
|
View Details
|
|||
|
|
</a>
|
|||
|
|
</Link>
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
))}
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Table Footer */}
|
|||
|
|
<div className="bg-neutral-50 dark:bg-neutral-700 px-6 py-3 border-t border-neutral-200 dark:border-neutral-600">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="text-sm text-neutral-700 dark:text-neutral-300">
|
|||
|
|
Showing {sortedParts.length} of {mockProducts.length} parts
|
|||
|
|
{hasActiveFilters && (
|
|||
|
|
<span className="ml-2 text-primary-600 dark:text-primary-400">
|
|||
|
|
(filtered)
|
|||
|
|
</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-sm text-neutral-500 dark:text-neutral-400">
|
|||
|
|
Total Value: ${sortedParts.reduce((sum, part) => sum + Math.min(...part.offers.map(offer => offer.price)), 0).toFixed(2)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Card View */}
|
|||
|
|
{viewMode === 'cards' && (
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
|
|||
|
|
{sortedParts.map((part) => (
|
|||
|
|
<ProductCard key={part.id} product={part} />
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Compact Restriction Legend */}
|
|||
|
|
<div className="mt-8 pt-4 border-t border-neutral-200 dark:border-neutral-700">
|
|||
|
|
<div className="flex items-center justify-center gap-4 text-xs text-neutral-500 dark:text-neutral-400">
|
|||
|
|
<span className="font-medium">Restrictions:</span>
|
|||
|
|
<div className="flex items-center gap-1">
|
|||
|
|
<div className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium bg-red-600 text-white">🔒NFA</div>
|
|||
|
|
<span>National Firearms Act</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-1">
|
|||
|
|
<div className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium bg-orange-600 text-white">📏SBR</div>
|
|||
|
|
<span>Short Barrel Rifle</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-1">
|
|||
|
|
<div className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium bg-purple-600 text-white">🔇Suppressor</div>
|
|||
|
|
<span>Sound Suppressor</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-1">
|
|||
|
|
<div className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium bg-blue-600 text-white">🏪FFL</div>
|
|||
|
|
<span>FFL Required</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-1">
|
|||
|
|
<div className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium bg-yellow-600 text-black">🗺️State</div>
|
|||
|
|
<span>State Restrictions</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-1">
|
|||
|
|
<div className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium bg-pink-600 text-white">🥁High Cap</div>
|
|||
|
|
<span>High Capacity</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-1">
|
|||
|
|
<div className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium bg-green-600 text-white">🤝SilencerShop</div>
|
|||
|
|
<span>SilencerShop Partner</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
);
|
|||
|
|
}
|