Skip to content

Commit

Permalink
レファクタリングとリンクコンポーネントの実装
Browse files Browse the repository at this point in the history
  • Loading branch information
github committed Mar 17, 2023
1 parent d31ec44 commit fd369ed
Show file tree
Hide file tree
Showing 7 changed files with 101 additions and 59 deletions.
27 changes: 15 additions & 12 deletions components/footer/footer.jsx
Original file line number Diff line number Diff line change
@@ -1,37 +1,40 @@
import styles from '/components/footer/footer.module.css'
import Link from 'next/link'


export default function Footer() {
return (
<footer className={styles.footer}>
return (
<footer className={styles.footer}>
<div className={styles.social}>
<a href="#"><i className="fab fa-instagram"></i></a>
<a href="#"><i className="fab fa-twitter"></i></a>
<a href="https://github.com/suzusou"><i className="fab fa-github"></i></a>
<a href="#"><i className="fab fa-facebook"></i></a>
<Link href="/" legacyBehavior><a> <i className="fab fa-instagram"></i></a></Link>
<Link href="/" legacyBehavior><a><i className="fab fa-twitter"></i></a></Link>
<Link href="https://github.com/suzusou" legacyBehavior><a><i className="fab fa-github"></i></a></Link>
<Link href="/" legacyBehavior><a><i className="fab fa-facebook"></i></a></Link>
</div>

<ul className={styles.list}>
<li>
<a href="#">Section1</a>
<Link href="/" > Section1</Link>
</li>
<li>
<a href="#">Section2</a>
<Link href="/" > Section2</Link>
</li>
<li>
<a href="#">Section3</a>
<Link href="/" > Section3</Link>
</li>
<li>
<a href="#">Section4</a>
<Link href="/" > Section4</Link>
</li>
<li>
<a href="#">Section5</a>
<Link href="/" > Section5</Link>
</li>

<p className={styles.copyright}>
S.S-20220219 @ 2023
</p>
</ul>

</footer>

)
)
}
25 changes: 14 additions & 11 deletions components/header/header.jsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,36 @@
import styles from '/components/header/header.module.css'
import Link from 'next/link'

export default function Header() {
return (
<header className={styles.header}>
return (
<header className={styles.header}>
<div className={styles.container}>
<div className={styles.area_logo_header}>
<a className={styles.logo}href="https://github.com/suzusou">
<div className={styles.logo_name}>Sample Site</div>
</a>
<Link href="https://github.com/suzusou" legacyBehavior>
<a className={styles.logo} >
<div className={styles.logo_name}>Sample Site</div>
</a>
</Link>
</div>

<nav className={styles.area_nav_header}>
<ul className={styles.list_nav_header}>
<li className={styles.lists}>
<a href="" className={styles.list1}>Section1</a>
<Link href="/" >Section1</Link>
</li>
<li className={styles.lists}>
<a href="" className={styles.list2}>Section2</a>
<Link href="/" >Section2</Link>
</li>
<li className={styles.lists}>
<a href="" className={styles.list3}>Section3</a>
<Link href="/" >Section3</Link>
</li>
<li className={styles.lists}>
<a href="" className={styles.list4}>Section4</a>
<Link href="/" >Section4</Link>
</li>

</ul>
</nav>
</div>
</header>
)
)
}
35 changes: 7 additions & 28 deletions components/header/header.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,12 @@
position: relative;
}

