feat: add ShareDropdownMenu component #38
Conversation
MH4GF
temporarily deployed
to
preview - service-site
GitHub Actions
Inactive
MH4GF
temporarily deployed
to
preview - service-site-storybook
GitHub Actions
Inactive
MH4GF
temporarily deployed
to
preview - service-site
GitHub Actions
Inactive
MH4GF
temporarily deployed
to
preview - service-site-storybook
GitHub Actions
Inactive
| | 'posts.share.facebook' | ||
| | 'posts.share.linkedin', | ||
| string | ||
| > |
There was a problem hiding this comment.
The situation where a key is only available in one of the languages is not complementary, so it is defined as a type.
| string | ||
| > | ||
|
|
||
| export type TranslationFn = <K extends keyof Dictionary>(key: K) => string |
There was a problem hiding this comment.
Defined as a type for ease of definition in component props.
| export const ShareDropdownMenu: FC<Props> = ({ children, t }) => { | ||
| return ( | ||
| <DropdownMenuRoot> | ||
| <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger> |
There was a problem hiding this comment.
Trigger will be this component:
| <DropdownMenuContent sideOffset={5} align="start"> | ||
| <DropdownMenuItem | ||
| leftIcon={<CopyIcon className={styles.icon} />} | ||
| onSelect={() => alert('Item 1 clicked')} |
There was a problem hiding this comment.
Actual copying process will be implemented in another PR.
MH4GF
requested review from
hoshinotsuyoshi,
FunamaYukina,
junkisai and
sasamuku
and removed request for
a team
| import styles from './ShareDropdownMenu.module.css' | ||
|
|
||
| type Props = PropsWithChildren<{ | ||
| t: TranslationFn |
There was a problem hiding this comment.
[Q]
I was thinking it might be okay to use 'lang' as a props, but is there a specific reason why you chose to pass the 't' function as a props?
There was a problem hiding this comment.
This is because it is easier for child components to be maintained if they are initialized in the page component and t is passed around. I refer to the implementation in i18next.
ref: https://locize.com/blog/next-app-dir-i18n/
- No need to worry about SC / CC distinction.
- No need to worry about
getTranslationbecoming an async function. - Components do not have to worry about implementing
getTranslationfor clients, for example, to retrieve lang from localStorage.
- No need to worry about
There was a problem hiding this comment.
I see! 😄
I understand now that considering the async case of SC, passing 't' as a prop makes it unnecessary to maintain the child component.
> Conflicts: > frontend/apps/service-site/package.json > frontend/pnpm-lock.yaml
MH4GF
temporarily deployed
to
preview - service-site
GitHub Actions
Inactive
MH4GF
temporarily deployed
to
preview - service-site-storybook
GitHub Actions
Inactive
implement styling for ShareDropdownMenu component.
2024-10-10.20.12.43.mov
https://service-site-storybook-8c9ytuopb-route-06-plain-core.vercel.app/?path=/story/features-posts-components-sharedropdownmenu--default