feat: import InfoPopOver to AssetUpload, ThumbnailUpload

Kyutech-C3 · May 6, 2024 · 85b447e · 85b447e
1 parent f5c7684
commit 85b447e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 31 deletions.
diff --git a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
@@ -2,9 +2,10 @@ import type { FC } from 'react';
 
 import { AssetRender } from '../../../AssetList/assetRender';
 
+import { InfoPopOver } from './InfoPopOver';
+
 import type { Asset } from '@/domains/Work/types';
 
-import { Horizontal } from '@/components/Layout/Horizontal';
 import { Vertical } from '@/components/Layout/Vertical';
 import { DropImage } from '@/components/functional/DropImage';
 import { Center } from '@/components/ui/Center';
@@ -23,27 +24,10 @@ export const AssetUpload: FC<Props> = ({ handleUploadAssets, assets }) => (
       <Typography className="text-red-500" variant="body2">
         必須
       </Typography>
+      <InfoPopOver>
+        {`対応形式:\n    画像[.png .jpg .jpeg .bmp .gif]\n    動画[.mp4 .mov]\n    音源[.mp3 .wav .m4a ]\n    モデル[.gltf .fbx]\n    zip[.zip]`}
+      </InfoPopOver>
     </Vertical>
-    <Horizontal className="gap-0 items-start -mt-4">
-      <Typography variant="body2" className="text-gray-500">
-        対応形式:
-      </Typography>
-      <Typography variant="body2" className="text-xs text-gray-500 mx-4">
-        画像 [ .png .jpg .jpeg .bmp .gif ]
-      </Typography>
-      <Typography variant="body2" className="text-xs text-gray-500 mx-4">
-        動画 [ .mp4 .mov ]
-      </Typography>
-      <Typography variant="body2" className="text-xs text-gray-500 mx-4">
-        音源 [ .mp3 .wav .m4a ]
-      </Typography>
-      <Typography variant="body2" className="text-xs text-gray-500 mx-4">
-        モデル [ .gltf .fbx ]
-      </Typography>
-      <Typography variant="body2" className="text-xs text-gray-500 mx-4">
-        zip[ .zip ]
-      </Typography>
-    </Horizontal>
     <Vertical className="gap-2 w-full overflow-scroll">
       {assets.map((asset) => AssetRender(asset, 'w-24 p-0'))}
     </Vertical>

diff --git a/...kEdit/presentations/items/InfoToolTip.tsx → ...kEdit/presentations/items/InfoPopOver.tsx b/...kEdit/presentations/items/InfoToolTip.tsx → ...kEdit/presentations/items/InfoPopOver.tsx
@@ -13,7 +13,7 @@ type Props = {
   children: ReactNode;
 };
 
-export const InfoToolTip: FC<Props> = ({ children }) => (
+export const InfoPopOver: FC<Props> = ({ children }) => (
   <TooltipProvider>
     <Tooltip>
       <TooltipTrigger>

diff --git a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx
@@ -1,6 +1,7 @@
 import type { FC } from 'react';
 
-import { Horizontal } from '@/components/Layout/Horizontal';
+import { InfoPopOver } from './InfoPopOver';
+
 import { Vertical } from '@/components/Layout/Vertical';
 import { DropImage } from '@/components/functional/DropImage';
 import { Center } from '@/components/ui/Center';
@@ -24,15 +25,8 @@ export const ThumbnailUpload: FC<Props> = ({
       <Typography variant="body2" className="text-red-500">
         必須
       </Typography>
+      <InfoPopOver>{`対応形式:\n    画像 [ .png .jpg .jpeg .bmp .gif ]`}</InfoPopOver>
     </Vertical>
-    <Horizontal className="gap-0 items-start -mt-4">
-      <Typography variant="body2" className="text-gray-500">
-        対応形式:
-      </Typography>
-      <Typography variant="body2" className="text-xs text-gray-500 mx-4">
-        画像 [ .png .jpg .jpeg .bmp .gif ]
-      </Typography>
-    </Horizontal>
     <DropImage
       onDrop={(e) => {
         if (e[0]) {