function AppCard({ appName, description, link }) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg bg-white shadow-md p-6 max-w-sm", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold font-roboto mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, appName), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600 font-roboto mb-4", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, description), /*#__PURE__*/ React.createElement("a", { href: link, className: "inline-block text-blue-600 hover:text-blue-800 font-roboto", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, "詳細を見る")); } function AppCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AppCard, { appName: "メモアプリ", description: "シンプルで使いやすいメモ管理アプリケーション", link: "https://example.com/memo-app", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(AppCard, { appName: "タスク管理", description: "効率的なタスク管理ができるツール", link: "https://example.com/task-app", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this })); } function Navigation({ activeLink = "/" }) { const links = [ { path: "/", label: "ホーム" }, { path: "/about", label: "会社概要" }, { path: "/services", label: "サービス" }, { path: "/contact", label: "お問い合わせ" } ]; return /*#__PURE__*/ React.createElement("nav", { className: "bg-white shadow-lg", __source: { fileName: "", lineNumber: 10, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto px-4", __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-7", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center py-4", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-2xl text-gray-800", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }, "Logo")), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-1", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, links.map((link)=>/*#__PURE__*/ React.createElement("a", { key: link.path, href: link.path, className: `py-4 px-2 font-roboto ${activeLink === link.path ? "text-blue-500 border-b-2 border-blue-500" : "text-gray-500 hover:text-blue-500"}`, __source: { fileName: "", lineNumber: 19, columnNumber: 17 }, __self: this }, link.label))))))); } function NavigationStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Navigation, { activeLink: "/", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Navigation, { activeLink: "/about", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Navigation, { activeLink: "/services", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(Navigation, { activeLink: "/contact", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this })); } function MainComponent() { const apps = [ { title: "Pairs", description: "日本最大級の恋愛・結婚マッチングアプリ", link: "/pairs", image: "/images/pairs.jpg" }, { title: "Tinder", description: "世界中で人気のマッチングアプリ", link: "/tinder", image: "/images/tinder.jpg" }, { title: "Bumble", description: "女性からメッセージを送るマッチングアプリ", link: "/bumble", image: "/images/bumble.jpg" }, { title: "with", description: "共通の趣味で繋がるマッチングアプリ", link: "/with", image: "/images/with.jpg" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 px-4 py-8", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-12 font-noto", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, "マッチングアプリまとめ"), /*#__PURE__*/ React.createElement("div", { className: "max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, apps.map((app, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: app.link, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))))); }

マッチングアプリ まとめ

マッチングアプリまとめ