diff --git a/src/constants/supportExtension/asset.ts b/src/constants/supportExtension/asset.ts new file mode 100644 index 0000000..022ac3c --- /dev/null +++ b/src/constants/supportExtension/asset.ts @@ -0,0 +1,37 @@ +export const ASSET_EXTENSIONS = [ + { + category: '画像', + exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'], + }, + { + category: '動画', + exts: ['mp4', 'mov'], + }, + { + category: '音源', + exts: ['mp3', 'wav', 'm4a'], + }, + { + category: 'モデル', + exts: ['gltf', 'fbx'], + }, + { + category: 'zip', + exts: ['zip'], + }, +] as const; + +const categoryToPrefixMap: { [key: string]: string } = { + 画像: 'image', + 動画: 'video', + 音源: 'audio', + モデル: 'model', + zip: 'application', +}; + +export const ASSET_ACCEPT_EXTENSIONS = ASSET_EXTENSIONS.flatMap((category) => + category.exts.map((ext) => { + const prefix = categoryToPrefixMap[category.category]; + return `${prefix}/${ext}`; + }) +).join(', '); diff --git a/src/constants/supportExtension/index.ts b/src/constants/supportExtension/index.ts new file mode 100644 index 0000000..bcce2e0 --- /dev/null +++ b/src/constants/supportExtension/index.ts @@ -0,0 +1,3 @@ +export * from './asset'; + +export * from './thumbnail'; diff --git a/src/constants/supportExtension/thumbnail.ts b/src/constants/supportExtension/thumbnail.ts new file mode 100644 index 0000000..c116a77 --- /dev/null +++ b/src/constants/supportExtension/thumbnail.ts @@ -0,0 +1,6 @@ +export const THUMBNAIL_EXTENSIONS = [ + { + category: '画像', + exts: ['png', 'jpg', 'jpeg', 'bmp', 'gif'], + }, +] as const; diff --git a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx index 6877eae..4a5d098 100644 --- a/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx +++ b/src/domains/Work/components/WorkEdit/presentations/items/AssetUpload.tsx @@ -2,14 +2,19 @@ import type { FC } from 'react'; import { AssetRender } from '../../../AssetList/assetRender'; +import { SupportExtPopOver } from './SupportExtPopOver'; + 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'; import { Input } from '@/components/ui/Input'; import { Typography } from '@/components/ui/Typography'; +import { + ASSET_ACCEPT_EXTENSIONS, + ASSET_EXTENSIONS, +} from '@/constants/supportExtension'; import { cn } from '@/libs/utils'; type Props = { @@ -23,27 +28,8 @@ export const AssetUpload: FC = ({ handleUploadAssets, assets }) => ( 必須 + - - - 対応形式: - - - 画像 [ .png .jpg .jpeg .bmp .gif ] - - - 動画 [ .mp4 .mov ] - - - 音源 [ .mp3 .wav .m4a ] - - - モデル [ .gltf .fbx ] - - - zip[ .zip ] - - {assets.map((asset) => AssetRender(asset, 'w-24 p-0'))} @@ -77,7 +63,7 @@ export const AssetUpload: FC = ({ handleUploadAssets, assets }) => ( void handleUploadAssets(e.target.files); }} multiple - accept="image/png, image/jpeg, image/jpg, image/bmp, image/gif, video/mp4, video/mov, audio/mp3, audio/wav, audio/m4a, model/gltf, model/fbx, application/zip" + accept={ASSET_ACCEPT_EXTENSIONS} type="file" /> diff --git a/src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx b/src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx new file mode 100644 index 0000000..53a811c --- /dev/null +++ b/src/domains/Work/components/WorkEdit/presentations/items/SupportExtPopOver.tsx @@ -0,0 +1,52 @@ +import type { FC } from 'react'; + +import { Info } from 'lucide-react'; + +import { Horizontal } from '@/components/Layout/Horizontal'; +import { Vertical } from '@/components/Layout/Vertical'; +import { + Tooltip, + TooltipContent, + TooltipProvider, + TooltipTrigger, +} from '@/components/ui/Tooltip'; +import { Typography } from '@/components/ui/Typography'; + +type Props = { + supportedExts: readonly { + category: string; + exts: readonly string[]; + }[]; +}; + +export const SupportExtPopOver: FC = ({ supportedExts }) => ( + + + + + + + + + 対応形式: + {supportedExts.map(({ category, exts }) => ( + + {category} + + + [ + + {exts.map((ext) => ( + .{ext} + ))} + + ] + + + + ))} + + + + +); diff --git a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx index 5a8f76e..6f90b63 100644 --- a/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx +++ b/src/domains/Work/components/WorkEdit/presentations/items/ThumbnailUpload.tsx @@ -1,11 +1,13 @@ import type { FC } from 'react'; -import { Horizontal } from '@/components/Layout/Horizontal'; +import { SupportExtPopOver } from './SupportExtPopOver'; + import { Vertical } from '@/components/Layout/Vertical'; import { DropImage } from '@/components/functional/DropImage'; import { Center } from '@/components/ui/Center'; import { Input } from '@/components/ui/Input'; import { Typography } from '@/components/ui/Typography'; +import { THUMBNAIL_EXTENSIONS } from '@/constants/supportExtension'; import { cn } from '@/libs/utils'; type Props = { @@ -24,15 +26,8 @@ export const ThumbnailUpload: FC = ({ 必須 + - - - 対応形式: - - - 画像 [ .png .jpg .jpeg .bmp .gif ] - - { if (e[0]) { @@ -44,14 +39,14 @@ export const ThumbnailUpload: FC = ({
クリック または ドラッグ&ドロップ - {thumbnailUrl != '' + {thumbnailUrl !== '' ? 'サムネイルをアップロード済み' : 'サムネイルをアップロードしてください'}