Skip to content

Commit

Permalink
実験
Browse files Browse the repository at this point in the history
  • Loading branch information
@koma0504
koma0504 committed Jun 17, 2021
1 parent e96d1f7 commit 3333711
Show file tree
Hide file tree
Showing 12 changed files with 472 additions and 72 deletions.
10 changes: 3 additions & 7 deletions components/Footer/Footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
import React from "react";

export function Footer() {
return (
<div>
<footer className="footer">
<p>フッター</p>
</footer>
</div>
<footer className="footer">
<p>フッター</p>
</footer>
);
}
89 changes: 44 additions & 45 deletions components/Header/Header.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,47 @@
import Link from "next/link";
import Head from "next/head";
import React from "react";
import { Swiper, SwiperSlide } from "swiper/react";
import { Nav } from "../Nav/Nav";
import { SwiperComp } from "../SwiperComp/SwiperComp";
export function Header(props) {
return (
<React.Fragment>
<Head>
<title>{props.title} | RATIO OBSERVER</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="description" content="ポートフォリオサイトです" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap"
rel="stylesheet"
></link>
</Head>
<header className="header">
<h1 className="logo">RATIO OBSERVER</h1>
<nav className="nav">
<ul className="menu">
<li>
<Link href="/about">
<a>ABOUT</a>
</Link>
</li>
<li>
<Link href="/about">
<a>CONTACT</a>
</Link>
</li>
</ul>
</nav>
<Swiper
spaceBetween={50}
slidesPerView={3}
onSlideChange={() => console.log("slide change")}
onSwiper={(swiper) => console.log(swiper)}
>
<SwiperSlide>Slide 1</SwiperSlide>
<SwiperSlide>Slide 2</SwiperSlide>
<SwiperSlide>Slide 3</SwiperSlide>
<SwiperSlide>Slide 4</SwiperSlide>
</Swiper>
</header>
</React.Fragment>
);
switch (props.layout) {
case "swiper": {
return (
<>
<Head>
<title>{props.title} | RATIO OBSERVER</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="description" content="ポートフォリオサイトです" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap"
rel="stylesheet"
></link>
</Head>
<header className="header">
<Nav />
<SwiperComp />
</header>
</>
);
}
default: {
console.log(props);
return (
<>
<Head>
<title>{props.title} | RATIO OBSERVER</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="description" content="ポートフォリオサイトです" />
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway:wght@100;200;300;400;500;600;700;800;900&family=Roboto&display=swap"
rel="stylesheet"
></link>
</Head>
<header className="header">
<Nav />
</header>
</>
);
}
}
}
25 changes: 25 additions & 0 deletions components/Nav/Nav.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import Link from "next/link";

export function Nav() {
return (
<nav className="nav">
<h1 className="logo">
<Link href="/">
<a>RATIO OBSERVER</a>
</Link>
</h1>
<ul className="menu">
<li>
<Link href="/about">
<a>ABOUT</a>
</Link>
</li>
<li>
<Link href="/about">
<a>CONTACT</a>
</Link>
</li>
</ul>
</nav>
);
}
42 changes: 42 additions & 0 deletions components/SwiperComp/SwiperComp.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React, { useRef, useState } from "react";
// Import Swiper React components
import { Swiper, SwiperSlide } from "swiper/react";

// Import Swiper styles
import "swiper/swiper.min.css";
import "swiper/components/pagination/pagination.min.css";
import "swiper/components/navigation/navigation.min.css";

// import "./styles.css";

// import Swiper core and required modules
import SwiperCore, { Autoplay, Pagination, Navigation } from "swiper/core";

// install Swiper modules
SwiperCore.use([Autoplay, Pagination, Navigation]);

export function SwiperComp() {
return (
<>
<Swiper
loop={true}
centeredSlides={true}
// autoplay={{
// delay: 2500,
// disableOnInteraction: false,
// }}
pagination={{
clickable: true,
}}
className="mySwiper"
>
<SwiperSlide>
<img src="./img/aaaaaaa.jpg" alt="" />
</SwiperSlide>
<SwiperSlide>
<img src="./img/download.jpg" alt="" />
</SwiperSlide>
</Swiper>
</>
);
}
Loading

1 comment on commit 3333711

@vercel
Copy link

@vercel vercel bot commented on 3333711 Jun 17, 2021

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:

Please sign in to comment.