npm - nextjs-hackathon-stack - Versions diffs - 0.1.0 - Mend

nextjs-hackathon-stack 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/LICENSE +21 -0
package/README.md +83 -0
package/dist/index.js +152 -0
package/package.json +54 -0
package/template/.cursor/agents/business-intelligence.md +38 -0
package/template/.cursor/agents/code-reviewer.md +74 -0
package/template/.cursor/agents/frontend.md +45 -0
package/template/.cursor/agents/security-researcher.md +49 -0
package/template/.cursor/agents/technical-lead.md +36 -0
package/template/.cursor/agents/test-qa.md +85 -0
package/template/.cursor/rules/ai.mdc +53 -0
package/template/.cursor/rules/architecture.mdc +42 -0
package/template/.cursor/rules/coding-standards.mdc +53 -0
package/template/.cursor/rules/components.mdc +33 -0
package/template/.cursor/rules/data-fetching.mdc +63 -0
package/template/.cursor/rules/forms.mdc +59 -0
package/template/.cursor/rules/general.mdc +52 -0
package/template/.cursor/rules/nextjs.mdc +46 -0
package/template/.cursor/rules/security.mdc +54 -0
package/template/.cursor/rules/supabase.mdc +36 -0
package/template/.cursor/rules/testing.mdc +116 -0
package/template/.cursor/skills/create-api-route/SKILL.md +62 -0
package/template/.cursor/skills/create-feature/SKILL.md +52 -0
package/template/.cursor/skills/review-branch/SKILL.md +61 -0
package/template/.cursor/skills/security-audit/SKILL.md +69 -0
package/template/.env.example +24 -0
package/template/.requirements/README.md +15 -0
package/template/.requirements/auth.md +50 -0
package/template/.requirements/template.md +25 -0
package/template/README.md +98 -0
package/template/components.json +19 -0
package/template/drizzle.config.ts +10 -0
package/template/eslint.config.ts +66 -0
package/template/middleware.ts +10 -0
package/template/next.config.ts +31 -0
package/template/package.json.tmpl +62 -0
package/template/playwright.config.ts +22 -0
package/template/src/app/(auth)/login/page.tsx +12 -0
package/template/src/app/(protected)/layout.tsx +19 -0
package/template/src/app/(protected)/page.tsx +16 -0
package/template/src/app/api/auth/callback/route.ts +21 -0
package/template/src/app/globals.css +1 -0
package/template/src/app/layout.tsx +21 -0
package/template/src/e2e/chat.spec.ts +8 -0
package/template/src/e2e/home.spec.ts +8 -0
package/template/src/e2e/login.spec.ts +21 -0
package/template/src/features/auth/__tests__/login-form.test.tsx +43 -0
package/template/src/features/auth/__tests__/use-auth.test.ts +46 -0
package/template/src/features/auth/actions/login.action.ts +38 -0
package/template/src/features/auth/actions/logout.action.ts +10 -0
package/template/src/features/auth/components/login-form.tsx +80 -0
package/template/src/features/auth/hooks/use-auth.ts +17 -0
package/template/src/features/chat/__tests__/chat-ui.test.tsx +30 -0
package/template/src/features/chat/__tests__/route.test.ts +19 -0
package/template/src/features/chat/api/route.ts +16 -0
package/template/src/features/chat/components/chat-ui.tsx +47 -0
package/template/src/features/chat/hooks/use-chat.ts +1 -0
package/template/src/features/tts/__tests__/route.test.ts +13 -0
package/template/src/features/tts/__tests__/tts-player.test.tsx +20 -0
package/template/src/features/tts/api/route.ts +14 -0
package/template/src/features/tts/components/tts-player.tsx +59 -0
package/template/src/features/video/__tests__/route.test.ts +13 -0
package/template/src/features/video/__tests__/video-generator.test.tsx +20 -0
package/template/src/features/video/api/route.ts +14 -0
package/template/src/features/video/components/video-generator.tsx +56 -0
package/template/src/shared/__tests__/ai.test.ts +8 -0
package/template/src/shared/__tests__/minimax-media.test.ts +57 -0
package/template/src/shared/__tests__/providers.test.tsx +14 -0
package/template/src/shared/__tests__/schema.test.ts +18 -0
package/template/src/shared/__tests__/supabase-client.test.ts +13 -0
package/template/src/shared/__tests__/supabase-server.test.ts +22 -0
package/template/src/shared/components/providers.tsx +19 -0
package/template/src/shared/db/index.ts +7 -0
package/template/src/shared/db/schema.ts +15 -0
package/template/src/shared/lib/ai.ts +8 -0
package/template/src/shared/lib/minimax-media.ts +63 -0
package/template/src/shared/lib/supabase/client.ts +8 -0
package/template/src/shared/lib/supabase/middleware.ts +40 -0
package/template/src/shared/lib/supabase/server.ts +26 -0
package/template/src/test-setup.ts +1 -0
package/template/tailwind.css +20 -0
package/template/tsconfig.json +31 -0
package/template/vitest.config.ts +33 -0

