-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #345 from nekochans/feature/issue323/add-footer-co…
…mponent 新デザイン(2024年)のFooterComponentを作成
- Loading branch information
Showing
6 changed files
with
155 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
import { Footer } from './Footer'; | ||
|
||
const meta = { | ||
component: Footer, | ||
} satisfies Meta<typeof Footer>; | ||
|
||
export default meta; | ||
|
||
type Story = StoryObj<typeof meta>; | ||
|
||
export const ShowJapanese: Story = { | ||
args: { | ||
language: 'ja', | ||
}, | ||
}; | ||
|
||
export const ShowEnglish: Story = { | ||
args: { | ||
language: 'en', | ||
}, | ||
}; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import { createExternalTransmissionPolicyLinksFromLanguages } from '@/features/externalTransmissionPolicy'; | ||
import type { Language } from '@/features/language'; | ||
import { createPrivacyPolicyLinksFromLanguages } from '@/features/privacyPolicy'; | ||
import { createTermsOfUseLinksFromLanguages } from '@/features/termsOfUse'; | ||
import Link from 'next/link'; | ||
import type { JSX } from 'react'; | ||
import { Text } from 'react-aria-components'; | ||
|
||
export type Props = { | ||
language: Language; | ||
}; | ||
|
||
const linkStyle = | ||
'text-[#43281E] font-inter text-sm font-normal leading-5 hover:underline'; | ||
|
||
export const Footer = ({ language }: Props): JSX.Element => { | ||
const terms = createTermsOfUseLinksFromLanguages(language); | ||
|
||
const privacy = createPrivacyPolicyLinksFromLanguages(language); | ||
|
||
const externalTransmissionPolicy = | ||
createExternalTransmissionPolicyLinksFromLanguages(language); | ||
|
||
return ( | ||
<footer className="flex w-full flex-col"> | ||
<div className="mx-auto flex w-full max-w-[375px] items-center px-0 py-3 md:hidden"> | ||
<div className="flex flex-1 flex-col items-center justify-center gap-2"> | ||
<Link href={terms.link} prefetch={false} className={linkStyle}> | ||
<Text data-gtm-click="footer-terms-link">{terms.text}</Text> | ||
</Link> | ||
<Link href={privacy.link} prefetch={false} className={linkStyle}> | ||
<Text data-gtm-click="footer-privacy-link">{privacy.text}</Text> | ||
</Link> | ||
<Link | ||
href={externalTransmissionPolicy.link} | ||
prefetch={false} | ||
className={linkStyle} | ||
> | ||
<Text data-gtm-click="footer-external-transmission-policy-link"> | ||
{externalTransmissionPolicy.text} | ||
</Text> | ||
</Link> | ||
</div> | ||
</div> | ||
<div className="flex h-[60px] items-center justify-center self-stretch border-t border-orange-200 bg-orange-50"> | ||
<Text className="font-inter text-base font-medium text-orange-800"> | ||
Copyright (c) nekochans | ||
</Text> | ||
</div> | ||
</footer> | ||
); | ||
}; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import { type Language } from '@/features/language'; | ||
import { createIncludeLanguageAppPath } from '@/features/url'; | ||
import { assertNever } from '@/utils/assertNever'; | ||
import type { LinkAttribute } from './linkAttribute'; | ||
|
||
export const createExternalTransmissionPolicyLinksFromLanguages = ( | ||
language: Language, | ||
): LinkAttribute => { | ||
switch (language) { | ||
case 'en': | ||
return { | ||
text: 'External Transmission Policy', | ||
link: createIncludeLanguageAppPath( | ||
'external-transmission-policy', | ||
language, | ||
), | ||
}; | ||
case 'ja': | ||
return { | ||
text: '外部送信ポリシー', | ||
link: createIncludeLanguageAppPath( | ||
'external-transmission-policy', | ||
language, | ||
), | ||
}; | ||
default: | ||
return assertNever(language); | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
import type { IncludeLanguageAppPath } from '@/features/url'; | ||
|
||
export type LinkAttribute = { | ||
text: string; | ||
link: IncludeLanguageAppPath; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { type Language } from '@/features/language'; | ||
import { createIncludeLanguageAppPath } from '@/features/url'; | ||
import { assertNever } from '@/utils/assertNever'; | ||
import type { LinkAttribute } from './linkAttribute'; | ||
|
||
export const createPrivacyPolicyLinksFromLanguages = ( | ||
language: Language, | ||
): LinkAttribute => { | ||
switch (language) { | ||
case 'en': | ||
return { | ||
text: 'Privacy Policy', | ||
link: createIncludeLanguageAppPath('privacy', language), | ||
}; | ||
case 'ja': | ||
return { | ||
text: 'プライバシーポリシー', | ||
link: createIncludeLanguageAppPath('privacy', language), | ||
}; | ||
default: | ||
return assertNever(language); | ||
} | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { type Language } from '@/features/language'; | ||
import { createIncludeLanguageAppPath } from '@/features/url'; | ||
import { assertNever } from '@/utils/assertNever'; | ||
import type { LinkAttribute } from './linkAttribute'; | ||
|
||
export const createTermsOfUseLinksFromLanguages = ( | ||
language: Language, | ||
): LinkAttribute => { | ||
switch (language) { | ||
case 'en': | ||
return { | ||
text: 'Terms of Use', | ||
link: createIncludeLanguageAppPath('terms', language), | ||
}; | ||
case 'ja': | ||
return { | ||
text: '利用規約', | ||
link: createIncludeLanguageAppPath('terms', language), | ||
}; | ||
default: | ||
return assertNever(language); | ||
} | ||
}; |