Skip to content

Commit 66fb784

Browse files
maito1201taigakiyokawa
maito1201
and
taigakiyokawa
authored
feat: floor guide (#218)
* feat floor guide * fix typo * fix: whiteSpace option * Update src/components/molecules/BoothCard/index.tsx Co-authored-by: Taiga KIYOKAWA <[email protected]> * Update src/components/molecules/BoothCard/index.tsx Co-authored-by: Taiga KIYOKAWA <[email protected]> * Update src/components/molecules/BoothCard/index.tsx Co-authored-by: Taiga KIYOKAWA <[email protected]> * Update src/components/organisms/VenueInfoSection/index.tsx Co-authored-by: Taiga KIYOKAWA <[email protected]> * Update src/components/pages/PageFloorGuide/index.tsx Co-authored-by: Taiga KIYOKAWA <[email protected]> * Update src/components/pages/PageFloorGuide/index.tsx Co-authored-by: Taiga KIYOKAWA <[email protected]> * Update src/components/pages/PageFloorGuide/index.tsx Co-authored-by: Taiga KIYOKAWA <[email protected]> * Update src/components/pages/PageFloorGuide/index.tsx Co-authored-by: Taiga KIYOKAWA <[email protected]> * run yarn format --------- Co-authored-by: Taiga KIYOKAWA <[email protected]>
1 parent 43ae3f6 commit 66fb784

File tree

14 files changed

+167
-43
lines changed

14 files changed

+167
-43
lines changed

‎src/components/molecules/BoothCard/BoothCard.stories.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import type { Meta, StoryObj } from '@storybook/react'
2+
import { BoothCard } from '.'
3+
import { faker } from '@faker-js/faker'
4+
5+
const meta: Meta<typeof BoothCard> = {
6+
component: BoothCard
7+
}
8+
export default meta
9+
10+
export const Default: StoryObj<typeof BoothCard> = {
11+
args: {
12+
title: faker.lorem.lines(),
13+
description: faker.lorem.paragraph()
14+
}
15+
}

‎src/components/molecules/BoothCard/index.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { Typography, Box } from '@mui/material'
2+
3+
export interface BoothCardProps {
4+
title: string
5+
description: string
6+
}
7+
8+
export const BoothCard = ({ title, description }: BoothCardProps) => {
9+
return (
10+
<Box display={'flex'} flexDirection={'column'} alignItems={'center'} py={4}>
11+
<Typography variant="h3">{title}</Typography>
12+
<Typography
13+
variant="body2"
14+
sx={{ mb: '24px', maxWidth: '680px', wordBreak: 'break-word', whiteSpace: 'pre-wrap' }}
15+
>
16+
{description}
17+
</Typography>
18+
</Box>
19+
)
20+
}

‎src/components/molecules/HeaderMenu/index.tsx‎

Lines changed: 27 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Typography, Box } from '@mui/material'
22
import { useRouter } from 'next/router'
33
import { HeaderItemColor, HeaderMenuItem, HeaderItemBehaviorStyles } from 'src/components/organisms/Header'
4-
// import Link from 'next/link'
4+
import Link from 'next/link'
55

