Skip to content

Commit

Permalink
Add memos
Browse files Browse the repository at this point in the history
  • Loading branch information
@porink0424
porink0424 committed Oct 27, 2023
1 parent 1cfe97b commit 307927c
Show file tree
Hide file tree
Showing 5 changed files with 148 additions and 117 deletions.
50 changes: 28 additions & 22 deletions app/_components/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,33 +2,39 @@

import { Box, Flex, Space, Stack, Text } from '@mantine/core'
import { useElementSize } from '@mantine/hooks'
import React, { useMemo } from 'react'
import SnsIcons from './SnsIcons'

export default function Footer() {
function Footer() {
const { ref, height } = useElementSize()

return (
<>
<Box ref={ref} w='100%' pos='fixed' bottom={0} className='bg-gray-200'>
<Stack align='center' py={120}>
<Flex className='flex-col sm:flex-row items-center gap-2 sm:gap-12 mb-4'>
{['About', 'Experiences', 'Research', 'Hobby'].map((text, index) => (
<Text fw={600} component='a' href={`#${text}`} size='lg' key={index}>
{text}
</Text>
))}
</Flex>
return useMemo(
() => (
<>
<Box ref={ref} w='100%' pos='fixed' bottom={0} className='bg-gray-200'>
<Stack align='center' py={120}>
<Flex className='flex-col sm:flex-row items-center gap-2 sm:gap-12 mb-4'>
{['About', 'Experiences', 'Research', 'Hobby'].map((text, index) => (
<Text fw={600} component='a' href={`#${text}`} size='lg' key={index}>
{text}
</Text>
))}
</Flex>

<Box mb={32}>
<SnsIcons />
</Box>
<Box mb={32}>
<SnsIcons />
</Box>

<Text size='sm' className='text-center'>
© Copyright 2023 Daichi Kato.
</Text>
</Stack>
</Box>
<Space h={height} />
</>
<Text size='sm' className='text-center'>
© Copyright 2023 Daichi Kato.
</Text>
</Stack>
</Box>
<Space h={height} />
</>
),
[height, ref],
)
}

export default React.memo(Footer)
168 changes: 90 additions & 78 deletions app/_components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
import { useAtom, useAtomValue } from 'jotai'
import { Language as LanguageIcon } from 'tabler-icons-react'
import { useMediaQuery } from '@mantine/hooks'
import { useCallback } from 'react'
import React, { useCallback, useMemo } from 'react'
import { activeSectionAtom, languageAtom, menuOpenAtom } from '../_stores/atoms'
import { LANGUAGES_DISPLAY, Language } from '../_constants/language'

Expand All @@ -38,36 +38,40 @@ function Icon() {

function LanguageButton() {
const [language, setLanguage] = useAtom(languageAtom)
return (
<Menu shadow='md' width={120} transitionProps={{ transition: 'rotate-right', duration: 150 }}>
<MenuTarget>
<UnstyledButton className='!bg-gray-200 flex items-center justify-around !py-[2px] !pl-3 !pr-4 !mr-4 rounded-full'>
<LanguageIcon width={20} height={20} className='mr-1' />
<Text fw={600} size='xs' mr={10}>
{LANGUAGES_DISPLAY[language]}
</Text>
<Box className='inline-block w-[8px] h-[8px] -translate-y-0.5 rotate-45 border-black border-b border-r' />
</UnstyledButton>
</MenuTarget>

<MenuDropdown>
<MenuLabel>Language</MenuLabel>
{Object.entries(LANGUAGES_DISPLAY).map(([languageKey, languageDisplay]) => (
<MenuItem
key={languageKey}
onClick={() => {
setLanguage(languageKey as Language)
}}
>
{languageDisplay}
</MenuItem>
))}
</MenuDropdown>
</Menu>
return useMemo(
() => (
<Menu shadow='md' width={120} transitionProps={{ transition: 'rotate-right', duration: 150 }}>
<MenuTarget>
<UnstyledButton className='!bg-gray-200 flex items-center justify-around !py-[2px] !pl-3 !pr-4 !mr-4 rounded-full'>
<LanguageIcon width={20} height={20} className='mr-1' />
<Text fw={600} size='xs' mr={10}>
{LANGUAGES_DISPLAY[language]}
</Text>
<Box className='inline-block w-[8px] h-[8px] -translate-y-0.5 rotate-45 border-black border-b border-r' />
</UnstyledButton>
</MenuTarget>

<MenuDropdown>
<MenuLabel>Language</MenuLabel>
{Object.entries(LANGUAGES_DISPLAY).map(([languageKey, languageDisplay]) => (
<MenuItem
key={languageKey}
onClick={() => {
setLanguage(languageKey as Language)
}}
>
{languageDisplay}
</MenuItem>
))}
</MenuDropdown>
</Menu>
),
[language, setLanguage],
)
}

export default function Header() {
function Header() {
const activeSection = useAtomValue(activeSectionAtom)
const [open, setOpen] = useAtom(menuOpenAtom)
const isMobile = useMediaQuery('(max-width: 768px)')
Expand All @@ -77,58 +81,66 @@ export default function Header() {
setOpen((prev) => !prev)
}, [setOpen])

return (
<AppShellHeader withBorder={false} className='!bg-transparent flex items-center justify-center'>
<Box className='w-[97%] h-[60px] bg-gray-50 border border-[black] rounded-full flex items-center justify-between'>
{
// eslint-disable-next-line no-nested-ternary
isMobile === undefined ? null : isMobile ? (
<Box w='100%' pos='relative'>
<Group w='100%' justify='space-between'>
<Burger opened={open} onClick={toggleOpen} className='ml-4' />
<LanguageButton />
</Group>
{!isSmallMobile && (
<Box
pos='absolute'
top='50%'
left='50%'
className='-translate-x-1/2 -translate-y-1/2'
>
return useMemo(
() => (
<AppShellHeader
withBorder={false}
className='!bg-transparent flex items-center justify-center'
>
<Box className='w-[97%] h-[60px] bg-gray-50 border border-[black] rounded-full flex items-center justify-between'>
{
// eslint-disable-next-line no-nested-ternary
isMobile === undefined ? null : isMobile ? (
<Box w='100%' pos='relative'>
<Group w='100%' justify='space-between'>
<Burger opened={open} onClick={toggleOpen} className='ml-4' />
<LanguageButton />
</Group>
{!isSmallMobile && (
<Box
pos='absolute'
top='50%'
left='50%'
className='-translate-x-1/2 -translate-y-1/2'
>
<Icon />
</Box>
)}
</Box>
) : (
<>
<Group gap={8} align='center' className='ml-4'>
<Icon />
</Box>
)}
</Box>
) : (
<>
<Group gap={8} align='center' className='ml-4'>
<Icon />
<LanguageButton />
</Group>
<LanguageButton />
</Group>

<Group gap={0} align='center' className='mr-8 h-[46px]'>
{['About', 'Experiences', 'Research', 'Hobby'].map((text, index) => (
<Group gap={0} h='100%' key={text}>
{index > 0 && <Divider h='100%' orientation='vertical' />}
<Text
fw={500}
size='sm'
component='a'
c={activeSection !== index ? 'dimmed' : ''}
href={`#${text}`}
className={`h-full !px-2 flex items-center transition-[background-color,color] duration-[0.3s] hover:bg-gray-200 ${
activeSection === index ? 'bg-gray-200' : ''
}`}
>
{text}
</Text>
</Group>
))}
</Group>
</>
)
}
</Box>
</AppShellHeader>
<Group gap={0} align='center' className='mr-8 h-[46px]'>
{['About', 'Experiences', 'Research', 'Hobby'].map((text, index) => (
<Group gap={0} h='100%' key={text}>
{index > 0 && <Divider h='100%' orientation='vertical' />}
<Text
fw={500}
size='sm'
component='a'
c={activeSection !== index ? 'dimmed' : ''}
href={`#${text}`}
className={`h-full !px-2 flex items-center transition-[background-color,color] duration-[0.3s] hover:bg-gray-200 ${
activeSection === index ? 'bg-gray-200' : ''
}`}
>
{text}
</Text>
</Group>
))}
</Group>
</>
)
}
</Box>
</AppShellHeader>
),
[activeSection, isMobile, isSmallMobile, open, toggleOpen],
)
}

export default React.memo(Header)
40 changes: 25 additions & 15 deletions app/_components/Menu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,38 @@
import { Box, Stack, Text } from '@mantine/core'
import { useAtom } from 'jotai'
import { useMediaQuery } from '@mantine/hooks'
import { useCallback } from 'react'
import React, { useCallback, useMemo } from 'react'
import { menuOpenAtom } from '../_stores/atoms'

export default function Menu() {
function Menu() {
const [open, setOpen] = useAtom(menuOpenAtom)
const isMobile = useMediaQuery('(max-width: 768px)')

const closeMenu = useCallback(() => {
setOpen(false)
}, [setOpen])

if (!isMobile || !open) return null

return (
<Box w='100vw' h='100vh' className='fixed top-0 left-0 z-20 bg-gray-200'>
<Stack w='100%' h='100%' justify='center' align='center' gap={20}>
{['About', 'Experiences', 'Research', 'Hobby'].map((text, index) => (
<Text fw={600} component='a' href={`#${text}`} size='lg' key={index} onClick={closeMenu}>
{text}
</Text>
))}
</Stack>
</Box>
)
return useMemo(() => {
if (!isMobile || !open) return null
return (
<Box w='100vw' h='100vh' className='fixed top-0 left-0 z-20 bg-gray-200'>
<Stack w='100%' h='100%' justify='center' align='center' gap={20}>
{['About', 'Experiences', 'Research', 'Hobby'].map((text, index) => (
<Text
fw={600}
component='a'
href={`#${text}`}
size='lg'
key={index}
onClick={closeMenu}
>
{text}
</Text>
))}
</Stack>
</Box>
)
}, [closeMenu, isMobile, open])
}

export default React.memo(Menu)
5 changes: 4 additions & 1 deletion app/_components/SnsIcons.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { ActionIcon, Group, Image } from '@mantine/core'
import React from 'react'
import { LINK } from '../_constants/link'

export default function SnsIcons() {
function SnsIcons() {
return (
<Group gap={12}>
{[
Expand All @@ -28,3 +29,5 @@ export default function SnsIcons() {
</Group>
)
}

export default React.memo(SnsIcons)
2 changes: 1 addition & 1 deletion app/_constants/link.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,4 +19,4 @@ export const LINK = {
JSAI_2023_PAPER:
'https://www.jstage.jst.go.jp/article/pjsai/JSAI2023/0/JSAI2023_4H2OS6a03/_article/-char/ja',
NLP_2023_PAPER: 'https://www.anlp.jp/proceedings/annual_meeting/2023/pdf_dir/P9-5.pdf',
}
} as const

0 comments on commit 307927c

Please sign in to comment.