创建新组件

AI 辅助创建新组件

1. 在 components 目录下，创建新的组件文件 new-component/index.tsx。

2. 在 Cursor 中，通过截图+提示词，让 AI 辅助生成新的组件代码。

Prompt

1follow this screenshot, create a react function component for me, use shadcn/ui, tailwindcss

在页面文件中引入新组件

3. 在页面文件 app/[locale]/new-page/page.tsx 中，引入新组件。

app/[locale]/new-page/page.tsx

1"use client";
2            
3import React from "react";
4import { PerplexitySearch } from "@/components/new-component";
5
6export default function PerplexityDemoPage() {
7  return (
8    <div className="min-h-screen bg-gray-50 dark:bg-gray-950">
9      <div className="flex items-center justify-center min-h-screen px-4">
10        <div className="w-full max-w-4xl">
11          <PerplexitySearch
12          />
13        </div>
14      </div>
15      <div className="fixed bottom-4 left-1/2 transform -translate-x-1/2">
16        <p className="text-xs text-gray-500 dark:text-gray-400 text-center">
17          按 Enter 键搜索 • 点击图标使用不同功能
18        </p>
19      </div>
20    </div>
21  );
22}