129 lines
4.5 KiB
TypeScript
129 lines
4.5 KiB
TypeScript
"use client";
|
|
|
|
import * as Tabs from "@radix-ui/react-tabs";
|
|
import { Component, useState } from "react";
|
|
import classNames from "classnames";
|
|
import Tiktok from "./tiktok";
|
|
import Avatar from "./avatar";
|
|
import Music from "./music";
|
|
import TextVideo from "./textVideo";
|
|
import ImageVideo from "./imageVideo";
|
|
import { useTranslations } from "next-intl";
|
|
export default function CreateTabs() {
|
|
const t = useTranslations("createTabs");
|
|
const [tabVal, setTabVal] = useState("text");
|
|
const tabsChange = (val: string) => {
|
|
setTabVal(val);
|
|
};
|
|
const getVideoTempUrl = (val: string) => {
|
|
for (let i of tabs) {
|
|
if (i.value === val) {
|
|
return i.videoTemp;
|
|
}
|
|
}
|
|
};
|
|
const tabs = [
|
|
{
|
|
name: t("aiTextVideoGenerator"),
|
|
value: "text",
|
|
component: <TextVideo />,
|
|
videoTemp: "/video/img-to-video/cn/demo_video.webm",
|
|
|
|
},
|
|
{
|
|
name: t("aiImageVideoGenerator"),
|
|
value: "image",
|
|
component: <ImageVideo />,
|
|
videoTemp: "/video/img-to-video/cn/demo_image.webm",
|
|
},
|
|
{
|
|
name: t("aiTiktokVideoGenerator"),
|
|
value: "tiktok",
|
|
component: <Tiktok />,
|
|
videoTemp:
|
|
"/video/create-tiktok-video/en/demo_video.webm",
|
|
ImageTemp:
|
|
"/video/create-tiktok-video/en/demo_demo.webm",
|
|
},
|
|
{
|
|
name: t("aiTalkingAvatarVideoCreator"),
|
|
value: "avatar",
|
|
component: <Avatar />,
|
|
videoTemp:
|
|
"/video/create-Avatar-video/en/demo_video.webm",
|
|
ImageTemp:
|
|
"/video/create-Avatar-video/en/demo_video.webm",
|
|
},
|
|
{
|
|
name: t("aiMusicVideoGenerator"),
|
|
value: "music",
|
|
component: <Music />,
|
|
videoTemp:
|
|
"/video/music-to-video/cn/demo_video.webm",
|
|
ImageTemp:
|
|
"/video/music-to-video/cn/demo_video.webm",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Tabs.Root
|
|
className=""
|
|
defaultValue="tiktok"
|
|
value={tabVal}
|
|
onValueChange={tabsChange}
|
|
>
|
|
<Tabs.List className="w-full flex flex-wrap gap-3">
|
|
{tabs.map((item, index) => {
|
|
return (
|
|
<Tabs.Trigger
|
|
className={classNames(
|
|
"relative rounded-lg border border-base-200 bg-white p-3 flex gap-2 items-center justify-center cursor-pointer",
|
|
{
|
|
"outline-2 outline-offset-1 outline outline-secondary":
|
|
tabVal === item.value,
|
|
}
|
|
)}
|
|
value={item.value}
|
|
key={index}
|
|
>
|
|
<span className="text-gray-800 font-medium text-xs">
|
|
{item.name}
|
|
</span>
|
|
</Tabs.Trigger>
|
|
);
|
|
})}
|
|
</Tabs.List>
|
|
<div className="mt-6 pb-20 flex flex-colw w-full gap-4">
|
|
<div className="w-full flex-[100%]">
|
|
{tabs.map((item, index) => {
|
|
return (
|
|
<Tabs.Content
|
|
className="TabsContent"
|
|
key={index}
|
|
value={item.value}
|
|
>
|
|
<div className="w-full flex flex-col gap-4">
|
|
{item.component}
|
|
</div>
|
|
</Tabs.Content>
|
|
);
|
|
})}
|
|
</div>
|
|
<div className="gap-4 hidden xl:flex">
|
|
<div className="border-l-[1px] border-gray-200 h-full"></div>
|
|
<div className="w-full h-fit mt-8 rounded-xl overflow-hidden">
|
|
<video
|
|
src={getVideoTempUrl(tabVal)}
|
|
playsInline
|
|
loop
|
|
muted
|
|
autoPlay
|
|
preload="auto"
|
|
></video>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Tabs.Root>
|
|
);
|
|
}
|