从零搭建基于 AI GitHub 分析平台 (6) Create Project 页面

效果

实现步骤如下：

设置 Create Project 页面

添加 src/app/(protected)/create-project/page.tsx:

'use client';

import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import React from "react";
import { useForm } from "react-hook-form";

type FormInput = {
  repoURL : string;
  projectName : string;
  githubToken?: string;
}

const CreateProject = ()=>{
  const { register, handleSubmit, reset } = useForm<FormInput>();

  function onSubmit(data: FormInput) {
    console.log(JSON.stringify(data));
    return true;
  }

  return (
    <div className="flex items-center gap-12 h-full justify-center">
      <img src="/undraw_github.png" className="h-56 w-auto" />
      <div>
        <div>
          <h1 className="font-semibold text-2xl">
            连接你的 GitHub 仓库
          </h1>
          <p className="text-sm text-muted-foreground">
            输入你仓库的地址连接到 Aigithub
          </p>
        </div>
        <div className="h-4"></div>
        <div>
          <form onSubmit={handleSubmit(onSubmit)}>
            <Input 
              {...register("projectName" , {required: true} )}
              placeholder="项目名称"
              required
            />
            <div className="h-2"></div>
            <Input 
              {...register("repoURL" , {required: true} )}
              placeholder="项目地址"
              required
            />
            <div className="h-2"></div>
            <Input 
              {...register("githubToken")}
              placeholder="GitHub Token (可选)"
            />
            <div className="h-4"></div>
            <Button type="submit" className="w-full">
              创建项目
            </Button>
          </form>
        </div>
      </div>
    </div>
  )
}

export default CreateProject;

---

作者：Bearalise
出处：从零搭建基于 AI GitHub 分析平台 (6) Create Project 页面
版权：本文版权归作者所有
转载：欢迎转载，但未经作者同意，必须保留此段声明，必须在文章中给出原文链接。