package/template/src/app/api/auth/callback/route.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { NextResponse } from "next/server";
+import { createClient } from "@/shared/lib/supabase/server";
+export async function GET(request: Request) {
+  const { searchParams, origin } = new URL(request.url);
+  const code = searchParams.get("code");
+  const next = searchParams.get("next") ?? "/";
+  if (!code) {
+    return NextResponse.redirect(`${origin}/login?error=no_code`);
+  }
+  const supabase = await createClient();
+  const { error } = await supabase.auth.exchangeCodeForSession(code);
+  if (error) {
+    return NextResponse.redirect(`${origin}/login?error=auth_error`);
+  }
+  return NextResponse.redirect(`${origin}${next}`);
+}

package/template/src/app/globals.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ @import "../../tailwind.css";

package/template/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import { Providers } from "@/shared/components/providers";
+export const metadata: Metadata = {
+  title: "Hackathon App",
+  description: "Built with nextjs-hackathon-stack",
+};
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/template/src/e2e/chat.spec.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { test, expect } from "@playwright/test";
+test.describe("Chat feature", () => {
+  test("login page is accessible", async ({ page }) => {
+    await page.goto("/login");
+    await expect(page.getByTestId("login-form")).toBeVisible();
+  });
+});

package/template/src/e2e/home.spec.ts ADDED Viewed

@@ -0,0 +1,8 @@
+import { test, expect } from "@playwright/test";
+test.describe("Home page", () => {
+  test("shows login page when not authenticated", async ({ page }) => {
+    await page.goto("/");
+    await expect(page).toHaveURL(/login/);
+  });
+});

package/template/src/e2e/login.spec.ts ADDED Viewed

@@ -0,0 +1,21 @@
+import { test, expect } from "@playwright/test";
+test.describe("Login flow", () => {
+  test("redirects unauthenticated users to login", async ({ page }) => {
+    await page.goto("/");
+    await expect(page).toHaveURL(/login/);
+  });
+  test("shows login form", async ({ page }) => {
+    await page.goto("/login");
+    await expect(page.getByTestId("login-form")).toBeVisible();
+    await expect(page.getByLabel(/email/i)).toBeVisible();
+    await expect(page.getByLabel(/password/i)).toBeVisible();
+  });
+  test("shows validation errors on empty submit", async ({ page }) => {
+    await page.goto("/login");
+    await page.getByRole("button", { name: /sign in/i }).click();
+    await expect(page.getByText(/invalid email/i)).toBeVisible();
+  });
+});

package/template/src/features/auth/__tests__/login-form.test.tsx ADDED Viewed

