💄 UI Change

suzusou · Mar 19, 2023 · 4287673 · 4287673 · vercel · Mar 19, 2023
1 parent 4b5bb14
commit 4287673
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 14 deletions.
diff --git a/components/breadcrumbs/breadcrumbs.jsx b/components/breadcrumbs/breadcrumbs.jsx
@@ -2,10 +2,10 @@ import styles from '/components/breadcrumbs/breadcrumbs.module.css'
 
 
 
-export function Breadcrumbs() {
+export function Breadcrumbs(props) {
     return (
         <div className={styles.breadcrumbs}>
-            パンくずリスト
+           {props.page}
         </div>
     )
 }
diff --git a/components/breadcrumbs/breadcrumbs.module.css b/components/breadcrumbs/breadcrumbs.module.css
@@ -1,8 +1,8 @@
 .breadcrumbs {
     position: absolute;
-    top:65px;
+    top: 65px;
     /* background-color: aqua; */
-    color: #000 ;
+    color: #7e7e7e;
     width: 100vw;
     font-size: 12px;
     padding-left: 20px;
@@ -12,8 +12,8 @@
 
 @media screen and (max-width: 767px) {
     .breadcrumbs {
-        top:70px;
+        top: 78px;
         padding-left: 15px;
     }
-   
-}
+
+}
diff --git a/components/footer/footer.jsx b/components/footer/footer.jsx
@@ -17,13 +17,13 @@ export function Footer() {
                 <Link href="/" >Home</Link>
                 </li>
                 <li>
-                <Link href="/" >About</Link>
+                <Link href="/about" >About</Link>
                 </li>
                 <li>
-                <Link href="/" >Service</Link>
+                <Link href="/service" >Service</Link>
                 </li>
                 <li>
-                <Link href="/" >News</Link>
+                <Link href="/news" >News</Link>
                 </li>
 
                 <p className={styles.copyright}>

diff --git a/components/header/header.jsx b/components/header/header.jsx
@@ -19,13 +19,13 @@ export function Header() {
                             <Link href="/" >Home</Link>
                         </li>
                         <li className={styles.lists}>
-                            <Link href="/" >About</Link>
+                            <Link href="/about" >About</Link>
                         </li>
                         <li className={styles.lists}>
-                            <Link href="/" >Service</Link>
+                            <Link href="/service" >Service</Link>
                         </li>
                         <li className={styles.lists}>
-                            <Link href="/" >News</Link>
+                            <Link href="/news" >News</Link>
                         </li>
 
                     </ul>

diff --git a/src/pages/about.js b/src/pages/about.js
@@ -0,0 +1,24 @@
+import Head from 'next/head'
+import { Header } from '/components/header/header'
+import Contents from '/components/contents/contents'
+import { Footer } from '/components/footer/footer'
+import { Breadcrumbs } from '/components/breadcrumbs/breadcrumbs'
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Site Design</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      < Header />
+      < Breadcrumbs page="About >"/>
+      <Contents />
+      < Footer />
+
+    </>
+  )
+}
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -15,7 +15,7 @@ export default function Home() {
       </Head>
 
       < Header />
-      < Breadcrumbs />
+      < Breadcrumbs page="Home >" />
       <Contents />
       < Footer />
 

diff --git a/src/pages/news.js b/src/pages/news.js
@@ -0,0 +1,24 @@
+import Head from 'next/head'
+import { Header } from '/components/header/header'
+import Contents from '/components/contents/contents'
+import { Footer } from '/components/footer/footer'
+import { Breadcrumbs } from '/components/breadcrumbs/breadcrumbs'
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Site Design</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      < Header />
+      < Breadcrumbs page="News >"/>
+      <Contents />
+      < Footer />
+
+    </>
+  )
+}
diff --git a/src/pages/service.js b/src/pages/service.js
@@ -0,0 +1,24 @@
+import Head from 'next/head'
+import { Header } from '/components/header/header'
+import Contents from '/components/contents/contents'
+import { Footer } from '/components/footer/footer'
+import { Breadcrumbs } from '/components/breadcrumbs/breadcrumbs'
+
+export default function Home() {
+  return (
+    <>
+      <Head>
+        <title>Site Design</title>
+        <meta name="description" content="Generated by create next app" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      < Header />
+      < Breadcrumbs page="Service >"/>
+      <Contents />
+      < Footer />
+
+    </>
+  )
+}