66
export interface HeaderMenuProps {
77
menuList: HeaderMenuItem[]
@@ -16,40 +16,35 @@ export const HeaderMenu = ({ menuList, itemColor, itemBehaviorStyles }: HeaderMe
1616
<Box sx={{ display: 'flex', gap: '8px', margin: '0 24px 0 auto' }}>
1717
{menuList.map((list, i) => {
1818
return list.href ? (
19-
// TODO(maito1201): Enable this conditional branch when screen transition is implemented.
20-
/*
21-
list.href === '/' ? (
19+
list.openNewTab ? (
20+
// TODO(taigakiyokawa): Revert using `next/link` when pages have implemented.
21+
<a href={list.href} target="_blank" rel="noreferrer" key={i}>
22+
<Typography
23+
sx={{
24+
borderBottom: router.pathname === list.href ? '3px solid' : '',
25+
color: itemColor.default,
26+
p: '4px 8px',
27+
...itemBehaviorStyles
28+
}}
29+
>
30+
{list.label}
31+
</Typography>
32+
</a>
33+
) : (
2234
<Link href={list.href} key={i}>
23-
<a>
24-
<Typography
25-
sx={{
26-
borderBottom: router.pathname === list.href ? '3px solid' : '',
27-
color: itemColor.default,
28-
p: '4px 8px',
29-
...itemBehaviorStyles
30-
}}
31-
>
32-
{list.label}
33-
</Typography>
34-
</a>
35+
<Typography
36+
sx={{
37+
borderBottom: router.pathname === list.href ? '3px solid' : '',
38+
color: itemColor.default,
39+
p: '4px 8px',
40+
...itemBehaviorStyles
41+
}}
42+
>
43+
{list.label}
44+
</Typography>
3545
</Link>
36-
) : (
37-
*/
38-
// TODO(taigakiyokawa): Revert using `next/link` when pages have implemented.
39-
<a href={list.href} target="_blank" rel="noreferrer" key={i}>
40-
<Typography
41-
sx={{
42-
borderBottom: router.pathname === list.href ? '3px solid' : '',
43-
color: itemColor.default,
44-
p: '4px 8px',
45-
...itemBehaviorStyles
46-
}}
47-
>
48-
{list.label}
49-
</Typography>
50-
</a>
46+
)
5147
) : (
52-
// )
5348
<Typography
5449
onClick={list.onClick}
5550
sx={{

‎src/components/molecules/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,3 +4,4 @@ export * from './SessionCard'
44
export * from './SpeakerBlock'
55
export * from './SponsorsCard'
66
export * from './TrackCard'
7+
export * from './BoothCard'

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

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export type HeaderMenuItem = {
2020
href?: string
2121
label: string
2222
onClick?: () => void
23+
openNewTab?: boolean
2324
}
2425

2526
export type HeaderItemBehaviorStyles = {
@@ -55,14 +56,12 @@ export const Header = () => {
5556

5657
const menuList: HeaderMenuItem[] = useMemo(() => {
5758
return [
58-
// TODO(maito1201): Display Home label when screen transition is implemented
59-
// { href: '/', label: 'Home' },
59+
{ href: '/', label: 'Home' },
6060
// TODO(taigakiyokawa): Revert to `/sessions` when the page has implemented.
61-
{ href: 'https://sessionize.com/api/v2/jmtn42ls/view/Sessions', label: 'Sessions' },
61+
{ href: 'https://sessionize.com/api/v2/jmtn42ls/view/Sessions', label: 'Sessions', openNewTab: true },
6262
// TODO(taigakiyokawa): Revert to `/timetable` when the page has implemented.
63-
{ href: 'https://sessionize.com/api/v2/jmtn42ls/view/GridSmart', label: 'Timetable' },
64-
// TODO(taigakiyokawa): Revert comment out when the page has implemented.
65-
// { href: '/floor_guide', label: 'Floor Guide' },
63+
{ href: 'https://sessionize.com/api/v2/jmtn42ls/view/GridSmart', label: 'Timetable', openNewTab: true },
64+
{ href: '/floor_guide', label: 'Floor Guide' },
6665
{
6766
label: t('change_language'),
6867
onClick: handleChangeLanguage

‎src/components/organisms/VenueInfoSection/VenueInfoSection.stories.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import type { Meta, StoryObj } from '@storybook/react'
2+
import { VenueInfoSection } from '.'
3+
4+
const meta: Meta<typeof VenueInfoSection> = {
5+
component: VenueInfoSection
6+
}
7+
export default meta
8+
9+
export const Default: StoryObj<typeof VenueInfoSection> = {}

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Typography, Box } from '@mui/material'
2+
import Image from 'next/image'
3+
import { useTranslation } from 'react-i18next'
4+
import FloorImage from 'src/images/floor-image.png'
5+
6+
export const VenueInfoSection = () => {
7+
const { t } = useTranslation()
8+
return (
9+
<Box display="flex" flexDirection="column" alignItems="center">
10+
<Box mb="32px" width="320px" height="140px" position="relative" display="flex" alignItems="center">
11+
<Image src={FloorImage} alt="floor map" fill style={{ objectFit: 'contain', borderRadius: '8px' }} />
12+
</Box>
13+
<Typography variant="body2" sx={{ mb: '24px', maxWidth: '680px' }}>
14+
{t('floor_guide')}
15+
</Typography>
16+
<Box>
17+
{/* TODO: reBakoのリンクを実装する
18+
<a href="#" target="_blank">
19+
<Button text={t('enter_venue')} />
20+
</a>
21+
*/}
22+
</Box>
23+
</Box>
24+
)
25+
}

‎src/components/organisms/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ export * from './SpeakersSection'
55
export * from './SponsorsSection'
66
export * from './TopDescription'
77
export * from './CommunityBoothSection'
8+
export * from './VenueInfoSection'

‎src/components/pages/PageFloorGuide/index.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { Box, Typography } from '@mui/material'
2+
import type { NextPage } from 'next'
3+
import { useTranslation } from 'react-i18next'
4+
import { Layout } from 'src/components/commons'
5+
import { Colors } from 'src/styles/color'
6+
import { BoothCard } from 'src/components/molecules'
7+
import { VenueInfoSection } from 'src/components/organisms'
8+
9+
type boothItem = {
10+
title: string
11+
description: string
12+
}
13+
14+
export const PageFloorGuide: NextPage = () => {
15+
const { t } = useTranslation()
16+
const boothItems: boothItem[] = [
17+
{
18+
title: 'Kyoto.go LT & 雑談会場 「畳」',
19+
description:
20+
'こんにちは！　京都のほうから来ましたKyoto.goです！\nオンラインでのLT会やもくもく会などを月1回のペースで開催しています。\n今回、Kyoto.goではランチタイムにLT大会を開催します。1人3分のスーパーライトニングトーク形式を予定しています（発表者はconnpassでの事前募集枠と当日飛び入り参加枠で募集しています）。発表の合間には参加者同士の雑談タイムを設けて、Gopher同士でワイワイとGoの知見を深め合える時間をご提供します。\nなお、発表者の方にはKyoto.go特製GopherくんNFT (Non-Fungible Token) を配布予定です。（ガス代は不要です！）\nオンライン開催を始めて以来、Kyoto.goは「京都は概念」を合言葉に全国・全世界からご参加をいただいております。全世界のGopherの皆様、どうぞお気軽にお越しください。'
21+
},
22+
{
23+
title: 'Gopherラジオ',
24+
description:
25+
'Go のアプリケーションについて、設計について話し合ったり、開発をモブプログラミングで進めたりします。参加者は聞くだけも OK！参加しても OK！わいわい楽しいコミュニティブースです。'
26+
},
27+
{
28+
title: 'Umeda.go + TinyGo ',
29+
description:
30+
'本ブースでは、 TinyGo の組込ハンズオンとしてシンプルな自作キーボードの作成を行います。基本的には Wio Terminal (https://akizukidenshi.com/catalog/g/gM-15275/) を使って説明しますが、それ以外の TinyGo で遊べるマイコン (https://sago35.hatenablog.com/entry/2023/02/13/220248) のうち samd51 / rp2040 / nrf52840 を搭載したマイコンであれば使用可能です。キーボードとして使いたいので、何らかのボタンを持っているか、外付けできたほうが良いです。\nUmeda.go は、プログラミング言語 Go に関するテックトークなどのイベントをやっています。名前が示す通り、大阪を中心として活動しています。技術レベル・知識を問わず、Goを学びたい人が気軽に相談できるコミュニティ を目指しています。イベントアカウントをフォローしておくと、随時イベント情報をお知らせいたします。\nhttps://twitter.com/umedago'
31+
}
32+
]
33+
34+
return (
35+
<Layout>
36+
<Box display={'flex'} flexDirection={'column'} alignItems={'center'} py={{ md: 10, xs: 4 }} px="24px" mt="100px">
37+
<Typography variant="h2">{t('floor_guide_title')}</Typography>
38+
<VenueInfoSection />
39+
<Box
40+
width="80%"
41+
height="8px"
42+
sx={{ margin: '40px', borderRadius: '4px', backgroundColor: Colors.background.secondary }}
43+
/>
44+
<Typography variant="h2">{t('booth_information_title')}</Typography>
45+
{boothItems.map(({ title, description }, i) => (
46+
<BoothCard key={i} title={title} description={description} />
47+
))}
48+
</Box>
49+
</Layout>
50+
)
51+
}

‎src/components/pages/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
export * from './PageTop'
2+
export * from './PageFloorGuide'

0 commit comments

Comments
 (0)