UserGroupだけexportするように書き直し

fjordllc · Oct 7, 2023 · 9400cab · 9400cab
1 parent e2b3f6f
commit 9400cab
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/app/javascript/components/Areas/Areas.jsx b/app/javascript/components/Areas/Areas.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import LoadingListPlaceholder from '../LoadingListPlaceholder'
 import EmptyMessage from '../ui/EmptyMessage'
-import { UserGroup, UserGroupHeader, UserGroupIcons } from '../ui/UserGroup'
+import { UserGroup } from '../ui/UserGroup'
 import useSWR from 'swr'
 import fetcher from '../../fetcher'
 import useSearchParams from '../../hooks/useSearchParams'
@@ -79,8 +79,8 @@ export default function Areas({ userCounts }) {
         <section className="a-card">
           {users.length > 0 ? (
             <UserGroup>
-              <UserGroupHeader>{searchParams.get('area')}</UserGroupHeader>
-              <UserGroupIcons users={users} />
+              <UserGroup.Header>{searchParams.get('area')}</UserGroup.Header>
+              <UserGroup.Icons users={users} />
             </UserGroup>
           ) : (
             <EmptyMessage>都道府県別ユーザー一覧はありません</EmptyMessage>

diff --git a/app/javascript/components/ui/UserGroup.jsx b/app/javascript/components/ui/UserGroup.jsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import clsx from 'clsx'
 
-const UserGroup = ({ className, ...props }) => {
+export const UserGroup = ({ className, ...props }) => {
   return <div className={clsx('user-group', className)} {...props} />
 }
 
@@ -42,4 +42,5 @@ const UserIcon = ({ user }) => {
   )
 }
 
-export { UserGroup, UserGroupHeader, UserGroupIcons }
+UserGroup.Header = UserGroupHeader
+UserGroup.Icons = UserGroupIcons