function GoldRateConverter({ selectedCity, setSelectedCity, currency, setCurrency, goldAmount, setGoldAmount, convertedRate24k, convertedRate18k }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F9F9F9]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed top-4 right-4 flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("select", { onChange: (e)=>setSelectedCity(e.target.value), name: "city", className: "bg-gray-200 p-2 rounded", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "Delhi", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "Delhi"), /*#__PURE__*/ React.createElement("option", { value: "Mumbai", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Mumbai"), /*#__PURE__*/ React.createElement("option", { value: "Kolkata", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, "Kolkata"), /*#__PURE__*/ React.createElement("option", { value: "Chennai", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, "Chennai")), /*#__PURE__*/ React.createElement("select", { onChange: (e)=>setCurrency(e.target.value), name: "currency", className: "bg-gray-200 p-2 rounded", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "INR", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, "INR"), /*#__PURE__*/ React.createElement("option", { value: "USD", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "USD"), /*#__PURE__*/ React.createElement("option", { value: "EUR", __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, "EUR"), /*#__PURE__*/ React.createElement("option", { value: "GBP", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, "GBP")), /*#__PURE__*/ React.createElement("input", { type: "number", name: "goldAmount", value: goldAmount, onChange: (e)=>setGoldAmount(e.target.value), className: "p-2 border rounded w-28", min: "1", placeholder: "Amount in grams", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-semibold text-[#333] mb-8", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, "Live Gold Rate & Chart"), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow-md rounded-lg p-8 mb-6", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-gray-700", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, "24k Gold - ", selectedCity), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-medium text-[#333]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, `${currency} ${convertedRate24k} for ${goldAmount} grams`)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold text-gray-700", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "18k Gold - ", selectedCity), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-medium text-[#333]", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, `${currency} ${convertedRate18k} for ${goldAmount} grams`)), /*#__PURE__*/ React.createElement("img", { src: `/charts/${selectedCity}.png`, alt: `${selectedCity} gold price chart`, className: "w-full h-auto mt-4", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }))); } function GoldRateConverterStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GoldRateConverter, { selectedCity: "Delhi", setSelectedCity: ()=>{}, currency: "INR", setCurrency: ()=>{}, goldAmount: 100, setGoldAmount: ()=>{}, convertedRate24k: "4,500,000", convertedRate18k: "3,375,000", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedCity, setSelectedCity] = React.useState('Delhi'); const [currency, setCurrency] = React.useState('INR'); const [goldAmount, setGoldAmount] = React.useState(1); const [goldRates, setGoldRates] = React.useState({ rate24k: {}, rate18k: {}, chartData: {} }); const [conversionRates, setConversionRates] = React.useState({ INR: 1, USD: 0.012, EUR: 0.011, GBP: 0.009 }); React.useEffect(()=>{ const cities = [ 'Delhi', 'Mumbai', 'Kolkata', 'Chennai' ]; cities.forEach((city)=>{ fetch(`/integrations/google-search/search?q=24k+gold+rate+${city}+India`).then((response)=>response.json()).then((data)=>{ const rate24k = data.items.find((item)=>item.title.toLowerCase().includes('24k')).snippet.match(/(\d+)/) ? parseInt(data.items.find((item)=>item.title.toLowerCase().includes('24k')).snippet.match(/(\d+)/)[0]) : 0; setGoldRates((prevRates)=>({ ...prevRates, rate24k: { ...prevRates.rate24k, [city]: rate24k } })); }); fetch(`/integrations/google-search/search?q=18k+gold+rate+${city}+India`).then((response)=>response.json()).then((data)=>{ const rate18k = data.items.find((item)=>item.title.toLowerCase().includes('18k')).snippet.match(/(\d+)/) ? parseInt(data.items.find((item)=>item.title.toLowerCase().includes('18k')).snippet.match(/(\d+)/)[0]) : 0; setGoldRates((prevRates)=>({ ...prevRates, rate18k: { ...prevRates.rate18k, [city]: rate18k } })); }); fetch(`/api/gold-price-chart/${city}`).then((response)=>response.json()).then((data)=>{ setGoldRates((prevRates)=>({ ...prevRates, chartData: { ...prevRates.chartData, [city]: data.chartData } })); }); }); }, []); const convertedRate24k = ((goldRates.rate24k[selectedCity] || 0) * conversionRates[currency] * goldAmount).toFixed(2); const convertedRate18k = ((goldRates.rate18k[selectedCity] || 0) * conversionRates[currency] * goldAmount).toFixed(2); return /*#__PURE__*/ React.createElement(GoldRateConverter, { selectedCity: selectedCity, setSelectedCity: setSelectedCity, currency: currency, setCurrency: setCurrency, goldAmount: goldAmount, setGoldAmount: setGoldAmount, convertedRate24k: convertedRate24k, convertedRate18k: convertedRate18k, __source: { fileName: "", lineNumber: 51, columnNumber: 5 }, __self: this }); }

Live Gold Rate & Chart

24k Gold - Delhi

18k Gold - Delhi