function BenchmarkDisplay({ scores }) { const [hoveredIndex, setHoveredIndex] = useState(null); return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold font-roboto mb-6", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, "Benchmark Scores"), /*#__PURE__*/ React.createElement("div", { className: "relative h-[400px] w-full", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-0 w-full flex items-end justify-around h-[350px]", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, scores.map((score, index)=>/*#__PURE__*/ React.createElement("div", { key: score.name, className: "relative group w-[60px] flex flex-col items-center", onMouseEnter: ()=>setHoveredIndex(index), onMouseLeave: ()=>setHoveredIndex(null), __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute -top-8 transition-opacity duration-200 bg-[#333] text-white px-2 py-1 rounded text-sm font-roboto opacity-0 group-hover:opacity-100", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, score.value), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#4CAF50] rounded-t transition-all duration-300 hover:bg-[#45a049]", style: { height: `${score.value / 100 * 300}px` }, __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "mt-2 text-sm font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, score.name)))))); } function BenchmarkDisplayStory() { const mockScores = [ { name: "CPU", value: 85 }, { name: "GPU", value: 92 }, { name: "RAM", value: 78 }, { name: "Disk", value: 88 }, { name: "Network", value: 95 } ]; return /*#__PURE__*/ React.createElement("div", { className: "bg-gray-100 p-4", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BenchmarkDisplay, { scores: mockScores, __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function ComparisonTable({ specs = [] }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full overflow-x-auto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full min-w-[600px]", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "bg-[#f8f9fa] border-b", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-6 py-4 text-left font-roboto", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, "Specification"), /*#__PURE__*/ React.createElement("th", { className: "px-6 py-4 text-left font-roboto", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, "Value"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, specs.map((spec, index)=>/*#__PURE__*/ React.createElement("tr", { key: spec.id, className: index % 2 === 0 ? "bg-white" : "bg-[#f8f9fa]", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 font-roboto border-b", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, spec.name), /*#__PURE__*/ React.createElement("td", { className: "px-6 py-4 font-roboto border-b", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, spec.value)))))); } function ComparisonTableStory() { const sampleSpecs = [ { id: 1, name: "Processor", value: "Intel i7 12th Gen" }, { id: 2, name: "RAM", value: "16GB DDR4" }, { id: 3, name: "Storage", value: "512GB SSD" }, { id: 4, name: "Display", value: '15.6" 4K OLED' }, { id: 5, name: "Graphics", value: "NVIDIA RTX 3060" } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ComparisonTable, { specs: sampleSpecs, __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this })); } function NavigationBar() { const [activeMenu, setActiveMenu] = useState(null); const toggleMenu = (menu)=>{ setActiveMenu(activeMenu === menu ? null : menu); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "bg-[#1a1a1a] shadow-lg", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-7xl mx-auto px-4", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex h-16 justify-start items-center", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleMenu("cpu"), className: "px-3 py-2 text-white hover:bg-[#333333] rounded-md font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 17 }, __self: this }, "CPU ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down ml-1", __source: { fileName: "", lineNumber: 19, columnNumber: 23 }, __self: this })), activeMenu === "cpu" && /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 mt-2 w-48 rounded-md shadow-lg bg-[#1a1a1a] ring-1 ring-black ring-opacity-5", __source: { fileName: "", lineNumber: 22, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-1", __source: { fileName: "", lineNumber: 23, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#benchmarks", className: "block px-4 py-2 text-white hover:bg-[#333333]", __source: { fileName: "", lineNumber: 24, columnNumber: 23 }, __self: this }, "Benchmarks"), /*#__PURE__*/ React.createElement("a", { href: "#compare", className: "block px-4 py-2 text-white hover:bg-[#333333]", __source: { fileName: "", lineNumber: 30, columnNumber: 23 }, __self: this }, "Compare"), /*#__PURE__*/ React.createElement("a", { href: "#rankings", className: "block px-4 py-2 text-white hover:bg-[#333333]", __source: { fileName: "", lineNumber: 36, columnNumber: 23 }, __self: this }, "Rankings")))), /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleMenu("gpu"), className: "px-3 py-2 text-white hover:bg-[#333333] rounded-md font-roboto", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "GPU ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down ml-1", __source: { fileName: "", lineNumber: 52, columnNumber: 23 }, __self: this })), activeMenu === "gpu" && /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 mt-2 w-48 rounded-md shadow-lg bg-[#1a1a1a] ring-1 ring-black ring-opacity-5", __source: { fileName: "", lineNumber: 55, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-1", __source: { fileName: "", lineNumber: 56, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#benchmarks", className: "block px-4 py-2 text-white hover:bg-[#333333]", __source: { fileName: "", lineNumber: 57, columnNumber: 23 }, __self: this }, "Benchmarks"), /*#__PURE__*/ React.createElement("a", { href: "#compare", className: "block px-4 py-2 text-white hover:bg-[#333333]", __source: { fileName: "", lineNumber: 63, columnNumber: 23 }, __self: this }, "Compare"), /*#__PURE__*/ React.createElement("a", { href: "#rankings", className: "block px-4 py-2 text-white hover:bg-[#333333]", __source: { fileName: "", lineNumber: 69, columnNumber: 23 }, __self: this }, "Rankings")))), /*#__PURE__*/ React.createElement("div", { className: "relative group", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>toggleMenu("coming-soon"), className: "px-3 py-2 text-white hover:bg-[#333333] rounded-md font-roboto", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, "Coming Soon ", /*#__PURE__*/ React.createElement("i", { className: "fas fa-chevron-down ml-1", __source: { fileName: "", lineNumber: 85, columnNumber: 31 }, __self: this })), activeMenu === "coming-soon" && /*#__PURE__*/ React.createElement("div", { className: "absolute left-0 mt-2 w-48 rounded-md shadow-lg bg-[#1a1a1a] ring-1 ring-black ring-opacity-5", __source: { fileName: "", lineNumber: 88, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "py-1", __source: { fileName: "", lineNumber: 89, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "block px-4 py-2 text-gray-400", __source: { fileName: "", lineNumber: 90, columnNumber: 23 }, __self: this }, "Mobile Chips"), /*#__PURE__*/ React.createElement("span", { className: "block px-4 py-2 text-gray-400", __source: { fileName: "", lineNumber: 93, columnNumber: 23 }, __self: this }, "Gaming Consoles"), /*#__PURE__*/ React.createElement("span", { className: "block px-4 py-2 text-gray-400", __source: { fileName: "", lineNumber: 96, columnNumber: 23 }, __self: this }, "AI Accelerators"))))))))); } function NavigationBarStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 113, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavigationBar, { __source: { fileName: "", lineNumber: 114, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedCategory, setSelectedCategory] = useState("cpu"); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#1a1a1a] to-[#2d2d2d] text-white font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4 py-12", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-center mb-12", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, "Tech Comparisons"), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap justify-center gap-8 mb-16", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `p-6 rounded-lg w-full md:w-[300px] cursor-pointer transition-all duration-300 ${selectedCategory === "cpu" ? "bg-[#3d3d3d]" : "bg-[#2a2a2a] hover:bg-[#3d3d3d]"}`, onClick: ()=>setSelectedCategory("cpu"), __source: { fileName: "", lineNumber: 14, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microchip text-3xl mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 19, columnNumber: 13 }, __self: this }, "CPU Comparisons"), /*#__PURE__*/ React.createElement("p", { className: "text-[#a0a0a0]", __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, "Compare performance metrics of latest processors")), /*#__PURE__*/ React.createElement("div", { className: `p-6 rounded-lg w-full md:w-[300px] cursor-pointer transition-all duration-300 ${selectedCategory === "gpu" ? "bg-[#3d3d3d]" : "bg-[#2a2a2a] hover:bg-[#3d3d3d]"}`, onClick: ()=>setSelectedCategory("gpu"), __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-desktop text-3xl mb-4", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "GPU Comparisons"), /*#__PURE__*/ React.createElement("p", { className: "text-[#a0a0a0]", __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Analyze graphics card performance data")), /*#__PURE__*/ React.createElement("div", { className: `p-6 rounded-lg w-full md:w-[300px] cursor-pointer transition-all duration-300 ${selectedCategory === "soon" ? "bg-[#3d3d3d]" : "bg-[#2a2a2a] hover:bg-[#3d3d3d]"}`, onClick: ()=>setSelectedCategory("soon"), __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-3xl mb-4", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, "Coming Soon"), /*#__PURE__*/ React.createElement("p", { className: "text-[#a0a0a0]", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "More comparison categories on the way"))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#2a2a2a] rounded-lg p-8", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, selectedCategory === "cpu" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "CPU Performance Metrics"), /*#__PURE__*/ React.createElement(React.Fragment, null)), selectedCategory === "gpu" && /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-3xl font-bold mb-6", __source: { fileName: "", lineNumber: 59, columnNumber: 15 }, __self: this }, "GPU Performance Metrics"), /*#__PURE__*/ React.createElement(React.Fragment, null)), selectedCategory === "soon" && /*#__PURE__*/ React.createElement("div", { className: "text-center py-12", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-tools text-6xl mb-6", __source: { fileName: "", lineNumber: 67, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-3xl font-bold mb-4", __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }, "More Features Coming Soon!"), /*#__PURE__*/ React.createElement("p", { className: "text-[#a0a0a0]", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "We're working on adding more comparison categories"))))); }