function SoccerBarMobile({ icons }) { return /*#__PURE__*/ React.createElement("div", { className: "w-full bg-black text-white fixed bottom-0 px-4 py-2 flex justify-around items-center md:hidden", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, icons.map((icon, index)=>/*#__PURE__*/ React.createElement("i", { key: index, className: `fa ${icon}`, __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }))); } function SoccerBarMobileStory() { const icons = [ "fa-futbol-o", "fa-users", "fa-trophy", "fa-clock-o", "fa-user" ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SoccerBarMobile, { icons: icons, __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const playerInfo = { name: "Kaoru Mitoma", team: "Brighton & Hove Albion", followers: "26.2K", details: { age: 26, country: "Japan", position: "Midfielder", jerseyNumber: 22, height: "178 cm", weight: "73 kg" }, teamLogo: "/images/brighton-logo.png", playerImage: "/images/player-mitoma.png" }; const navItems = [ "Overview", "News", "Stats", "Career" ]; const pcHeaderIcons = [ "fa-futbol-o", "fa-users", "fa-trophy", "fa-clock-o", "fa-user" ]; const mobileFooterIcons = [ "fa-home", "fa-gamepad", "fa-clipboard-list", "fa-play-circle", "fa-user-circle" ]; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "hidden md:flex w-full bg-black text-white fixed top-0 px-4 py-2 justify-around items-center", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, pcHeaderIcons.map((icon, index)=>/*#__PURE__*/ React.createElement("i", { key: index, className: `fa ${icon}`, __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "flex-grow overflow-y-auto bg-[#010101] text-white pt-16 md:pt-2", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: playerInfo.playerImage, alt: `Player ${playerInfo.name}`, className: "w-full h-[300px] object-cover md:h-[400px]", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent to-black", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute left-4 bottom-4", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl", __source: { fileName: "", lineNumber: 38, columnNumber: 13 }, __self: this }, playerInfo.name), /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, playerInfo.team)), /*#__PURE__*/ React.createElement("div", { className: "absolute right-4 bottom-4", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-star text-white", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto pl-2", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, playerInfo.followers, " Followers"))), /*#__PURE__*/ React.createElement("div", { className: "px-4 mt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "flex space-x-2 border-b", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, navItems.map((item, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: "#", className: "font-roboto text-sm pb-2", style: { borderBottom: index === 0 ? '2px solid white' : undefined }, __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }, item))), /*#__PURE__*/ React.createElement("div", { className: "my-4 grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, Object.entries(playerInfo.details).map(([key, value])=>/*#__PURE__*/ React.createElement("div", { key: key, className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, key.replace(/([A-Z])/g, ' $1')), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, value)))), /*#__PURE__*/ React.createElement("div", { className: "font-roboto text-lg uppercase mb-2", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, "Teams"), /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: playerInfo.teamLogo, alt: `Team ${playerInfo.team} logo`, className: "w-[50px] h-[50px] object-contain", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto ml-2", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, playerInfo.team)))), /*#__PURE__*/ React.createElement(SoccerBarMobile, { icons: mobileFooterIcons, __source: { fileName: "", lineNumber: 78, columnNumber: 7 }, __self: this })); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#010101]", __source: { fileName: "", lineNumber: 85, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 86, columnNumber: 7 }, __self: this })); }