From 85b447e0a71dce4ecfef8d17b06a49677bac00a3 Mon Sep 17 00:00:00 2001
From: powaaaaa <knyuki2525@gmail.com>
Date: Tue, 7 May 2024 01:04:47 +0900
Subject: [PATCH] feat: import InfoPopOver to AssetUpload, ThumbnailUpload

---
 .../presentations/items/AssetUpload.tsx       | 26 ++++---------------
 .../{InfoToolTip.tsx => InfoPopOver.tsx}      |  2 +-
 .../presentations/items/ThumbnailUpload.tsx   | 12 +++------
 3 files changed, 9 insertions(+), 31 deletions(-)
 rename src/domains/Work/components/WorkEdit/presentations/items/{InfoToolTip.tsx => InfoPopOver.tsx} (91%)

diff --git a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx
index 6877eae..a88e376 100644
--- 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/src/domains/Work/components/WorkEdit/presentations/items/InfoToolTip.tsx b/src/domains/Work/components/WorkEdit/presentations/items/InfoPopOver.tsx
similarity index 91%
rename from src/domains/Work/components/WorkEdit/presentations/items/InfoToolTip.tsx
rename to src/domains/Work/components/WorkEdit/presentations/items/InfoPopOver.tsx
index 29255aa..be5e043 100644
--- a/src/domains/Work/components/WorkEdit/presentations/items/InfoToolTip.tsx
+++ b/src/domains/Work/components/WorkEdit/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
index 5a8f76e..4e5aeb1 100644
--- 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]) {