Ai Techno world 🌍

E commerce world

import React, { useState, useEffect } from “react”; import { Card, CardContent } from “@/components/ui/card”; import { Input } from “@/components/ui/input”; import { Button } from “@/components/ui/button”; import { Search, ShoppingCart } from “lucide-react”; import axios from “axios”;

const products = [ { id: 1, name: “Smartphone”, price: “$699”, image: “/images/smartphone.jpg” }, { id: 2, name: “Laptop”, price: “$999”, image: “/images/laptop.jpg” }, { id: 3, name: “Headphones”, price: “$199”, image: “/images/headphones.jpg” }, ];

export default function EcommerceAI() { const [searchTerm, setSearchTerm] = useState(“”); const [recommended, setRecommended] = useState([]);

useEffect(() => { // Simulate AI recommendation (Replace with real AI API call) axios.get(“/api/recommendations”).then((response) => { setRecommended(response.data); }); }, []);

return ( <div className=”p-6 max-w-4xl mx-auto”> <div className=”flex items-center gap-2 mb-4″> <Input type=”text” placeholder=”Search for products…” value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} /> <Button><Search size={18} /></Button> <Button><ShoppingCart size={18} /></Button> </div> <h2 className=”text-xl font-semibold mb-3″>Recommended for You</h2> <div className=”grid grid-cols-3 gap-4″> {recommended.map((product) => ( <Card key={product.id} className=”p-4″> <img src={product.image} alt={product.name} className=”rounded-lg mb-2″ /> <CardContent> <h3 className=”text-lg font-medium”>{product.name}</h3> <p className=”text-gray-600″>{product.price}</p> <Button>Add to Cart</Button> </CardContent> </Card> ))} </div> </div> ); }