From dd483e9b440f7509bd2131b6cd96d32d009bc96f Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 16:46:07 +0000 Subject: [PATCH 1/3] Add src/app/admin/page.tsx --- src/app/admin/page.tsx | 339 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 339 insertions(+) create mode 100644 src/app/admin/page.tsx diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx new file mode 100644 index 0000000..3de932d --- /dev/null +++ b/src/app/admin/page.tsx @@ -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([ + { + 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(null); + const [formData, setFormData] = useState({ + 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) => { + 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 ( + + + +
+
+
+

Admin Panel

+

Manage your clothing inventory

+
+ + {/* Add Product Button */} + + + {/* Products Table */} +
+
+ + + + + + + + + + + + + {products.map((product) => ( + + + + + + + + + ))} + +
Product NamePriceSizeColorStockActions
{product.name}{product.price}{product.size || "-"}{product.color || "-"}{product.stock || 0} +
+ + +
+
+
+
+
+
+ + {/* Modal Form */} + {isFormOpen && ( +
+
+
+

+ {editingId ? "Edit Product" : "Add New Product"} +

+ +
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+
+ +
+ + +
+
+
+ )} + + ); +} -- 2.49.1 From e69cdf0154e62345a94705550e01fef811360761 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 16:46:08 +0000 Subject: [PATCH 2/3] Update src/app/page.tsx --- src/app/page.tsx | 226 +++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 191 insertions(+), 35 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 41fbb4c..3a1bf21 100644 --- a/src/app/page.tsx +++ b/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([]); + const [selectedColors, setSelectedColors] = useState([]); + 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 ( @@ -45,7 +106,7 @@ export default function LandingPage() {
- + {/* Filter Section */} +
+
+
+

Featured Products

+ +
+ +
+ {/* Filters Sidebar */} +
+
+

Filters

+ + {/* Size Filter */} +
+

Size

+
+ {uniqueSizes.map(size => ( + + ))} +
+
+ + {/* Color Filter */} +
+

Color

+
+ {uniqueColors.map(color => ( + + ))} +
+
+ + {/* Price Filter */} +
+

Price Range

+
+
+ 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" + /> + 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" + /> +
+

${priceRange[0]}.00 - ${priceRange[1]}.00

+
+
+ + {/* Reset Button */} + +
+
+ + {/* Products Grid */} +
+ +
+
+ + {filteredProducts.length === 0 && ( +
+

No products found matching your filters.

+ +
+ )} +
+
@@ -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() {
); -} +} \ No newline at end of file -- 2.49.1 From 11f901c6bfdfaca4f8cdbaedf59415c86098e6a5 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 16:48:07 +0000 Subject: [PATCH 3/3] Update src/components/shared/SvgTextLogo/SvgTextLogo.tsx --- .../shared/SvgTextLogo/SvgTextLogo.tsx | 64 ++++++++----------- 1 file changed, 28 insertions(+), 36 deletions(-) diff --git a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx index f214190..6811c0e 100644 --- a/src/components/shared/SvgTextLogo/SvgTextLogo.tsx +++ b/src/components/shared/SvgTextLogo/SvgTextLogo.tsx @@ -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(function SvgTextLogo({ - logoText, - adjustHeightFactor, - verticalAlign = "top", - className = "", -}) { - const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor); - +const SvgTextLogo: React.FC = ({ + text, + className = '', + fontSize = 48, + fontWeight = '700', + letterSpacing = '0.05em', + fill = 'currentColor', +}) => { return ( - {logoText} + {text} ); -}); - -SvgTextLogo.displayName = "SvgTextLogo"; +}; export default SvgTextLogo; -- 2.49.1