fix drawer

aws-samples · Nov 15, 2024 · fb541fa · fb541fa
1 parent eaf9fe2
commit fb541fa
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 89 deletions.
diff --git a/packages/web/src/components/Drawer.tsx b/packages/web/src/components/Drawer.tsx
@@ -8,7 +8,8 @@ import ExpandableMenu from './ExpandableMenu';
 import ChatList from './ChatList';
 import DrawerItem, { DrawerItemProps } from './DrawerItem';
 import DrawerBase from './DrawerBase';
-import DrawerTabs from './DrawerTabs';
+import Switch from './Switch';
+import { ROUTE_INDEX_USE_CASE_BUILDER } from '../main';
 
 export type ItemProps = DrawerItemProps & {
   display: 'usecase' | 'tool' | 'none';
@@ -75,26 +76,20 @@ const Drawer: React.FC<Props> = (props) => {
   const useCaseBuilderEnabled: boolean =
     import.meta.env.VITE_APP_USE_CASE_BUILDER_ENABLED === 'true';
 
-  const tabItems = useMemo(() => {
-    return [
-      {
-        label: 'GenU',
-        isActive: true,
-      },
-      {
-        label: 'ユースケースビルダー',
-        onClick: () => {
-          navigate('/use-case-builder');
-        },
-      },
-    ];
-  }, [navigate]);
-
   return (
     <>
       <DrawerBase>
-        {useCaseBuilderEnabled && <DrawerTabs items={tabItems} />}
-        <div className="text-aws-smile mx-3 my-2 text-xs">
+        {useCaseBuilderEnabled && (
+          <Switch
+            className="mx-3 mt-2"
+            label="ユースケースビルダー"
+            checked={false}
+            onSwitch={() => {
+              navigate(ROUTE_INDEX_USE_CASE_BUILDER);
+            }}
+          />
+        )}
+        <div className="text-aws-smile mx-3 my-1 text-xs">
           ユースケース <span className="text-gray-400">(生成 AI)</span>
         </div>
         <div className="scrollbar-thin scrollbar-thumb-white ml-2 mr-1 h-full overflow-y-auto">

diff --git a/packages/web/src/components/DrawerTabs.tsx b/packages/web/src/components/DrawerTabs.tsx
diff --git a/packages/web/src/components/Switch.tsx b/packages/web/src/components/Switch.tsx
@@ -9,7 +9,7 @@ type Props = BaseProps & {
 
 const Switch: React.FC<Props> = (props) => {
   return (
-    <div>
+    <div className={`${props.className ?? ''}`}>
       <label className="relative inline-flex cursor-pointer items-center hover:underline">
         <input
           type="checkbox"

diff --git a/packages/web/src/components/useCaseBuilder/CustomUseCaseDrawerItems.tsx b/packages/web/src/components/useCaseBuilder/CustomUseCaseDrawerItems.tsx
@@ -2,7 +2,6 @@ import { UseCaseAsOutput } from 'generative-ai-use-cases-jp';
 import React, { useCallback } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { ROUTE_INDEX_USE_CASE_BUILDER } from '../../main';
-import { PiStarFill } from 'react-icons/pi';
 
 type Props = {
   useCases: UseCaseAsOutput[];
@@ -26,13 +25,10 @@ const CustomUseCaseDrawerItems: React.FC<Props> = (props) => {
         return (
           <div
             key={usecase.useCaseId}
-            className={`${location.pathname.startsWith(`${ROUTE_INDEX_USE_CASE_BUILDER}/execute/`) && useCaseId === usecase.useCaseId ? 'bg-aws-sky' : ''} hover:bg-aws-sky my-1 flex cursor-pointer items-center gap-2 rounded p-1`}
+            className={`${location.pathname.startsWith(`${ROUTE_INDEX_USE_CASE_BUILDER}/execute/`) && useCaseId === usecase.useCaseId ? 'bg-aws-sky' : ''} hover:bg-aws-sky flex h-8 cursor-pointer items-center rounded p-2`}
             onClick={() => {
               onClick(usecase.useCaseId);
             }}>
-            <PiStarFill
-              className={`${usecase.isFavorite ? 'text-aws-smile' : 'text-transparent'}`}
-            />
             {usecase.title}
           </div>
         );

diff --git a/packages/web/src/components/useCaseBuilder/UseCaseBuilderDrawer.tsx b/packages/web/src/components/useCaseBuilder/UseCaseBuilderDrawer.tsx
@@ -6,7 +6,7 @@ import DrawerBase from '../DrawerBase';
 import ExpandableMenu from '../ExpandableMenu';
 import useMyUseCases from '../../hooks/useCaseBuilder/useMyUseCases';
 import CustomUseCaseDrawerItems from './CustomUseCaseDrawerItems';
-import DrawerTabs from '../DrawerTabs';
+import Switch from '../Switch';
 
 type Props = BaseProps & {
   items: DrawerItemProps[];
@@ -17,40 +17,22 @@ const UseCaseBuilderDrawer: React.FC<Props> = (props) => {
 
   const { favoriteUseCases, recentlyUsedUseCases } = useMyUseCases();
 
-  const useCases = useMemo(() => {
-    const filteredRecentlyUsed = recentlyUsedUseCases.filter(
-      (uc) =>
-        favoriteUseCases.findIndex((fuc) => fuc.useCaseId === uc.useCaseId) ===
-        -1
-    );
-
-    return [...favoriteUseCases, ...filteredRecentlyUsed];
-  }, [favoriteUseCases, recentlyUsedUseCases]);
-
   const items = useMemo(() => {
     return props.items;
   }, [props.items]);
 
-  const tabItems = useMemo(() => {
-    return [
-      {
-        label: 'GenU',
-        onClick: () => {
-          navigate('/');
-        },
-      },
-      {
-        label: 'ユースケースビルダー',
-        isActive: true,
-      },
-    ];
-  }, [navigate]);
-
   return (
     <DrawerBase>
-      <DrawerTabs items={tabItems} />
       <div className="flex-none">
-        <div className="text-aws-smile mx-3 my-2 text-xs">ユースケース管理</div>
+        <Switch
+          className="mx-3 mt-2"
+          label="ユースケースビルダー"
+          checked
+          onSwitch={() => {
+            navigate('/');
+          }}
+        />
+        <div className="text-aws-smile mx-3 my-1 text-xs">コンソール</div>
         {items.map((item, idx) => (
           <DrawerItem
             key={idx}
@@ -64,9 +46,16 @@ const UseCaseBuilderDrawer: React.FC<Props> = (props) => {
         <div className="mt-2 border-b" />
       </div>
 
-      <ExpandableMenu title="ユースケース" className="mx-3 my-2 text-xs">
-        <div className="scrollbar-thin scrollbar-thumb-white ml-2 mr-1 h-full overflow-y-auto">
-          <CustomUseCaseDrawerItems useCases={useCases} />
+      <ExpandableMenu title="お気に入り" className="mx-3 my-2 text-xs">
+        <div className="scrollbar-thin scrollbar-thumb-white ml-2 mr-1 flex h-full flex-col gap-0.5 overflow-y-auto">
+          <CustomUseCaseDrawerItems useCases={favoriteUseCases} />
+        </div>
+      </ExpandableMenu>
+      <div className="border-b" />
+
+      <ExpandableMenu title="利用履歴" className="mx-3 my-2 text-xs">
+        <div className="scrollbar-thin scrollbar-thumb-white ml-2 mr-1 flex h-full flex-col overflow-y-auto">
+          <CustomUseCaseDrawerItems useCases={recentlyUsedUseCases} />
         </div>
       </ExpandableMenu>
       <div className="border-b" />