Skip to content

Commit

Permalink
🎨 #324 言語メニューを react-aria-components を使って実装するように変更
Browse files Browse the repository at this point in the history
  • Loading branch information
@keitakn
keitakn committed Sep 21, 2024
1 parent 8b5870c commit 89591ea
Showing 1 changed file with 41 additions and 55 deletions.
96 changes: 41 additions & 55 deletions src/app/_components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,15 @@ import { createTermsOfUseLinksFromLanguages } from '@/features/termsOfUse';
import { appPathList, type IncludeLanguageAppPath } from '@/features/url';
import Link from 'next/link';

Check warning on line 7 in src/app/_components/Header.tsx

View check run for this annotation

Codecov / codecov/patch

src/app/_components/Header.tsx#L4-L7 

Added lines #L4 - L7 were not covered by tests
import type { JSX } from 'react';
import { Header as ReactAriaHeader, Text } from 'react-aria-components';
import {
Button,
Menu,
MenuItem,
MenuTrigger,
Popover,
Header as ReactAriaHeader,
Text,
} from 'react-aria-components';

Check warning on line 17 in src/app/_components/Header.tsx

View check run for this annotation

Codecov / codecov/patch

src/app/_components/Header.tsx#L17 

Added line #L17 was not covered by tests

type Props = {
language: Language;
Expand Down Expand Up @@ -42,8 +50,8 @@ export const Header = ({ language, currentUrlPath }: Props): JSX.Element => {
>
<Text>{terms.text}</Text>

Check warning on line 51 in src/app/_components/Header.tsx

View check run for this annotation

Codecov / codecov/patch

src/app/_components/Header.tsx#L51 

Added line #L51 was not covered by tests
</Link>
<div className="group relative">
<button className="flex items-center text-base font-medium text-orange-50 hover:text-orange-100 sm:text-lg">
<MenuTrigger>
<Button className="flex items-center text-base font-medium text-orange-50 hover:text-orange-100 sm:text-lg">

Check warning on line 54 in src/app/_components/Header.tsx

View check run for this annotation

Codecov / codecov/patch

src/app/_components/Header.tsx#L53-L54 

Added lines #L53 - L54 were not covered by tests
ポリシー
<svg
className="ml-1 size-4 sm:size-5"
Expand All @@ -56,33 +64,24 @@ export const Header = ({ language, currentUrlPath }: Props): JSX.Element => {
clipRule="evenodd"

Check warning on line 64 in src/app/_components/Header.tsx

View check run for this annotation

Codecov / codecov/patch

src/app/_components/Header.tsx#L61-L64 

Added lines #L61 - L64 were not covered by tests
/>
</svg>
</button>
<div className="absolute right-0 mt-2 hidden w-48 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 group-hover:block">
<div
className="py-1"
role="menu"
aria-orientation="vertical"
aria-labelledby="options-menu"
>
<Link
href={privacy.link}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>
<Text>{privacy.text}</Text>
</Link>
<Link
href={externalTransmissionPolicy.link}
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>
<Text>{externalTransmissionPolicy.text}</Text>
</Link>
</div>
</div>
</div>
<div className="group relative">
<button className="flex items-center text-base font-medium text-orange-50 hover:text-orange-100 sm:text-lg">
</Button>
<Popover className="w-48 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5">

Check warning on line 68 in src/app/_components/Header.tsx

View workflow job for this annotation

GitHub Actions / Build And Test (20.x) 

Classname 'ring-opacity-5' should be replaced by an opacity suffix (eg. '/5')
<Menu className="py-1">
<MenuItem className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<Link href={privacy.link}>
<Text>{privacy.text}</Text>

Check warning on line 72 in src/app/_components/Header.tsx

View check run for this annotation

Codecov / codecov/patch

src/app/_components/Header.tsx#L68-L72 

Added lines #L68 - L72 were not covered by tests
</Link>
</MenuItem>
<MenuItem className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<Link href={externalTransmissionPolicy.link}>
<Text>{externalTransmissionPolicy.text}</Text>

Check warning on line 77 in src/app/_components/Header.tsx

View check run for this annotation

Codecov / codecov/patch

src/app/_components/Header.tsx#L75-L77 

Added lines #L75 - L77 were not covered by tests
</Link>
</MenuItem>
</Menu>
</Popover>
</MenuTrigger>
<MenuTrigger>
<Button className="flex items-center text-base font-medium text-orange-50 hover:text-orange-100 sm:text-lg">

Check warning on line 84 in src/app/_components/Header.tsx

View check run for this annotation

Codecov / codecov/patch

src/app/_components/Header.tsx#L83-L84 

Added lines #L83 - L84 were not covered by tests
language
<svg
className="ml-1 size-4 sm:size-5"
Expand All @@ -95,31 +94,18 @@ export const Header = ({ language, currentUrlPath }: Props): JSX.Element => {
clipRule="evenodd"

Check warning on line 94 in src/app/_components/Header.tsx

View check run for this annotation

Codecov / codecov/patch

src/app/_components/Header.tsx#L91-L94 

Added lines #L91 - L94 were not covered by tests
/>
</svg>
</button>
<div className="absolute right-0 mt-2 hidden w-48 rounded-md bg-orange-500 shadow-lg ring-1 ring-black ring-opacity-5 group-hover:block">
<div
className="py-1"
role="menu"
aria-orientation="vertical"
aria-labelledby="language-menu"
>
<Link
href={currentUrlPath}
className="block w-full px-4 py-2 text-left text-base font-medium text-orange-50 hover:bg-orange-600"
role="menuitem"
>
日本語
</Link>
<Link
href={currentUrlPath}
className="block w-full px-4 py-2 text-left text-base font-medium text-orange-50 hover:bg-orange-600"
role="menuitem"
>
English
</Link>
</div>
</div>
</div>
</Button>
<Popover className="w-48 rounded-md bg-orange-500 shadow-lg ring-1 ring-black ring-opacity-5">

Check warning on line 98 in src/app/_components/Header.tsx

View workflow job for this annotation

GitHub Actions / Build And Test (20.x) 

Classname 'ring-opacity-5' should be replaced by an opacity suffix (eg. '/5')
<Menu className="py-1">
<MenuItem className="block w-full px-4 py-2 text-left text-base font-medium text-orange-50 hover:bg-orange-600">
<Link href={currentUrlPath}>日本語</Link>

Check warning on line 101 in src/app/_components/Header.tsx

View check run for this annotation

Codecov / codecov/patch

src/app/_components/Header.tsx#L98-L101 

Added lines #L98 - L101 were not covered by tests
</MenuItem>
<MenuItem className="block w-full px-4 py-2 text-left text-base font-medium text-orange-50 hover:bg-orange-600">
<Link href={currentUrlPath}>English</Link>

Check warning on line 104 in src/app/_components/Header.tsx

View check run for this annotation

Codecov / codecov/patch

src/app/_components/Header.tsx#L103-L104 

Added lines #L103 - L104 were not covered by tests
</MenuItem>
</Menu>
</Popover>
</MenuTrigger>
</nav>
</div>
</ReactAriaHeader>
Expand Down

0 comments on commit 89591ea

Please sign in to comment.