From 3b9be5852dd3d32410bcbd2a0c676c69a247a580 Mon Sep 17 00:00:00 2001 From: Kota Morimoto Date: Sat, 16 Nov 2024 01:16:24 +0900 Subject: [PATCH] Refactor TabItem component to extract base path logic --- src/frontend/src/components/ui/Tab/TabItem.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/frontend/src/components/ui/Tab/TabItem.tsx b/src/frontend/src/components/ui/Tab/TabItem.tsx index c3f8ec04..43ba5f54 100644 --- a/src/frontend/src/components/ui/Tab/TabItem.tsx +++ b/src/frontend/src/components/ui/Tab/TabItem.tsx @@ -10,10 +10,14 @@ export const TabItem = ({ path, label: text, activeIcon, inactiveIcon }: TabConf // 現在のパス情報を取得 const { pathname } = useLocation() + // パスからベースパスを抽出する関数 + const extractBasePath = (url: string) => { + return `/${url.split('/').slice(1, 3).join('/')}` + } + // 現在のパスとリンク先パスから、ベースパスを抽出 - // 例: /app/flower/2023-12-25 -> /app/flower - const basePath = `/${pathname.split('/').slice(1, 3).join('/')}` - const linkBasePath = `/${path.split('/').slice(1, 3).join('/')}` + const basePath = extractBasePath(pathname) + const linkBasePath = extractBasePath(path) // 現在のタブがアクティブかどうかを判定 const isActive = basePath === linkBasePath