Spaces:
Build error
Build error
File size: 2,248 Bytes
8c008a6 f863162 8c008a6 f863162 8c008a6 f863162 8c008a6 f863162 8c008a6 6591a6c 8c008a6 f863162 8c008a6 f863162 8c008a6 f863162 8c008a6 f863162 8c008a6 f863162 8c008a6 f863162 8c008a6 f863162 8c008a6 f863162 8c008a6 f863162 8c008a6 f863162 6591a6c f863162 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
import React, { useState } from "react";
import { askGroq } from "./groqClient";
import "./index.css"; // Add Tailwind directives here
const products = [
{ id: 1, name: "Wireless Headphones", price: "$99" },
{ id: 2, name: "Smart Watch", price: "$199" },
{ id: 3, name: "AI Laptop", price: "$1299" },
];
function App() {
const [msg, setMsg] = useState("");
const [reply, setReply] = useState("");
const handleAsk = async (e) => {
e.preventDefault();
const res = await askGroq(msg);
setReply(res);
setMsg("");
};
return (
<div className="min-h-screen bg-gray-100">
{/* Navbar */}
<nav className="bg-blue-600 text-white p-4">
<h1 className="text-2xl font-bold">AI‑Powered eCommerce</h1>
</nav>
{/* Products */}
<section className="p-6">
<h2 className="text-xl font-semibold mb-4">Top Products</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{products.map((p) => (
<div key={p.id} className="bg-white p-4 rounded shadow">
<h3 className="font-bold">{p.name}</h3>
<p className="text-gray-600">{p.price}</p>
<button className="mt-2 bg-green-500 text-white px-3 py-1 rounded hover:bg-green-600">
Buy Now
</button>
</div>
))}
</div>
</section>
{/* AI Chat */}
<section className="p-6 bg-white m-4 rounded shadow">
<h2 className="text-lg font-bold mb-2">Ask AI Assistant</h2>
<form onSubmit={handleAsk} className="flex flex-col md:flex-row gap-2">
<input
type="text"
className="flex-1 border rounded p-2"
placeholder="e.g. product recommendation, purchase behavior, revenue forecasting"
value={msg}
onChange={(e) => setMsg(e.target.value)}
required
/>
<button className="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
Ask
</button>
</form>
{reply && (
<div className="mt-4 bg-gray-100 p-3 rounded">
<strong>AI:</strong> {reply}
</div>
)}
</section>
</div>
);
}
export default App;
|