@@ -0,0 +1,43 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { LoginForm } from "../components/login-form";
+vi.mock("../actions/login.action", () => ({
+  loginAction: vi.fn().mockResolvedValue({ status: "idle" }),
+}));
+describe("LoginForm", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  it("renders email and password fields", () => {
+    // Arrange + Act
+    render(<LoginForm />);
+    // Assert
+    expect(screen.getByLabelText(/email/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
+  });
+  it("renders submit button", () => {
+    // Arrange + Act
+    render(<LoginForm />);
+    // Assert
+    expect(screen.getByRole("button", { name: /sign in/i })).toBeInTheDocument();
+  });
+  it("shows validation error when submitting with empty email", async () => {
+    // Arrange
+    const user = userEvent.setup();
+    render(<LoginForm />);
+    // Act
+    await user.click(screen.getByRole("button", { name: /sign in/i }));
+    // Assert
+    expect(await screen.findByText(/invalid email/i)).toBeInTheDocument();
+  });
+});

package/template/src/features/auth/__tests__/use-auth.test.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { renderHook, waitFor } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createElement } from "react";
+import { useAuth } from "../hooks/use-auth";
+const mockGetSession = vi.fn();
+vi.mock("@/shared/lib/supabase/client", () => ({
+  createClient: () => ({
+    auth: { getSession: mockGetSession },
+  }),
+}));
+function wrapper({ children }: { children: React.ReactNode }) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
+  return createElement(QueryClientProvider, { client: queryClient }, children);
+}
+describe("useAuth", () => {
+  it("returns session data when auth succeeds", async () => {
+    // Arrange
+    const mockSession = { user: { id: "123", email: "test@example.com" } };
+    mockGetSession.mockResolvedValue({ data: { session: mockSession }, error: null });
+    // Act
+    const { result } = renderHook(() => useAuth(), { wrapper });
+    // Assert
+    await waitFor(() => expect(result.current.isSuccess).toBe(true));
+    expect(result.current.data).toEqual(mockSession);
+  });
+  it("transitions to error state when auth fails", async () => {
+    // Arrange
+    mockGetSession.mockResolvedValue({ data: { session: null }, error: new Error("Auth error") });
+    // Act
+    const { result } = renderHook(() => useAuth(), { wrapper });
+    // Assert
+    await waitFor(() => expect(result.current.isError).toBe(true));
+  });
+});

package/template/src/features/auth/actions/login.action.ts ADDED Viewed

@@ -0,0 +1,38 @@
+"use server";
+import { redirect } from "next/navigation";
+import { z } from "zod";
+import { createClient } from "@/shared/lib/supabase/server";
+const loginSchema = z.object({
+  email: z.string().email(),
+  password: z.string().min(8),
+});
+export type LoginActionState =
+  | { status: "idle" }
+  | { status: "error"; message: string }
+  | { status: "success" };
+export async function loginAction(
+  _prev: LoginActionState,
+  formData: FormData
+): Promise<LoginActionState> {
+  const parsed = loginSchema.safeParse({
+    email: formData.get("email"),
+    password: formData.get("password"),
+  });
+  if (!parsed.success) {
+    return { status: "error", message: parsed.error.issues[0]?.message ?? "Invalid input" };
+  }
+  const supabase = await createClient();
+  const { error } = await supabase.auth.signInWithPassword(parsed.data);
+  if (error) {
+    return { status: "error", message: error.message };
+  }
+  redirect("/");
+}

package/template/src/features/auth/actions/logout.action.ts ADDED Viewed

@@ -0,0 +1,10 @@
+"use server";
+import { redirect } from "next/navigation";
+import { createClient } from "@/shared/lib/supabase/server";
+export async function logoutAction(): Promise<void> {
+  const supabase = await createClient();
+  await supabase.auth.signOut();
+  redirect("/login");
+}

package/template/src/features/auth/components/login-form.tsx ADDED Viewed

