🌱 响应式 Planto 电子商务网站，采用 React、Vite、TypeScript 和 Tailwind CSS 🌱

欢迎踏上现代网络开发的精彩旅程！🚀 在这个项目中，我们将使用尖端技术创建一个完全响应的电子商务网站，用于销售草药：**React**、**Vite**、**TypeScript** 和 **Tailwind CSS**。这个项目非常适合希望在构建实际应用程序的同时磨练技能的各级开发人员。

💻特点：

令人惊叹的主页：以引人注目的设计来欢迎您的访客。

顺畅的结账流程：通过用户友好的结账页面简化购买流程。

详细的植物产品页面：突出每种植物的独特优势。

组织的植物类型页面：帮助用户按类别浏览。

功能联系页面：使用户能够轻松联系。

📦内容包括：

响应式设计最佳实践：确保您的网站在任何设备上都看起来很棒。

现代基于组件的开发：构建干净、可重复使用的组件。

Tailwind CSS 用于快速和优雅的造型：使用实用优先的 CSS 加快造型速度。

✨ 为什么要构建这个项目？

这个电子商务项目是掌握以下内容的绝佳方式：

开发响应式布局。

使用 TypeScript 来获得可扩展且可维护的代码。

实施 Tailwind CSS 来制作现代、视觉上吸引人的 UI。

无论您是初学者还是经验丰富的开发人员，该项目都将帮助您获得有关编写动态 Web 应用程序的宝贵见解。

🚧 技术栈：

用于 UI 开发的 React

Vite 助力极速开发

用于类型安全的 TypeScript

Tailwind CSS 用于实用优先的样式

🔨代码概述：

以下是该应用程序结构的概览：

应用程序.tsx

import { useState, useEffect } from 'react';
import { Routes, Route, useLocation } from 'react-router-dom'; 
import { Cart, Footer, Navbar } from './components';
import { Home, Checkout, PlantsType, Contact, PlantDetail } from './pages';
import { useCart } from './context/CartContext';

export default function App() {
  const [isNavOpen, setIsNavOpen] = useState(false);
  const [isCartOpen, setIsCartOpen] = useState(false);
  const location = useLocation();

  const { cart, updateQuantity, removeFromCart } = useCart();
  const closeCart = () => setIsCartOpen(false);

  useEffect(() => {
    closeCart();
    window.scrollTo(0, 0);
  }, [location]);

  return (
    
       setIsCartOpen(prev => !prev)}
      />
      
        } />
        } />
        } />
        } />
        } />
      
      {isCartOpen && (
          
      )}
      
    
  );
}

主页.tsx

import React from 'react';
import { HeroSection, TopSelling, CustomerReview, BestO2 } from '../components';
import plantsData from '../data/plantsData';

const Home: React.FC = () => {
  return (
    
      
      
        
        
        
      
    
  );
};

export default Home;

购物车.tsx

import React from 'react';
import { useNavigate } from 'react-router-dom';
import { Button }from './';
import { CartProps } from '../types/types';
import { PlusIcon, MinusIcon, TrashIcon, XMarkIcon } from "@heroicons/react/24/solid";

const Cart: React.FC = ({ cart, updateQuantity, removeFromCart, closeCart }) => {
  const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const navigate = useNavigate(); 


  const handleCheckout = () => {
    const checkoutData = cart.map(({ id, name, price, quantity }) => ({
      id,
      name,
      price,
      quantity,
    }));

    closeCart();
    navigate('/checkout', { state: { cart: checkoutData } }); 
  };

  return (
    
      
        
        Your Cart
        {cart.length === 0 ? (
          Your cart is empty.
        ) : (
          
            
              {/* Scrollable container for cart items */}
               
                {cart.map((item) => (
                  
                    
                    
                      {item.name}
                      Rs. {item.price}
                      
                        
                        {item.quantity}
                        
                      
                    
                    
                  
                ))}
              
            
            
              Order Summary
              
                
                  Subtotal
                  Rs. {total}
                
                
                  Shipping
                  Rs. 50
                
                
                  Total
                  Rs. {total + 50}
                
              
              
                
            
          
        )}
      
    
  );
};

export default Cart;

📥 资源：

Figma 设计：寻找灵感

下载代码：在此处获取项目

👀 连接和分享

如果您觉得这个项目有帮助，请不要忘记**点赞、分享和订阅**！让我们一起成长。🌟

欢迎在下面的评论中留下你的反馈。祝你编码愉快！🚀

CLIS.CC

🌱 响应式 Planto 电子商务网站，采用 React、Vite、TypeScript 和 Tailwind CSS 🌱