.list1,
.list2,
.list3,
.list4 {
.lists a {
display: inline-block;
color: #111;
}

.list1::after,
.list2::after,
.list3::after,
.list4::after {
.lists a::after{
position: absolute;
bottom: -4px;
left: 0;
Expand All @@ -64,10 +58,7 @@
transition: transform .3s;
}

.list1:hover::after,
.list2:hover::after,
.list3:hover::after,
.list4:hover::after {
.lists a:hover::after{
transform: scale(1, 1);
}

Expand All @@ -77,10 +68,7 @@
display: block;
}

.list1,
.list2,
.list3,
.list4 {
.lists a{
font-size: 14px;
}

Expand All @@ -99,10 +87,7 @@
margin: 0 0 0 1vw;
}

.list1::after,
.list2::after,
.list3::after,
.list4::after {
.lists a::after{
bottom: -2px;
height: 1.5px;
}
Expand All @@ -116,17 +101,11 @@
height: 65px;
}

.list1,
.list2,
.list3,
.list4 {
.lists a {
font-size: 11px;
}

.list1::after,
.list2::after,
.list3::after,
.list4::after {
.lists a::after {
bottom: 0px;
height: 1px;
}
Expand Down
4 changes: 4 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
"lint": "next lint"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.3.0",
"@fortawesome/free-regular-svg-icons": "^6.3.0",
"@fortawesome/free-solid-svg-icons": "^6.3.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"next": "13.2.4",
"react": "18.2.0",
"react-dom": "18.2.0"
Expand Down
4 changes: 3 additions & 1 deletion src/pages/_document.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
<Html lang="en">
<Head />
<Head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"></link>
</Head>
<body>
<Main />
<NextScript />
Expand Down
11 changes: 5 additions & 6 deletions src/pages/index.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,22 @@
import Head from 'next/head'
import Header from '../../components/header/header'
import Contents from '../../components/contents/contents'
import Footer from '../../components/footer/footer'

import Header from '/components/header/header'
import Contents from '/components/contents/contents'
import Footer from '/components/footer/footer'

export default function Home() {
return (
<>
<Head>
<title>Create Next App</title>
<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" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"></link>
</Head>

< Header />
<Contents />
< Footer />

</>
)
}
54 changes: 53 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,39 @@
# yarn lockfile v1


"@fortawesome/fontawesome-common-types@6.3.0":
version "6.3.0"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz#51f734e64511dbc3674cd347044d02f4dd26e86b"
integrity sha512-4BC1NMoacEBzSXRwKjZ/X/gmnbp/HU5Qqat7E8xqorUtBFZS+bwfGH5/wqOC2K6GV0rgEobp3OjGRMa5fK9pFg==

"@fortawesome/fontawesome-svg-core@^6.3.0":
version "6.3.0"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.3.0.tgz#b6a17d48d231ac1fad93e43fca7271676bf316cf"
integrity sha512-uz9YifyKlixV6AcKlOX8WNdtF7l6nakGyLYxYaCa823bEBqyj/U2ssqtctO38itNEwXb8/lMzjdoJ+aaJuOdrw==
dependencies:
"@fortawesome/fontawesome-common-types" "6.3.0"

"@fortawesome/free-regular-svg-icons@^6.3.0":
version "6.3.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.3.0.tgz#286f87f777e6c96af59151e86647c81083029ee2"
integrity sha512-cZnwiVHZ51SVzWHOaNCIA+u9wevZjCuAGSvSYpNlm6A4H4Vhwh8481Bf/5rwheIC3fFKlgXxLKaw8Xeroz8Ntg==
dependencies:
"@fortawesome/fontawesome-common-types" "6.3.0"

"@fortawesome/free-solid-svg-icons@^6.3.0":
version "6.3.0"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.3.0.tgz#d3bd33ae18bb15fdfc3ca136e2fea05f32768a65"
integrity sha512-x5tMwzF2lTH8pyv8yeZRodItP2IVlzzmBuD1M7BjawWgg9XAvktqJJ91Qjgoaf8qJpHQ8FEU9VxRfOkLhh86QA==
dependencies:
"@fortawesome/fontawesome-common-types" "6.3.0"

"@fortawesome/react-fontawesome@^0.2.0":
version "0.2.0"
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz#d90dd8a9211830b4e3c08e94b63a0ba7291ddcf4"
integrity sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==
dependencies:
prop-types "^15.8.1"

"@next/env@13.2.4":
version "13.2.4"
resolved "https://registry.yarnpkg.com/@next/env/-/env-13.2.4.tgz#8b763700262b2445140a44a8c8d088cef676dbae"
Expand Down Expand Up @@ -94,7 +127,7 @@ client-only@0.0.1:
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==

loose-envify@^1.1.0:
loose-envify@^1.1.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
Expand Down Expand Up @@ -131,6 +164,11 @@ next@13.2.4:
"@next/swc-win32-ia32-msvc" "13.2.4"
"@next/swc-win32-x64-msvc" "13.2.4"

object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==

picocolors@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
Expand All @@ -145,6 +183,15 @@ postcss@8.4.14:
picocolors "^1.0.0"
source-map-js "^1.0.2"

prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
dependencies:
loose-envify "^1.4.0"
object-assign "^4.1.1"
react-is "^16.13.1"

react-dom@18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
Expand All @@ -153,6 +200,11 @@ react-dom@18.2.0:
loose-envify "^1.1.0"
scheduler "^0.23.0"

react-is@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==

react@18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
Expand Down

1 comment on commit fd369ed

@vercel
Copy link

@vercel vercel bot commented on fd369ed Mar 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

react-site – ./

react-site-weld.vercel.app
react-site-git-main-suzusou.vercel.app
react-site-suzusou.vercel.app

Please sign in to comment.