@@ -0,0 +1,80 @@
+"use client";
+import { useActionState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { loginAction, type LoginActionState } from "../actions/login.action";
+const schema = z.object({
+  email: z.string().email("Invalid email"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
+});
+type FormValues = z.infer<typeof schema>;
+const initialState: LoginActionState = { status: "idle" };
+export function LoginForm() {
+  const [state, formAction, isPending] = useActionState(loginAction, initialState);
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormValues>({ resolver: zodResolver(schema) });
+  const onSubmit = handleSubmit((data) => {
+    const fd = new FormData();
+    fd.set("email", data.email);
+    fd.set("password", data.password);
+    formAction(fd);
+  });
+  return (
+    <form onSubmit={onSubmit} data-testid="login-form" className="space-y-4">
+      {state.status === "error" && (
+        <p role="alert" className="text-sm text-red-600">
+          {state.message}
+        </p>
+      )}
+      <div>
+        <label htmlFor="email" className="block text-sm font-medium">
+          Email
+        </label>
+        <input
+          id="email"
+          type="email"
+          autoComplete="email"
+          {...register("email")}
+          className="mt-1 block w-full rounded border px-3 py-2"
+        />
+        {errors.email && (
+          <p className="mt-1 text-sm text-red-600">{errors.email.message}</p>
+        )}
+      </div>
+      <div>
+        <label htmlFor="password" className="block text-sm font-medium">
+          Password
+        </label>
+        <input
+          id="password"
+          type="password"
+          autoComplete="current-password"
+          {...register("password")}
+          className="mt-1 block w-full rounded border px-3 py-2"
+        />
+        {errors.password && (
+          <p className="mt-1 text-sm text-red-600">{errors.password.message}</p>
+        )}
+      </div>
+      <button
+        type="submit"
+        disabled={isPending}
+        className="w-full rounded bg-primary px-4 py-2 text-primary-foreground disabled:opacity-50"
+      >
+        {isPending ? "Signing in..." : "Sign in"}
+      </button>
+    </form>
+  );
+}

package/template/src/features/auth/hooks/use-auth.ts ADDED Viewed

@@ -0,0 +1,17 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import { createClient } from "@/shared/lib/supabase/client";
+export function useAuth() {
+  return useQuery({
+    queryKey: ["auth", "session"],
+    queryFn: async () => {
+      const supabase = createClient();
+      const { data, error } = await supabase.auth.getSession();
+      if (error) throw error;
+      return data.session;
+    },
+    staleTime: 5 * 60 * 1000,
+  });
+}

package/template/src/features/chat/__tests__/chat-ui.test.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { ChatUi } from "../components/chat-ui";
+vi.mock("@ai-sdk/react", () => ({
+  useChat: vi.fn(() => ({
+    messages: [],
+    input: "",
+    handleInputChange: vi.fn(),
+    handleSubmit: vi.fn(),
+    isLoading: false,
+  })),
+}));
+describe("ChatUi", () => {
+  it("renders chat input", () => {
+    render(<ChatUi />);
+    expect(screen.getByTestId("chat-input")).toBeInTheDocument();
+  });
+  it("renders send button", () => {
+    render(<ChatUi />);
+    expect(screen.getByRole("button", { name: /send/i })).toBeInTheDocument();
+  });
+  it("renders messages list area", () => {
+    render(<ChatUi />);
+    expect(screen.getByTestId("chat-ui")).toBeInTheDocument();
+  });
+});

package/template/src/features/chat/__tests__/route.test.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import { describe, it, expect, vi } from "vitest";
+vi.mock("ai", () => ({
+  streamText: vi.fn(() => ({
+    toDataStreamResponse: vi.fn(() => new Response("data: done\n\n")),
+  })),
+}));
+vi.mock("@/shared/lib/ai", () => ({
+  aiModel: {},
+}));
+describe("chat route", () => {
+  it("module is importable", async () => {
+    const mod = await import("../api/route");
+    expect(mod.runtime).toBe("edge");
+    expect(typeof mod.POST).toBe("function");
+  });
+});

package/template/src/features/chat/api/route.ts ADDED Viewed

@@ -0,0 +1,16 @@
+import { streamText } from "ai";
+import { aiModel } from "@/shared/lib/ai";
+export const runtime = "edge";
+export async function POST(req: Request) {
+  const { messages } = (await req.json()) as { messages: Array<{ role: string; content: string }> };
+  const result = streamText({
+    model: aiModel,
+    messages,
+    maxTokens: 2048,
+  });
+  return result.toDataStreamResponse();
+}

package/template/src/features/chat/components/chat-ui.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+"use client";
+import { useChat } from "@ai-sdk/react";
+export function ChatUi() {
+  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({
+    api: "/features/chat/api",
+  });
+  return (
+    <div className="flex flex-col gap-4" data-testid="chat-ui">
+      <div className="h-96 overflow-y-auto rounded border p-4 space-y-2">
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={`rounded p-2 ${
+              message.role === "user" ? "bg-primary/10 ml-8" : "bg-muted mr-8"
+            }`}
+          >
+            <p className="text-sm">{message.content}</p>
+          </div>
+        ))}
+        {isLoading && (
+          <div className="bg-muted mr-8 rounded p-2">
+            <p className="text-sm text-muted-foreground">Thinking...</p>
+          </div>
+        )}
+      </div>
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <input
+          value={input}
+          onChange={handleInputChange}
+          placeholder="Ask anything..."
+          className="flex-1 rounded border px-3 py-2"
+          data-testid="chat-input"
+        />
+        <button
+          type="submit"
+          disabled={isLoading || !input.trim()}
+          className="rounded bg-primary px-4 py-2 text-primary-foreground disabled:opacity-50"
+        >
+          Send
+        </button>
+      </form>
+    </div>
+  );
+}

