From a92719db37afc5cdf375f3ad5ce8e9602450ab2d Mon Sep 17 00:00:00 2001 From: Biswa Kalyan Bhuyan Date: Wed, 28 May 2025 15:06:59 +0530 Subject: feat: added the docs page --- docs/components.md | 327 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 327 insertions(+) create mode 100644 docs/components.md (limited to 'docs/components.md') diff --git a/docs/components.md b/docs/components.md new file mode 100644 index 0000000..5303dc0 --- /dev/null +++ b/docs/components.md @@ -0,0 +1,327 @@ +# Frontend Component Structure + +This document outlines the component structure for the e-commerce frontend, inspired by turntupfashion.com. + +## Core Components + +### Layout Components + +- `Layout.jsx` - Main layout wrapper with header and footer +- `Header.jsx` - Site header with navigation, search, and cart +- `Footer.jsx` - Site footer with links and newsletter signup +- `MobileMenu.jsx` - Responsive navigation for mobile devices +- `Breadcrumbs.jsx` - Navigation breadcrumbs component + +### Navigation Components + +- `MainNav.jsx` - Primary navigation menu +- `CategoryMenu.jsx` - Category dropdown navigation +- `CountrySelector.jsx` - Country and currency selector component +- `PromoBanner.jsx` - Promotional announcement banner (e.g., "A24" discount code) + +### Product Components + +- `ProductCard.jsx` - Card display for product in listings +- `ProductGrid.jsx` - Grid layout for product listings +- `ProductGallery.jsx` - Image gallery for product detail page +- `ProductDetails.jsx` - Product information display +- `ProductVariants.jsx` - Size/color selection component +- `AddToCartButton.jsx` - Button with quantity selector + +### Cart Components + +- `CartIcon.jsx` - Cart icon with item count indicator +- `CartDrawer.jsx` - Slide-out cart drawer +- `CartItem.jsx` - Individual item in cart +- `CartSummary.jsx` - Order summary with subtotal and discounts + +### Checkout Components + +- `CheckoutForm.jsx` - Multi-step checkout form +- `ShippingForm.jsx` - Shipping information form +- `PaymentForm.jsx` - Payment information with Stripe integration +- `OrderSummary.jsx` - Order review component + +### User Account Components + +- `LoginForm.jsx` - User login form +- `RegisterForm.jsx` - New user registration +- `AccountDashboard.jsx` - User account overview +- `OrderHistory.jsx` - Past order display + +### UI Components + +- `Button.jsx` - Styled button component +- `Input.jsx` - Form input field +- `Select.jsx` - Dropdown select component +- `Modal.jsx` - Popup modal component +- `Spinner.jsx` - Loading spinner +- `Toast.jsx` - Notification toast + +## Page Structure + +### Home Page (`pages/index.js`) +```jsx + + + + + + + + +``` + +### Product Listing Page (`pages/products/index.js`) +```jsx + + +
+
+ +
+
+ + + +
+
+ +``` + +### Product Detail Page (`pages/products/[slug].js`) +```jsx + + +
+ +
+ + + + +
+
+ + +``` + +### Cart Page (`pages/cart.js`) +```jsx + + +

Your Cart

+ {cartItems.length > 0 ? ( +
+
+ {cartItems.map(item => ( + + ))} +
+
+ + + +
+
+ ) : ( + + )} + +``` + +### Checkout Page (`pages/checkout.js`) +```jsx + + + +
+
+ {currentStep === 'information' && } + {currentStep === 'shipping' && } + {currentStep === 'payment' && } +
+
+ +
+
+ +``` + +## Component Examples + +### Promo Banner Component + +```jsx +// components/PromoBanner.jsx +import { useState } from 'react'; + +export default function PromoBanner({ code, message }) { + const [isVisible, setIsVisible] = useState(true); + + if (!isVisible) return null; + + return ( +
+ {message} Use code {code} at checkout + +
+ ); +} +``` + +### Product Card Component + +```jsx +// components/ProductCard.jsx +import Image from 'next/image'; +import Link from 'next/link'; + +export default function ProductCard({ product }) { + return ( +
+
+ +
+ {product.name} +
+ {product.compareAtPrice && ( + + Sale + + )} + +
+ +
+
+

+ + {product.name} + +

+
+
+ {product.compareAtPrice ? ( +
+ + ${product.price.toFixed(2)} + + + ${product.compareAtPrice.toFixed(2)} + +
+ ) : ( + + ${product.price.toFixed(2)} + + )} +
+
+
+ ); +} +``` + +### Add to Cart Button + +```jsx +// components/AddToCartButton.jsx +import { useState } from 'react'; +import { useCart } from '@/contexts/CartContext'; + +export default function AddToCartButton({ product, selectedVariant }) { + const [quantity, setQuantity] = useState(1); + const { addItem } = useCart(); + + const handleAddToCart = () => { + if (!selectedVariant) { + // Show error - need to select size/color + return; + } + + addItem(product, quantity, selectedVariant); + + // Show success toast + }; + + return ( +
+
+ + setQuantity(Math.max(1, parseInt(e.target.value) || 1))} + className="w-16 h-10 border-t border-b border-gray-300 text-center" + /> + +
+ + +
+ ); +} +``` + +## CSS and Styling + +The project uses Tailwind CSS for styling with some additional custom styles where needed. Key style considerations: + +1. **Color Scheme** + - Primary: Black (#000000) + - Accent: Indigo (#4F46E5) + - Backgrounds: White/light grays + - Text: Dark gray for body, black for headings + +2. **Typography** + - Primary font: Inter (sans-serif) + - Heading sizes: h1 (2rem), h2 (1.5rem), h3 (1.25rem) + - Body text: 1rem (16px) + +3. **Spacing System** + - Based on Tailwind's default spacing scale + - Consistent padding/margins for sections (py-16, px-4) + +4. **Responsive Breakpoints** + - Mobile first approach + - Key breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px) + +## Component State Management + +The application uses React Context for global state management: + +1. **CartContext** - Manages shopping cart items and operations +2. **AuthContext** - Handles user authentication state +3. **UIContext** - Controls UI elements like modals and notifications + +For complex state logic, we use the reducer pattern with the `useReducer` hook. \ No newline at end of file -- cgit v1.2.3-59-g8ed1b