feat: header&footer rwd 大致定義

sexyoung · Jul 10, 2023 · c3ed477 · c3ed477
1 parent ebc3011
commit c3ed477
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 30 deletions.
diff --git a/app/components/footer.tsx b/app/components/footer.tsx
@@ -0,0 +1,21 @@
+import logo from "~/images/logo.png";
+import Links from "./links";
+
+export default function Footer() {
+  return (
+    <footer className="container mx-auto py-5 text-center lg:flex lg:items-start lg:items-center lg:gap-10 lg:text-left">
+      <img
+        src={logo}
+        className="mx-auto block h-[auto] w-[120px] lg:mr-5 lg:inline-block"
+        alt="Home"
+      />
+      <ul className="my-5 inline-block whitespace-nowrap [&>*]:mx-2 [&>*]:my-2 sm:[&>*]:block md:[&>*]:inline-block">
+        <Links />
+      </ul>
+      <div className="flex-1 px-4 text-left">
+        Technique-Weighted Shared-Decision Making. Sponsored by National Taiwan
+        University Hospital Yunlin Branch.
+      </div>
+    </footer>
+  );
+}
diff --git a/app/components/header.tsx b/app/components/header.tsx
@@ -0,0 +1,13 @@
+import logo from "~/images/logo.png";
+import Links from "./links";
+
+export default function Header() {
+  return (
+    <header className="container fixed py-5 text-right">
+      <img src={logo} className="mr-5 inline-block w-[60px]" alt="Home" />
+      <ul className="inline-block [&>*]:mx-2 [&>*]:inline-block">
+        <Links />
+      </ul>
+    </header>
+  );
+}
diff --git a/app/components/links.tsx b/app/components/links.tsx
@@ -0,0 +1,26 @@
+import { Link } from "@remix-run/react";
+
+export default function Links() {
+  return (
+    <>
+      <li>
+        <Link to="/">首頁</Link>
+      </li>
+      <li>
+        <Link to="/plan">計畫自由選</Link>
+      </li>
+      <li>
+        <Link to="/choice">選擇障礙專區</Link>
+      </li>
+      <li>
+        <Link to="/curing">CP 值專區</Link>
+      </li>
+      <li>
+        <Link to="/assessment">專業評估</Link>
+      </li>
+      <li>
+        <Link to="/contact">關於我們</Link>
+      </li>
+    </>
+  );
+}
diff --git a/app/root.tsx b/app/root.tsx
@@ -2,7 +2,6 @@ import { cssBundleHref } from "@remix-run/css-bundle";
 import type { LinksFunction, LoaderArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import {
-  Link,
   Links,
   LiveReload,
   Meta,
@@ -14,6 +13,9 @@ import {
 import { getUser } from "~/session.server";
 import stylesheet from "~/tailwind.css";
 
+import Header from "./components/header";
+import Footer from "./components/footer";
+
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
   ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
@@ -33,30 +35,9 @@ export default function App() {
         <Links />
       </head>
       <body className="h-full">
-        <header className="container py-5 text-right">
-          <ul className="[&>*]:mx-2 [&>*]:inline-block">
-            <li>
-              <Link to="/">首頁</Link>
-            </li>
-            <li>
-              <Link to="/plan">計畫自由選</Link>
-            </li>
-            <li>
-              <Link to="/choice">選擇障礙專區</Link>
-            </li>
-            <li>
-              <Link to="/curing">CP 值專區</Link>
-            </li>
-            <li>
-              <Link to="/assessment">專業評估</Link>
-            </li>
-            <li>
-              <Link to="/contact">關於我們</Link>
-            </li>
-          </ul>
-        </header>
+        <Header />
         <Outlet />
-        <footer className="container py-5">footer</footer>
+        <Footer />
         <ScrollRestoration />
         <Scripts />
         <LiveReload />

diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
@@ -1,3 +1,8 @@
 export default function () {
-  return <div>首頁</div>;
+  return (
+    <div>
+      <div className="h-[300px] bg-yellow-100" />
+      首頁
+    </div>
+  );
 }
diff --git a/app/routes/assessment.tsx b/app/routes/assessment.tsx
@@ -3,5 +3,10 @@ import type { V2_MetaFunction } from "@remix-run/node";
 export const meta: V2_MetaFunction = () => [{ title: "專業評估" }];
 
 export default function () {
-  return <div>專業評估</div>;
+  return (
+    <div>
+      <div className="h-[300px] bg-yellow-100" />
+      專業評估
+    </div>
+  );
 }
diff --git a/app/routes/choice.tsx b/app/routes/choice.tsx
@@ -3,5 +3,10 @@ import type { V2_MetaFunction } from "@remix-run/node";
 export const meta: V2_MetaFunction = () => [{ title: "選擇障礙專區" }];
 
 export default function () {
-  return <div>選擇障礙專區</div>;
+  return (
+    <div>
+      <div className="h-[300px] bg-yellow-100" />
+      選擇障礙專區
+    </div>
+  );
 }
diff --git a/app/routes/contact.tsx b/app/routes/contact.tsx
@@ -3,5 +3,10 @@ import type { V2_MetaFunction } from "@remix-run/node";
 export const meta: V2_MetaFunction = () => [{ title: "關於我們" }];
 
 export default function () {
-  return <div>關於我們</div>;
+  return (
+    <div>
+      <div className="h-[300px] bg-yellow-100" />
+      關於我們
+    </div>
+  );
 }
diff --git a/app/routes/curing.tsx b/app/routes/curing.tsx
@@ -3,5 +3,10 @@ import type { V2_MetaFunction } from "@remix-run/node";
 export const meta: V2_MetaFunction = () => [{ title: "CP 值專區" }];
 
 export default function () {
-  return <div>CP 值專區</div>;
+  return (
+    <div>
+      <div className="h-[300px] bg-yellow-100" />
+      CP 值專區
+    </div>
+  );
 }
diff --git a/app/routes/plan.tsx b/app/routes/plan.tsx
@@ -3,5 +3,10 @@ import type { V2_MetaFunction } from "@remix-run/node";
 export const meta: V2_MetaFunction = () => [{ title: "計畫自由選" }];
 
 export default function () {
-  return <div>計畫自由選</div>;
+  return (
+    <div>
+      <div className="h-[300px] bg-yellow-100" />
+      計畫自由選
+    </div>
+  );
 }