From b60cc8a59faccbe5bb81d4578a82bea6c3195edb Mon Sep 17 00:00:00 2001 From: AQ-masatoshi-yamaguchi <69567949+AQ-masatoshi-yamaguchi@users.noreply.github.com> Date: Fri, 4 Feb 2022 15:46:06 +0900 Subject: [PATCH 1/6] initial commit --- src/App.js | 6 ++++-- src/components/atoms/button/BaseButton.jsx | 13 +++++++++++++ src/components/atoms/button/PrimaryButton.jsx | 11 +++++++++++ src/components/atoms/button/SecondaryButton.jsx | 11 +++++++++++ 4 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 src/components/atoms/button/BaseButton.jsx create mode 100644 src/components/atoms/button/PrimaryButton.jsx create mode 100644 src/components/atoms/button/SecondaryButton.jsx diff --git a/src/App.js b/src/App.js index dbc5c59..588bfdd 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,12 @@ +import { PrimaryButton } from "./components/atoms/button/PrimaryButton"; +import { SecondaryButton } from "./components/atoms/button/SecondaryButton"; import "./styles.css"; export default function App() { return (
-

Hello CodeSandbox

-

Start editing to see some magic happen!

+ テスト + 検索
); } diff --git a/src/components/atoms/button/BaseButton.jsx b/src/components/atoms/button/BaseButton.jsx new file mode 100644 index 0000000..85defb9 --- /dev/null +++ b/src/components/atoms/button/BaseButton.jsx @@ -0,0 +1,13 @@ +import styled from "styled-components"; + +export const BaseButton = styled.button` + color: #fff; + padding: 6px 24px; + border: none; + border-radius: 9999px; + outline: none; + &:hover { + cursor: pointer; + opacity: 0.8; + } +`; diff --git a/src/components/atoms/button/PrimaryButton.jsx b/src/components/atoms/button/PrimaryButton.jsx new file mode 100644 index 0000000..aa1c214 --- /dev/null +++ b/src/components/atoms/button/PrimaryButton.jsx @@ -0,0 +1,11 @@ +import styled from "styled-components"; +import { BaseButton } from "./BaseButton"; + +export const PrimaryButton = (props) => { + const { children } = props; + return {children}; +}; + +const SButton = styled(BaseButton)` + background-color: #40514e; +`; diff --git a/src/components/atoms/button/SecondaryButton.jsx b/src/components/atoms/button/SecondaryButton.jsx new file mode 100644 index 0000000..6a6d4ec --- /dev/null +++ b/src/components/atoms/button/SecondaryButton.jsx @@ -0,0 +1,11 @@ +import styled from "styled-components"; +import { BaseButton } from "./BaseButton"; + +export const SecondaryButton = (props) => { + const { children } = props; + return {children}; +}; + +const SButton = styled(BaseButton)` + background-color: #11999e; +`; From eb5cc7b7bed5a7e97d1d9b49ca12a401cbd27215 Mon Sep 17 00:00:00 2001 From: AQ-masatoshi-yamaguchi <69567949+AQ-masatoshi-yamaguchi@users.noreply.github.com> Date: Fri, 4 Feb 2022 16:37:30 +0900 Subject: [PATCH 2/6] Molecules --- src/App.js | 3 +++ src/components/atoms/input/Input.jsx | 13 +++++++++++++ src/components/molecules/SearchInput.jsx | 24 ++++++++++++++++++++++++ 3 files changed, 40 insertions(+) create mode 100644 src/components/atoms/input/Input.jsx create mode 100644 src/components/molecules/SearchInput.jsx diff --git a/src/App.js b/src/App.js index 588bfdd..396dedd 100644 --- a/src/App.js +++ b/src/App.js @@ -1,5 +1,6 @@ import { PrimaryButton } from "./components/atoms/button/PrimaryButton"; import { SecondaryButton } from "./components/atoms/button/SecondaryButton"; +import { SearchInput } from "./components/molecules/SearchInput"; import "./styles.css"; export default function App() { @@ -7,6 +8,8 @@ export default function App() {
テスト 検索 +
+
); } diff --git a/src/components/atoms/input/Input.jsx b/src/components/atoms/input/Input.jsx new file mode 100644 index 0000000..95575ea --- /dev/null +++ b/src/components/atoms/input/Input.jsx @@ -0,0 +1,13 @@ +import styled from "styled-components"; + +export const Input = (props) => { + const { placeholder = "" } = props; + return ; +}; + +const SInput = styled.input` + padding: 8px 16px; + border: solid #ddd 1px; + border-radius: 9999px; + outline: none; +`; diff --git a/src/components/molecules/SearchInput.jsx b/src/components/molecules/SearchInput.jsx new file mode 100644 index 0000000..047bdb9 --- /dev/null +++ b/src/components/molecules/SearchInput.jsx @@ -0,0 +1,24 @@ +import styled from "styled-components"; + +import { PrimaryButton } from "../atoms/button/PrimaryButton"; +import { Input } from "../atoms/input/Input"; + +export const SearchInput = () => { + return ( + + + + 検索 + + + ); +}; + +const SContainer = styled.div` + display: flex; + align-items: center; +`; + +const SButtonWrapper = styled.div` + padding-left: 8px; +`; From b956a52d2598d45a4ff5fff84db1317d6207adfa Mon Sep 17 00:00:00 2001 From: AQ-masatoshi-yamaguchi <69567949+AQ-masatoshi-yamaguchi@users.noreply.github.com> Date: Sat, 5 Feb 2022 10:49:49 +0900 Subject: [PATCH 3/6] organism --- src/App.js | 13 +++++++ src/components/atoms/card/Card.jsx | 13 +++++++ .../molecules/user/UserIconWithName.jsx | 26 ++++++++++++++ src/components/organisms/user/UserCard.jsx | 35 +++++++++++++++++++ src/styles.css | 7 ++-- 5 files changed, 90 insertions(+), 4 deletions(-) create mode 100644 src/components/atoms/card/Card.jsx create mode 100644 src/components/molecules/user/UserIconWithName.jsx create mode 100644 src/components/organisms/user/UserCard.jsx diff --git a/src/App.js b/src/App.js index 396dedd..95944ef 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,20 @@ import { PrimaryButton } from "./components/atoms/button/PrimaryButton"; import { SecondaryButton } from "./components/atoms/button/SecondaryButton"; import { SearchInput } from "./components/molecules/SearchInput"; +import { UserCard } from "./components/organisms/user/UserCard"; import "./styles.css"; +const user = { + name: "まさお", + image: "https://source.unsplash.com/OzAeZPNsLXk", + email: "test@example.com", + phone: "020-0000-1111", + company: { + name: "テスト会社" + }, + website: "https://google.com" +}; + export default function App() { return (
@@ -10,6 +22,7 @@ export default function App() { 検索
+
); } diff --git a/src/components/atoms/card/Card.jsx b/src/components/atoms/card/Card.jsx new file mode 100644 index 0000000..f91b47e --- /dev/null +++ b/src/components/atoms/card/Card.jsx @@ -0,0 +1,13 @@ +import styled from "styled-components"; + +export const Card = (props) => { + const { children } = props; + return {children}; +}; + +const SCard = styled.div` + background-color: #fff; + box-shadow: #ddd 0px 0px 4px 2px; + border-radius: 8px; + padding: 16px; +`; diff --git a/src/components/molecules/user/UserIconWithName.jsx b/src/components/molecules/user/UserIconWithName.jsx new file mode 100644 index 0000000..34986c2 --- /dev/null +++ b/src/components/molecules/user/UserIconWithName.jsx @@ -0,0 +1,26 @@ +import styled from "styled-components"; + +export const UserIconWithName = (props) => { + const { image, name } = props; + return ( + + + {name} + + ); +}; + +const SContainer = styled.div` + text-align: center; +`; + +const SImage = styled.img` + border-radius: 50%; +`; + +const SName = styled.p` + font-size: 18px; + font-weight: bold; + margin: 0; + color: #40514e; +`; diff --git a/src/components/organisms/user/UserCard.jsx b/src/components/organisms/user/UserCard.jsx new file mode 100644 index 0000000..5c533d1 --- /dev/null +++ b/src/components/organisms/user/UserCard.jsx @@ -0,0 +1,35 @@ +import styled from "styled-components"; +import { Card } from "../../atoms/card/Card"; +import { UserIconWithName } from "../../molecules/user/UserIconWithName"; + +export const UserCard = (props) => { + const { user } = props; + return ( + + + +
メール
+
{user.email}
+
TEL
+
{user.phone}
+
会社名
+
{user.company.name}
+
WEB
+
{user.website}
+ + + ); +}; + +const SDL = styled.dl` + text-align: left; + margin-bottom: 0px; + dt { + float: left; + } + dd { + padding-left: 32px; + padding-bottom: 8px; + overflow-wrap: break-word; + } +`; diff --git a/src/styles.css b/src/styles.css index 59b0604..275c868 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,4 +1,3 @@ -.App { - font-family: sans-serif; - text-align: center; -} +body { + background-color: #f0f8ff; +} \ No newline at end of file From 60fdaec7118d8708345f01e0f0960b770be15c15 Mon Sep 17 00:00:00 2001 From: AQ-masatoshi-yamaguchi <69567949+AQ-masatoshi-yamaguchi@users.noreply.github.com> Date: Sat, 5 Feb 2022 11:31:22 +0900 Subject: [PATCH 4/6] templetes --- src/App.js | 19 ++++++++++++------- src/components/atoms/layout/Footer.jsx | 16 ++++++++++++++++ src/components/atoms/layout/Header.jsx | 22 ++++++++++++++++++++++ src/components/templates/DefaultLayout.jsx | 13 +++++++++++++ src/components/templates/HeaderOnly.jsx | 11 +++++++++++ src/styles.css | 6 ++++-- 6 files changed, 78 insertions(+), 9 deletions(-) create mode 100644 src/components/atoms/layout/Footer.jsx create mode 100644 src/components/atoms/layout/Header.jsx create mode 100644 src/components/templates/DefaultLayout.jsx create mode 100644 src/components/templates/HeaderOnly.jsx diff --git a/src/App.js b/src/App.js index 95944ef..1838776 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,10 @@ +import { BrowserRouter } from "react-router-dom"; import { PrimaryButton } from "./components/atoms/button/PrimaryButton"; import { SecondaryButton } from "./components/atoms/button/SecondaryButton"; import { SearchInput } from "./components/molecules/SearchInput"; import { UserCard } from "./components/organisms/user/UserCard"; +import { DefaultLayout } from "./components/templates/DefaultLayout"; + import "./styles.css"; const user = { @@ -17,12 +20,14 @@ const user = { export default function App() { return ( -
- テスト - 検索 -
- - -
+ + + テスト + 検索 +
+ + + + ); } diff --git a/src/components/atoms/layout/Footer.jsx b/src/components/atoms/layout/Footer.jsx new file mode 100644 index 0000000..4effafa --- /dev/null +++ b/src/components/atoms/layout/Footer.jsx @@ -0,0 +1,16 @@ +import { Link } from "react-router-dom"; +import styled from "styled-components"; + +export const Footer = () => { + return © 2021 test; +}; + +const SFooter = styled.footer` + background-color: #11999e; + color: #fff; + text-align: center; + padding: 8px 0; + position: fixed; + bottom: 0; + width: 100%; +`; diff --git a/src/components/atoms/layout/Header.jsx b/src/components/atoms/layout/Header.jsx new file mode 100644 index 0000000..cea1848 --- /dev/null +++ b/src/components/atoms/layout/Header.jsx @@ -0,0 +1,22 @@ +import { Link } from "react-router-dom"; +import styled from "styled-components"; + +export const Header = () => { + return ( + + HOME + USERS + + ); +}; + +const SHeader = styled.header` + background-color: #11999e; + color: fff; + text-align: center; + padding: 8px 0; +`; + +const SLink = styled(Link)` + margin: 0 8px; +`; diff --git a/src/components/templates/DefaultLayout.jsx b/src/components/templates/DefaultLayout.jsx new file mode 100644 index 0000000..5197113 --- /dev/null +++ b/src/components/templates/DefaultLayout.jsx @@ -0,0 +1,13 @@ +import { Footer } from "../atoms/layout/Footer"; +import { Header } from "../atoms/layout/Header"; + +export const DefaultLayout = (props) => { + const { children } = props; + return ( + <> +
+ {children} +