package/template/src/features/chat/hooks/use-chat.ts ADDED Viewed

	@@ -0,0 +1 @@
1	+ export { useChat } from "@ai-sdk/react";

package/template/src/features/tts/__tests__/route.test.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { describe, it, expect, vi } from "vitest";
+vi.mock("@/shared/lib/minimax-media", () => ({
+  synthesizeSpeech: vi.fn().mockResolvedValue("https://example.com/audio.mp3"),
+}));
+describe("tts route", () => {
+  it("module is importable", async () => {
+    const mod = await import("../api/route");
+    expect(mod.runtime).toBe("edge");
+    expect(typeof mod.POST).toBe("function");
+  });
+});

package/template/src/features/tts/__tests__/tts-player.test.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { TtsPlayer } from "../components/tts-player";
+describe("TtsPlayer", () => {
+  it("renders text input", () => {
+    render(<TtsPlayer />);
+    expect(screen.getByPlaceholderText(/enter text to speak/i)).toBeInTheDocument();
+  });
+  it("renders speak button", () => {
+    render(<TtsPlayer />);
+    expect(screen.getByRole("button", { name: /speak/i })).toBeInTheDocument();
+  });
+  it("button disabled when input empty", () => {
+    render(<TtsPlayer />);
+    expect(screen.getByRole("button", { name: /speak/i })).toBeDisabled();
+  });
+});

package/template/src/features/tts/api/route.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { synthesizeSpeech } from "@/shared/lib/minimax-media";
+export const runtime = "edge";
+export async function POST(req: Request) {
+  const { text, voiceId } = (await req.json()) as { text: string; voiceId?: string };
+  if (!text || typeof text !== "string") {
+    return Response.json({ error: "text is required" }, { status: 400 });
+  }
+  const audioFile = await synthesizeSpeech(text, voiceId);
+  return Response.json({ audioFile });
+}

package/template/src/features/tts/components/tts-player.tsx ADDED Viewed

