从零搭建基于 AI GitHub 分析平台 (15) AskQuestionCard 模块

效果

实现步骤如下：

添加 AskQuestionCard 模块

修改 src/app/(protected)/dashboard/AskQuestionCard.tsx:

"use client"

import React, { useState } from 'react'
import useProject from '@/hooks/use-project'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Textarea } from '@/components/ui/textarea';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
import { DialogHeader } from '@/components/ui/dialog';
import Image from 'next/image';

const AskQuestionCard = () => {
  const [ question, setQuestion ] = useState('');

  const onSubmit = async ( e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
  }

  return (
    <>
      <Card className='relative col-span-3'>
        <CardHeader>
          <CardTitle>Ask a question</CardTitle>
        </CardHeader>
        <CardContent>
          <form  onSubmit={ onSubmit }>
            <Textarea placeholder='Which file should I edit to change the home page?' value={question} onChange={ e => setQuestion(e.target.value)} />
            <div className='h-4'></div>

            <Dialog>
              <DialogTrigger asChild>
                <Button type='submit'>
                  Ask AiGithub
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>`1`
                  <DialogTitle>
                    <Image src='/logo.png' alt='aigithub' width={40} height={40} />
                  </DialogTitle>
                </DialogHeader>
              </DialogContent>
            </Dialog> 
          </form>
        </CardContent>
      </Card>
    </>
  )
}

export default AskQuestionCard

修改 Dashboard 页面

import AskQuestionCard from "./AskQuestionCard";
...
  {/* commit log */}
    <div className="mt-8"></div>
    <CommitLog />
  </div>

---

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