Skip to content

Commit 913ad4b

Browse files
snakasnaka
authored
Feat/footer (#27)
* feat: add IconTwitter component Component for Twitter icon * feat: Link component combining MUI and Next.js Link MUI の Link の見た目に Next.js の Link の動作を組み合わせて利用するためのコンポーネントを用意した See also: https://omkz.net/nextjs-mu-link/ * add colors * feat: Footer component * fix: remove unnecessary import
1 parent 109c786 commit 913ad4b

File tree

7 files changed

+316
-9
lines changed

7 files changed

+316
-9
lines changed

‎src/components/atoms/IconTwitter/IconTwitter.stories.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import type { ComponentMeta, ComponentStory } from '@storybook/react'
2+
import { IconTwitter } from '.'
3+
4+
const meta: ComponentMeta<typeof IconTwitter> = {
5+
component: IconTwitter
6+
}
7+
export default meta
8+
9+
const Template: ComponentStory<typeof IconTwitter> = args => <IconTwitter />
10+
11+
export const Default = Template.bind({})

‎src/components/atoms/IconTwitter/index.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
import { SvgIcon } from '@mui/material'
3+
import { Colors } from 'src/styles/color'
4+
5+
export const IconTwitter = () => {
6+
return (
7+
<SvgIcon
8+
sx={{
9+
width: '32px',
10+
height: '24px',
11+
viewBox: '0 0 30 25',
12+
fill: 'none'
13+
}}
14+
>
15+
<path
16+
d="M26.5855 6.73369C26.6032 6.99036 26.6032 7.24702 26.6032 7.50605C26.6032 15.3989 20.5946 24.5016 9.60762 24.5016V24.4969C6.36203 24.5016 3.18386 23.572 0.451599 21.8191C0.923535 21.8758 1.39784 21.9042 1.87332 21.9054C4.563 21.9078 7.17579 21.0053 9.29181 19.3435C6.73579 19.295 4.49439 17.6284 3.71138 15.1954C4.60676 15.3681 5.52934 15.3326 6.40816 15.0925C3.62149 14.5295 1.61665 12.0811 1.61665 9.23767C1.61665 9.21165 1.61665 9.18681 1.61665 9.16197C2.44698 9.62444 3.37665 9.88111 4.32762 9.90949C1.703 8.15541 0.893965 4.6638 2.47891 1.9339C5.5116 5.66562 9.98612 7.93423 14.7894 8.17433C14.3081 6.09971 14.9657 3.92573 16.5175 2.46734C18.9233 0.205839 22.7071 0.321753 24.9686 2.72638C26.3063 2.46261 27.5885 1.97175 28.7618 1.27627C28.3159 2.65896 27.3827 3.83347 26.136 4.57982C27.32 4.44025 28.4768 4.12326 29.5661 3.63949C28.7642 4.84122 27.7541 5.88799 26.5855 6.73369Z"
17+
fill={Colors.text.default}
18+
/>
19+
</SvgIcon>
20+
)
21+
}

‎src/components/atoms/Link/index.tsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import NextLink, { LinkProps as NextLinkProps } from 'next/link'
2+
import MuiLink from '@mui/material/Link'
3+
4+
export interface LinkProps {
5+
href: NextLinkProps['href']
6+
target?: string
7+
children?: React.ReactNode
8+
}
9+
10+
export const Link = ({ href, target = '_self', children }: LinkProps) => {
11+
return (
12+
<NextLink href={href} passHref>
13+
<MuiLink target={target} rel="noreferrer noopener" underline="none">
14+
{children}
15+
</MuiLink>
16+
</NextLink>
17+
)
18+
}

‎src/components/atoms/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
export * from './Logo'
22
export * from './Button'
3+
export * from './IconTwitter'
4+
export * from './Link'

‎src/components/organisms/Footer/FooterBottom.tsx‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import { Box } from '@mui/material'
2+
import { useSize } from 'src/modules/common/hooks'
3+
4+
interface FooterBottomProps {
5+
children: React.ReactNode
6+
}
7+
8+
export const FooterBottom = ({ children }: FooterBottomProps) => {
9+
const { isTabletOrOver } = useSize()
10+
11+
return (
12+
<>
13+
{isTabletOrOver ? (
14+
<Box
15+
sx={{
16+
display: 'flex',
17+
flexDirection: 'column',
18+
p: '24px 0px'
19+
}}
20+
>
21+
<Box
22+
sx={{
23+
display: 'flex',
24+
flexDirection: 'column',
25+
p: '0px 36px',
26+
gap: '10px'
27+
}}
28+
>
29+
<Box
30+
sx={{
31+
position: 'relative',
32+
height: '34px'
33+
}}
34+
>
35+
<Box
36+
sx={{
37+
display: 'flex',
38+
flexDirection: 'row',
39+
alignItems: 'center',
40+
p: 0,
41+
gap: '24px'
42+
}}
43+
>
44+
{children}
45+
</Box>
46+
</Box>
47+
</Box>
48+
</Box>
49+
) : (
50+
<Box
51+
sx={{
52+
display: 'flex',
53+
flexDirection: 'column',
54+
p: '16px',
55+
gap: '9px'
56+
}}
57+
>
58+
{children}
59+
</Box>
60+
)}
61+
</>
62+
)
63+
}

‎src/components/organisms/Footer/index.tsx‎

Lines changed: 194 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,211 @@
11
import { Box, Typography } from '@mui/material'
22
import { Colors } from 'src/styles/color'
33
import { useTranslation } from 'react-i18next'
4+
import { useSize } from 'src/modules/common/hooks'
5+
import { FooterBottom } from 'src/components/organisms/Footer/FooterBottom'
6+
import { IconTwitter, Link } from 'src/components/atoms'
47

58
export const footerHeight = 60
69

710
export const Footer = () => {
811
const { t } = useTranslation()
12+
const { isTabletOrOver } = useSize()
13+
914
return (
1015
<Box
1116
sx={{
1217
display: 'flex',
13-
flexDirection: 'column-reverse',
14-
alignItems: 'center',
15-
width: '100%',
16-
height: footerHeight,
17-
backgroundColor: Colors.background.darken_1,
18-
p: 1.5
18+
flexDirection: 'column',
19+
backgroundColor: Colors.background.secondary,
20+
p: 0
1921
}}
2022
>
21-
<Typography variant="caption" color={Colors.text.secondary}>
22-
{t('gopher_copyright')}
23-
</Typography>
23+
<Box
24+
sx={{
25+
display: 'flex',
26+
flexDirection: 'column',
27+
px: isTabletOrOver ? '32px' : '16px'
28+
}}
29+
>
30+
<Box
31+
sx={{
32+
display: 'flex',
33+
flexDirection: 'row',
34+
py: isTabletOrOver ? '36px' : '16px',
35+
gap: isTabletOrOver ? '24px' : '16px'
36+
}}
37+
>
38+
<Box
39+
sx={{
40+
display: 'flex',
41+
flexDirection: 'column',
42+
width: isTabletOrOver ? '440px' : '150px',
43+
flexGrow: 1,
44+
gap: '16px'
45+
}}
46+
>
47+
<Typography
48+
sx={{
49+
fontWeight: 700,
50+
fontSize: '16px',
51+
color: Colors.text.default
52+
}}
53+
>
54+
About
55+
</Typography>
56+
<Box
57+
sx={{
58+
display: 'flex',
59+
flexDirection: 'column',
60+
gap: '8px'
61+
}}
62+
>
63+
<Link href="https://go.dev/conduct" target="_blank">
64+
<Typography
65+
sx={{
66+
fontWeight: 400,
67+
fontSize: '14px',
68+
color: Colors.text.default,
69+
lineHeight: '140%'
70+
}}
71+
>
72+
Code of Conduct
73+
</Typography>
74+
</Link>
75+
<Link href="mailto:[email protected]" target="_blank">
76+
<Typography
77+
sx={{
78+
fontWeight: 400,
79+
fontSize: '14px',
80+
color: Colors.text.default,
81+
lineHeight: '140%'
82+
}}
83+
>
84+
[email protected]
85+
</Typography>
86+
</Link>
87+
</Box>
88+
</Box>
89+
<Box
90+
sx={{
91+
display: 'flex',
92+
flexDirection: 'column',
93+
width: isTabletOrOver ? '440px' : '150px',
94+
flexGlow: 1,
95+
gap: '16px'
96+
}}
97+
>
98+
<Typography
99+
sx={{
100+
fontWeight: 700,
101+
fontSize: '16px',
102+
lineHeight: '140%',
103+
color: Colors.text.default
104+
}}
105+
>
106+
Past Conferences
107+
</Typography>
108+
<Box
109+
sx={{
110+
display: 'flex',
111+
flexDirection: 'column',
112+
gap: '8px'
113+
}}
114+
>
115+
{[
116+
['2022 Spring', 'https://gocon.jp/2022spring/'],
117+
['2021 Autumn', 'https://gocon.jp/2021autumn/'],
118+
['2021 Spring', 'https://gocon.jp/2021spring/']
119+
].map(([label, href]) => (
120+
<Link href={href} key={label} target="_blank">
121+
<Typography
122+
key={label}
123+
sx={{
124+
fontSize: '14px',
125+
lineHeight: '140%',
126+
color: Colors.text.default
127+
}}
128+
>
129+
{label}
130+
</Typography>
131+
</Link>
132+
))}
133+
</Box>
134+
</Box>
135+
{isTabletOrOver && (
136+
<Box
137+
sx={{
138+
width: '440px',
139+
flexGrow: 1
140+
}}
141+
></Box>
142+
)}
143+
</Box>
144+
</Box>
145+
<Box
146+
sx={{
147+
height: '1px',
148+
backgroundColor: Colors.border.primary.highlight
149+
}}
150+
></Box>
151+
<FooterBottom>
152+
<Box
153+
sx={{
154+
display: 'flex',
155+
flexDirection: 'row',
156+
aliginItems: 'end',
157+
width: '150px',
158+
p: '0px',
159+
gap: '16px'
160+
}}
161+
>
162+
<Box
163+
sx={{
164+
width: '32px',
165+
height: '32px'
166+
}}
167+
>
168+
<IconTwitter />
169+
</Box>
170+
<Link href="https://twitter.com/hashtag/gocon" target="_blank">
171+
<Typography
172+
sx={{
173+
fontWeight: 400,
174+
fontSize: '16px',
175+
lineHeight: '140%',
176+
color: Colors.text.secondary_default
177+
}}
178+
>
179+
#GOCON
180+
</Typography>
181+
</Link>
182+
</Box>
183+
<Box
184+
sx={
185+
isTabletOrOver
186+
? {
187+
position: 'absolute',
188+
right: '0px'
189+
}
190+
: {}
191+
}
192+
>
193+
{['Go Conference', 'The Go gopher was designed by Renee French. Illustrations by tottie.'].map(item => (
194+
<Typography
195+
key={item}
196+
sx={{
197+
fontWeight: 400,
198+
fontSize: isTabletOrOver ? '12px' : '10px',
199+
lineHeight: '140%',
200+
color: Colors.text.secondary_default,
201+
textAlign: isTabletOrOver ? 'right' : 'left'
202+
}}
203+
>
204+
{item}
205+
</Typography>
206+
))}
207+
</Box>
208+
</FooterBottom>
24209
</Box>
25210
)
26211
}

‎src/styles/color.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ export const Colors = {
22
text: {
33
primary: '#252A3A',
44
secondary: '#636363',
5+
secondary_default: '#666666',
56
white: '#FFFFFF',
67
default: '#333333',
78
link: '#0078F9',
@@ -17,8 +18,14 @@ export const Colors = {
1718
},
1819
background: {
1920
primary: '#4D94E6', // Brand color
21+
secondary: '#F7F9FB',
2022
gopher_blue: '#00ADD8',
2123
gradation_blue: 'linear-gradient(180deg, #4E96E9 19.27%, rgba(77, 148, 230, 0) 88.54%)',
2224
darken_1: 'rgba(0,0,0,0.125)'
25+
},
26+
border: {
27+
primary: {
28+
highlight: '#E5E5E5'
29+
}
2330
}
2431
}

0 commit comments

Comments
 (0)