@@ -0,0 +1,59 @@
+"use client";
+import { useState } from "react";
+export function TtsPlayer() {
+  const [text, setText] = useState("");
+  const [audioUrl, setAudioUrl] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    const response = await fetch("/features/tts/api", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text }),
+    });
+    if (!response.ok) {
+      setError("Failed to synthesize speech");
+      setIsLoading(false);
+      return;
+    }
+    const data = (await response.json()) as { audioFile: string };
+    setAudioUrl(data.audioFile);
+    setIsLoading(false);
+  };
+  return (
+    <div className="space-y-4" data-testid="tts-player">
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <textarea
+          value={text}
+          onChange={(e) => setText(e.target.value)}
+          placeholder="Enter text to speak..."
+          className="flex-1 rounded border px-3 py-2"
+          rows={3}
+        />
+        <button
+          type="submit"
+          disabled={isLoading || !text.trim()}
+          className="rounded bg-primary px-4 py-2 text-primary-foreground disabled:opacity-50"
+        >
+          {isLoading ? "Synthesizing..." : "Speak"}
+        </button>
+      </form>
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      {audioUrl && (
+        <audio controls src={audioUrl} className="w-full">
+          <track kind="captions" />
+        </audio>
+      )}
+    </div>
+  );
+}

package/template/src/features/video/__tests__/route.test.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import { describe, it, expect, vi } from "vitest";
+vi.mock("@/shared/lib/minimax-media", () => ({
+  generateVideo: vi.fn().mockResolvedValue("task-abc"),
+}));
+describe("video route", () => {
+  it("module is importable", async () => {
+    const mod = await import("../api/route");
+    expect(mod.runtime).toBe("edge");
+    expect(typeof mod.POST).toBe("function");
+  });
+});

package/template/src/features/video/__tests__/video-generator.test.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { VideoGenerator } from "../components/video-generator";
+describe("VideoGenerator", () => {
+  it("renders prompt input", () => {
+    render(<VideoGenerator />);
+    expect(screen.getByPlaceholderText(/describe a video/i)).toBeInTheDocument();
+  });
+  it("renders generate button", () => {
+    render(<VideoGenerator />);
+    expect(screen.getByRole("button", { name: /generate/i })).toBeInTheDocument();
+  });
+  it("button disabled when input empty", () => {
+    render(<VideoGenerator />);
+    expect(screen.getByRole("button", { name: /generate/i })).toBeDisabled();
+  });
+});

package/template/src/features/video/api/route.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { generateVideo } from "@/shared/lib/minimax-media";
+export const runtime = "edge";
+export async function POST(req: Request) {
+  const { prompt } = (await req.json()) as { prompt: string };
+  if (!prompt || typeof prompt !== "string") {
+    return Response.json({ error: "prompt is required" }, { status: 400 });
+  }
+  const taskId = await generateVideo(prompt);
+  return Response.json({ taskId });
+}

package/template/src/features/video/components/video-generator.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+"use client";
+import { useState } from "react";
+export function VideoGenerator() {
+  const [prompt, setPrompt] = useState("");
+  const [taskId, setTaskId] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError(null);
+    const response = await fetch("/features/video/api", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ prompt }),
+    });
+    if (!response.ok) {
+      setError("Failed to generate video");
+      setIsLoading(false);
+      return;
+    }
+    const data = (await response.json()) as { taskId: string };
+    setTaskId(data.taskId);
+    setIsLoading(false);
+  };
+  return (
+    <div className="space-y-4" data-testid="video-generator">
+      <form onSubmit={handleSubmit} className="flex gap-2">
+        <input
+          value={prompt}
+          onChange={(e) => setPrompt(e.target.value)}
+          placeholder="Describe a video..."
+          className="flex-1 rounded border px-3 py-2"
+        />
+        <button
+          type="submit"
+          disabled={isLoading || !prompt.trim()}
+          className="rounded bg-primary px-4 py-2 text-primary-foreground disabled:opacity-50"
+        >
+          {isLoading ? "Generating..." : "Generate"}
+        </button>
+      </form>
+      {error && <p className="text-sm text-red-600">{error}</p>}
+      {taskId && (
+        <p className="text-sm text-muted-foreground">Task ID: {taskId}</p>
+      )}
+    </div>
+  );
+}