v1.0

src/ui/(console)/create/create-tabs.tsx

@@ -0,0 +1,128 @@
+"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>
+    );
+}