Skip to content

Commit d1fcabb

Browse files
w3bdesignw3bdesign
committed
Update products2.tsx
1 parent f05e12f commit d1fcabb

File tree

1 file changed

+9
-105
lines changed

1 file changed

+9
-105
lines changed

‎src/pages/products2.tsx

Lines changed: 9 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { useState } from 'react';
22
import Head from 'next/head';
33
import Layout from '@/components/Layout/Layout.component';
44
import ProductCard from '@/components/Product/ProductCard.component';
5+
import ProductFilters from '@/components/Product/ProductFilters.component';
56
import client from '@/utils/apollo/ApolloClient';
67
import { FETCH_ALL_PRODUCTS_QUERY } from '@/utils/gql/GQL_QUERIES';
78
import type { NextPage, GetStaticProps, InferGetStaticPropsType } from 'next';
@@ -61,32 +62,6 @@ const Products2: NextPage = ({
6162
</Layout>
6263
);
6364

64-
const sizes = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];
65-
const colors = [
66-
{ name: 'Svart', class: 'bg-black' },
67-
{ name: 'Brun', class: 'bg-brown-500' },
68-
{ name: 'Beige', class: 'bg-[#D2B48C]' },
69-
{ name: 'Grå', class: 'bg-gray-500' },
70-
{ name: 'Hvit', class: 'bg-white border border-gray-300' },
71-
{ name: 'Blå', class: 'bg-blue-500' }
72-
];
73-
74-
const toggleSize = (size: string) => {
75-
setSelectedSizes(prev =>
76-
prev.includes(size)
77-
? prev.filter(s => s !== size)
78-
: [...prev, size]
79-
);
80-
};
81-
82-
const toggleColor = (color: string) => {
83-
setSelectedColors(prev =>
84-
prev.includes(color)
85-
? prev.filter(c => c !== color)
86-
: [...prev, color]
87-
);
88-
};
89-
9065
return (
9166
<Layout title="Produkter">
9267
<Head>
@@ -95,85 +70,14 @@ const Products2: NextPage = ({
9570

9671
<div className="container mx-auto px-4 py-8">
9772
<div className="flex flex-col md:flex-row gap-8">
98-
{/* Sidebar Filters */}
99-
<div className="w-full md:w-64 flex-shrink-0">
100-
<div className="bg-white p-6 rounded-lg shadow-sm">
101-
<div className="mb-8">
102-
<h3 className="font-semibold mb-4">PRODUKT TYPE</h3>
103-
<div className="space-y-2">
104-
<label className="flex items-center">
105-
<input type="checkbox" className="form-checkbox" />
106-
<span className="ml-2">T-Shirts</span>
107-
</label>
108-
<label className="flex items-center">
109-
<input type="checkbox" className="form-checkbox" />
110-
<span className="ml-2">Gensere</span>
111-
</label>
112-
<label className="flex items-center">
113-
<input type="checkbox" className="form-checkbox" />
114-
<span className="ml-2">Singlet</span>
115-
</label>
116-
<label className="flex items-center">
117-
<input type="checkbox" className="form-checkbox" />
118-
<span className="ml-2">Skjorter</span>
119-
</label>
120-
</div>
121-
</div>
122-
123-
<div className="mb-8">
124-
<h3 className="font-semibold mb-4">PRIS</h3>
125-
<input
126-
type="range"
127-
min="0"
128-
max="1000"
129-
value={priceRange[1]}
130-
onChange={(e) => setPriceRange([priceRange[0], parseInt(e.target.value)])}
131-
className="w-full"
132-
/>
133-
<div className="flex justify-between mt-2">
134-
<span>kr {priceRange[0]}</span>
135-
<span>kr {priceRange[1]}</span>
136-
</div>
137-
</div>
138-
139-
<div className="mb-8">
140-
<h3 className="font-semibold mb-4">STØRRELSE</h3>
141-
<div className="grid grid-cols-3 gap-2">
142-
{sizes.map((size) => (
143-
<button
144-
key={size}
145-
onClick={() => toggleSize(size)}
146-
className={`px-3 py-1 border rounded ${
147-
selectedSizes.includes(size)
148-
? 'bg-gray-900 text-white'
149-
: 'hover:bg-gray-100'
150-
}`}
151-
>
152-
{size}
153-
</button>
154-
))}
155-
</div>
156-
</div>
157-
158-
<div>
159-
<h3 className="font-semibold mb-4">FARGE</h3>
160-
<div className="grid grid-cols-3 gap-2">
161-
{colors.map((color) => (
162-
<button
163-
key={color.name}
164-
onClick={() => toggleColor(color.name)}
165-
className={`w-8 h-8 rounded-full ${color.class} ${
166-
selectedColors.includes(color.name)
167-
? 'ring-2 ring-offset-2 ring-gray-900'
168-
: ''
169-
}`}
170-
title={color.name}
171-
/>
172-
))}
173-
</div>
174-
</div>
175-
</div>
176-
</div>
73+
<ProductFilters
74+
selectedSizes={selectedSizes}
75+
setSelectedSizes={setSelectedSizes}
76+
selectedColors={selectedColors}
77+
setSelectedColors={setSelectedColors}
78+
priceRange={priceRange}
79+
setPriceRange={setPriceRange}
80+
/>
17781

17882
{/* Main Content */}
17983
<div className="flex-1">

0 commit comments

Comments
 (0)