Merge version_3 into main #3
339
src/app/admin/page.tsx
Normal file
339
src/app/admin/page.tsx
Normal file
@@ -0,0 +1,339 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import { Plus, Edit2, Trash2, X, Check } from 'lucide-react';
|
||||
|
||||
interface Product {
|
||||
id: string;
|
||||
name: string;
|
||||
price: string;
|
||||
imageSrc: string;
|
||||
imageAlt?: string;
|
||||
size?: string;
|
||||
color?: string;
|
||||
stock?: number;
|
||||
}
|
||||
|
||||
interface FormData {
|
||||
name: string;
|
||||
price: string;
|
||||
imageSrc: string;
|
||||
imageAlt: string;
|
||||
size: string;
|
||||
color: string;
|
||||
stock: string;
|
||||
}
|
||||
|
||||
export default function AdminPage() {
|
||||
const [products, setProducts] = useState<Product[]>([
|
||||
{
|
||||
id: "1", name: "Elegance Dress", price: "$89.99", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2692.jpg", imageAlt: "Stylish women's dress", size: "M", color: "Black", stock: 15
|
||||
},
|
||||
{
|
||||
id: "2", name: "Classic Oxford Shirt", price: "$64.99", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-man-suit_171337-19984.jpg", imageAlt: "Men's button-up shirt", size: "L", color: "White", stock: 22
|
||||
},
|
||||
{
|
||||
id: "3", name: "Premium Denim Jeans", price: "$79.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-winter-cloths_1303-16949.jpg", imageAlt: "Classic denim jeans", size: "32", color: "Blue", stock: 18
|
||||
}
|
||||
]);
|
||||
|
||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||
const [editingId, setEditingId] = useState<string | null>(null);
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
name: "", price: "", imageSrc: "", imageAlt: "", size: "", color: "", stock: ""
|
||||
});
|
||||
|
||||
const handleOpenForm = (product?: Product) => {
|
||||
if (product) {
|
||||
setEditingId(product.id);
|
||||
setFormData({
|
||||
name: product.name,
|
||||
price: product.price,
|
||||
imageSrc: product.imageSrc,
|
||||
imageAlt: product.imageAlt || "", size: product.size || "", color: product.color || "", stock: product.stock?.toString() || ""
|
||||
});
|
||||
} else {
|
||||
setEditingId(null);
|
||||
setFormData({
|
||||
name: "", price: "", imageSrc: "", imageAlt: "", size: "", color: "", stock: ""
|
||||
});
|
||||
}
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
const handleCloseForm = () => {
|
||||
setIsFormOpen(false);
|
||||
setEditingId(null);
|
||||
};
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSaveProduct = () => {
|
||||
if (!formData.name || !formData.price) {
|
||||
alert("Please fill in required fields");
|
||||
return;
|
||||
}
|
||||
|
||||
if (editingId) {
|
||||
setProducts(products.map(p =>
|
||||
p.id === editingId
|
||||
? {
|
||||
...p,
|
||||
name: formData.name,
|
||||
price: formData.price,
|
||||
imageSrc: formData.imageSrc,
|
||||
imageAlt: formData.imageAlt,
|
||||
size: formData.size,
|
||||
color: formData.color,
|
||||
stock: parseInt(formData.stock) || 0
|
||||
}
|
||||
: p
|
||||
));
|
||||
} else {
|
||||
const newProduct: Product = {
|
||||
id: Date.now().toString(),
|
||||
name: formData.name,
|
||||
price: formData.price,
|
||||
imageSrc: formData.imageSrc,
|
||||
imageAlt: formData.imageAlt,
|
||||
size: formData.size,
|
||||
color: formData.color,
|
||||
stock: parseInt(formData.stock) || 0
|
||||
};
|
||||
setProducts([...products, newProduct]);
|
||||
}
|
||||
handleCloseForm();
|
||||
};
|
||||
|
||||
const handleDeleteProduct = (id: string) => {
|
||||
if (confirm("Are you sure you want to delete this product?")) {
|
||||
setProducts(products.filter(p => p.id !== id));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="StyleHub"
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Shop", id: "products" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Reviews", id: "testimonials" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Back to Store", href: "/"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="min-h-screen bg-background pt-32 pb-16">
|
||||
<div className="max-w-6xl mx-auto px-4">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-4xl font-semibold mb-2 text-foreground">Admin Panel</h1>
|
||||
<p className="text-lg text-foreground/70">Manage your clothing inventory</p>
|
||||
</div>
|
||||
|
||||
{/* Add Product Button */}
|
||||
<button
|
||||
onClick={() => handleOpenForm()}
|
||||
className="mb-8 flex items-center gap-2 px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
<Plus size={20} />
|
||||
Add New Product
|
||||
</button>
|
||||
|
||||
{/* Products Table */}
|
||||
<div className="bg-card rounded-lg overflow-hidden shadow-lg">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-primary-cta/10">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Product Name</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Price</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Size</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Color</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Stock</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-accent/20">
|
||||
{products.map((product) => (
|
||||
<tr key={product.id} className="hover:bg-background/50 transition-colors">
|
||||
<td className="px-6 py-4 text-sm text-foreground">{product.name}</td>
|
||||
<td className="px-6 py-4 text-sm text-foreground">{product.price}</td>
|
||||
<td className="px-6 py-4 text-sm text-foreground">{product.size || "-"}</td>
|
||||
<td className="px-6 py-4 text-sm text-foreground">{product.color || "-"}</td>
|
||||
<td className="px-6 py-4 text-sm text-foreground">{product.stock || 0}</td>
|
||||
<td className="px-6 py-4 text-sm">
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => handleOpenForm(product)}
|
||||
className="p-2 hover:bg-background rounded transition-colors"
|
||||
title="Edit"
|
||||
>
|
||||
<Edit2 size={18} className="text-primary-cta" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeleteProduct(product.id)}
|
||||
className="p-2 hover:bg-background rounded transition-colors"
|
||||
title="Delete"
|
||||
>
|
||||
<Trash2 size={18} className="text-red-500" />
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal Form */}
|
||||
{isFormOpen && (
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
|
||||
<div className="bg-card rounded-lg p-8 max-w-2xl w-full max-h-[90vh] overflow-y-auto">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-semibold text-foreground">
|
||||
{editingId ? "Edit Product" : "Add New Product"}
|
||||
</h2>
|
||||
<button
|
||||
onClick={handleCloseForm}
|
||||
className="p-2 hover:bg-background rounded transition-colors"
|
||||
>
|
||||
<X size={24} className="text-foreground" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Product Name *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||
placeholder="e.g., Elegant Dress"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Price *</label>
|
||||
<input
|
||||
type="text"
|
||||
name="price"
|
||||
value={formData.price}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||
placeholder="e.g., $89.99"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Image URL</label>
|
||||
<input
|
||||
type="text"
|
||||
name="imageSrc"
|
||||
value={formData.imageSrc}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||
placeholder="https://..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Image Alt Text</label>
|
||||
<input
|
||||
type="text"
|
||||
name="imageAlt"
|
||||
value={formData.imageAlt}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||
placeholder="e.g., Stylish women's dress"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Size</label>
|
||||
<input
|
||||
type="text"
|
||||
name="size"
|
||||
value={formData.size}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||
placeholder="e.g., M, L, XL"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Color</label>
|
||||
<input
|
||||
type="text"
|
||||
name="color"
|
||||
value={formData.color}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||
placeholder="e.g., Black, Blue"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-2">Stock</label>
|
||||
<input
|
||||
type="number"
|
||||
name="stock"
|
||||
value={formData.stock}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-2 border border-accent/30 rounded-lg bg-background text-foreground focus:outline-none focus:border-primary-cta"
|
||||
placeholder="e.g., 15"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4 mt-8">
|
||||
<button
|
||||
onClick={handleSaveProduct}
|
||||
className="flex-1 flex items-center justify-center gap-2 px-6 py-3 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
<Check size={20} />
|
||||
{editingId ? "Update Product" : "Add Product"}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleCloseForm}
|
||||
className="flex-1 px-6 py-3 border border-accent/30 text-foreground rounded-lg hover:bg-background/50 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
226
src/app/page.tsx
226
src/app/page.tsx
@@ -1,5 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
@@ -9,9 +10,69 @@ import TestimonialCardThirteen from '@/components/sections/testimonial/Testimoni
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import { Sparkles, TrendingUp, Heart, Award, Leaf, Users, Star, Mail, BarChart3 } from 'lucide-react';
|
||||
import { Sparkles, TrendingUp, Heart, Award, Leaf, Users, Star, Mail, BarChart3, Filter } from 'lucide-react';
|
||||
|
||||
interface Product {
|
||||
id: string;
|
||||
name: string;
|
||||
price: string;
|
||||
imageSrc: string;
|
||||
imageAlt?: string;
|
||||
size?: string;
|
||||
color?: string;
|
||||
stock?: number;
|
||||
}
|
||||
|
||||
export default function LandingPage() {
|
||||
const allProducts: Product[] = [
|
||||
{
|
||||
id: "1", name: "Elegance Dress", price: "$89.99", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2692.jpg", imageAlt: "Stylish women's dress", size: "M", color: "Black", stock: 15
|
||||
},
|
||||
{
|
||||
id: "2", name: "Classic Oxford Shirt", price: "$64.99", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-man-suit_171337-19984.jpg", imageAlt: "Men's button-up shirt", size: "L", color: "White", stock: 22
|
||||
},
|
||||
{
|
||||
id: "3", name: "Premium Denim Jeans", price: "$79.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-winter-cloths_1303-16949.jpg", imageAlt: "Classic denim jeans", size: "32", color: "Blue", stock: 18
|
||||
}
|
||||
];
|
||||
|
||||
// Filter state
|
||||
const [selectedSizes, setSelectedSizes] = useState<string[]>([]);
|
||||
const [selectedColors, setSelectedColors] = useState<string[]>([]);
|
||||
const [priceRange, setPriceRange] = useState<[number, number]>([0, 150]);
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
// Extract unique sizes, colors, and price from products
|
||||
const uniqueSizes = Array.from(new Set(allProducts.map(p => p.size).filter(Boolean)));
|
||||
const uniqueColors = Array.from(new Set(allProducts.map(p => p.color).filter(Boolean)));
|
||||
|
||||
// Filter products based on selected criteria
|
||||
const filteredProducts = allProducts.filter(product => {
|
||||
const price = parseFloat(product.price.replace('$', ''));
|
||||
const sizeMatch = selectedSizes.length === 0 || selectedSizes.includes(product.size || '');
|
||||
const colorMatch = selectedColors.length === 0 || selectedColors.includes(product.color || '');
|
||||
const priceMatch = price >= priceRange[0] && price <= priceRange[1];
|
||||
return sizeMatch && colorMatch && priceMatch;
|
||||
});
|
||||
|
||||
const handleSizeToggle = (size: string) => {
|
||||
setSelectedSizes(prev =>
|
||||
prev.includes(size) ? prev.filter(s => s !== size) : [...prev, size]
|
||||
);
|
||||
};
|
||||
|
||||
const handleColorToggle = (color: string) => {
|
||||
setSelectedColors(prev =>
|
||||
prev.includes(color) ? prev.filter(c => c !== color) : [...prev, color]
|
||||
);
|
||||
};
|
||||
|
||||
const handleResetFilters = () => {
|
||||
setSelectedSizes([]);
|
||||
setSelectedColors([]);
|
||||
setPriceRange([0, 150]);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
@@ -19,7 +80,7 @@ export default function LandingPage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeLargeTitles"
|
||||
background="noise"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
@@ -36,7 +97,7 @@ export default function LandingPage() {
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Shop Now", href: "#products"
|
||||
text: "Admin", href: "/admin"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -45,7 +106,7 @@ export default function LandingPage() {
|
||||
<HeroSplitKpi
|
||||
title="Discover Premium Fashion for Every Occasion"
|
||||
description="Elevate your wardrobe with our curated collection of high-quality clothing. From casual essentials to elegant statements, find pieces that express your unique style and confidence."
|
||||
background={{ variant: "noise" }}
|
||||
background={{ variant: "glowing-orb" }}
|
||||
kpis={[
|
||||
{ value: "10K+", label: "Happy Customers" },
|
||||
{ value: "500+", label: "Premium Items" },
|
||||
@@ -73,35 +134,130 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardOne
|
||||
title="Featured Products"
|
||||
description="Handpicked selections of our finest clothing items, carefully curated for style and comfort."
|
||||
tag="Best Sellers"
|
||||
tagIcon={TrendingUp}
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "1", name: "Elegance Dress", price: "$89.99", imageSrc: "http://img.b2bpic.net/free-photo/fashion-portrait-young-elegant-woman_1328-2692.jpg", imageAlt: "Stylish women's dress"
|
||||
},
|
||||
{
|
||||
id: "2", name: "Classic Oxford Shirt", price: "$64.99", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-confident-man-suit_171337-19984.jpg", imageAlt: "Men's button-up shirt"
|
||||
},
|
||||
{
|
||||
id: "3", name: "Premium Denim Jeans", price: "$79.99", imageSrc: "http://img.b2bpic.net/free-photo/woman-model-demonstrating-winter-cloths_1303-16949.jpg", imageAlt: "Classic denim jeans"
|
||||
}
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
buttons={[
|
||||
{ text: "View All Products", href: "#products" }
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
containerClassName="w-full"
|
||||
textBoxTitleClassName="text-3xl lg:text-4xl font-semibold"
|
||||
textBoxDescriptionClassName="text-lg text-foreground/70"
|
||||
/>
|
||||
{/* Filter Section */}
|
||||
<div className="w-full px-4 md:px-8 py-8 bg-background">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-semibold text-foreground">Featured Products</h2>
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-primary-cta/10 text-primary-cta rounded-lg hover:bg-primary-cta/20 transition-colors md:hidden"
|
||||
>
|
||||
<Filter size={18} />
|
||||
Filters
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-6">
|
||||
{/* Filters Sidebar */}
|
||||
<div className={`${showFilters ? 'block' : 'hidden'} md:block md:col-span-1`}>
|
||||
<div className="bg-card rounded-lg p-6 sticky top-24">
|
||||
<h3 className="text-lg font-semibold text-foreground mb-4">Filters</h3>
|
||||
|
||||
{/* Size Filter */}
|
||||
<div className="mb-6 pb-6 border-b border-accent/20">
|
||||
<h4 className="font-medium text-foreground mb-3">Size</h4>
|
||||
<div className="space-y-2">
|
||||
{uniqueSizes.map(size => (
|
||||
<label key={size} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedSizes.includes(size)}
|
||||
onChange={() => handleSizeToggle(size)}
|
||||
className="w-4 h-4 rounded border-accent/30"
|
||||
/>
|
||||
<span className="text-sm text-foreground">{size}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Color Filter */}
|
||||
<div className="mb-6 pb-6 border-b border-accent/20">
|
||||
<h4 className="font-medium text-foreground mb-3">Color</h4>
|
||||
<div className="space-y-2">
|
||||
{uniqueColors.map(color => (
|
||||
<label key={color} className="flex items-center gap-2 cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedColors.includes(color)}
|
||||
onChange={() => handleColorToggle(color)}
|
||||
className="w-4 h-4 rounded border-accent/30"
|
||||
/>
|
||||
<span className="text-sm text-foreground">{color}</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Price Filter */}
|
||||
<div className="mb-6">
|
||||
<h4 className="font-medium text-foreground mb-3">Price Range</h4>
|
||||
<div className="space-y-2">
|
||||
<div className="flex gap-2">
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="150"
|
||||
value={priceRange[0]}
|
||||
onChange={(e) => setPriceRange([parseFloat(e.target.value), priceRange[1]])}
|
||||
className="w-full px-3 py-2 border border-accent/30 rounded bg-background text-foreground text-sm focus:outline-none focus:border-primary-cta"
|
||||
placeholder="Min"
|
||||
/>
|
||||
<input
|
||||
type="number"
|
||||
min="0"
|
||||
max="150"
|
||||
value={priceRange[1]}
|
||||
onChange={(e) => setPriceRange([priceRange[0], parseFloat(e.target.value)])}
|
||||
className="w-full px-3 py-2 border border-accent/30 rounded bg-background text-foreground text-sm focus:outline-none focus:border-primary-cta"
|
||||
placeholder="Max"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-foreground/60">${priceRange[0]}.00 - ${priceRange[1]}.00</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Reset Button */}
|
||||
<button
|
||||
onClick={handleResetFilters}
|
||||
className="w-full px-4 py-2 border border-accent/30 text-foreground rounded-lg hover:bg-background/50 transition-colors text-sm font-medium"
|
||||
>
|
||||
Reset Filters
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Products Grid */}
|
||||
<div className="md:col-span-3">
|
||||
<ProductCardOne
|
||||
title=""
|
||||
description=""
|
||||
products={filteredProducts}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
containerClassName="w-full"
|
||||
textBoxTitleClassName="text-3xl lg:text-4xl font-semibold"
|
||||
textBoxDescriptionClassName="text-lg text-foreground/70"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{filteredProducts.length === 0 && (
|
||||
<div className="text-center py-12">
|
||||
<p className="text-lg text-foreground/60">No products found matching your filters.</p>
|
||||
<button
|
||||
onClick={handleResetFilters}
|
||||
className="mt-4 px-6 py-2 bg-primary-cta text-primary-cta-text rounded-lg hover:opacity-90 transition-opacity"
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
@@ -206,7 +362,7 @@ export default function LandingPage() {
|
||||
tagAnimation="slide-up"
|
||||
title="Stay Updated with Fashion Trends"
|
||||
description="Subscribe to our newsletter and receive exclusive offers, styling tips, and first access to new collections delivered straight to your inbox."
|
||||
background={{ variant: "noise" }}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
useInvertedBackground={false}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543701.jpg"
|
||||
imageAlt="Fashion creative workspace"
|
||||
@@ -257,4 +413,4 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,51 +1,43 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import React from 'react';
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
text: string;
|
||||
className?: string;
|
||||
fontSize?: number;
|
||||
fontWeight?: string;
|
||||
letterSpacing?: string;
|
||||
fill?: string;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({
|
||||
text,
|
||||
className = '',
|
||||
fontSize = 48,
|
||||
fontWeight = '700',
|
||||
letterSpacing = '0.05em',
|
||||
fill = 'currentColor',
|
||||
}) => {
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
viewBox={`0 0 ${text.length * (fontSize * 0.6)} ${fontSize * 1.2}`}
|
||||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
x="50%"
|
||||
y="50%"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
fontSize={fontSize}
|
||||
fontWeight={fontWeight}
|
||||
letterSpacing={letterSpacing}
|
||||
fill={fill}
|
||||
>
|
||||
{logoText}
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
};
|
||||
|
||||
export default SvgTextLogo;
|
||||
|
||||
Reference in New Issue
Block a user