开发者的梦想助手：云开发 Copilot 实战教程

// 这是生成的博客编辑页面代码
// @ts-ignore;
import React, { useState } from 'react';
// @ts-ignore;
import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, Textarea } from '@/components/ui';
// @ts-ignore;
import { Edit2, Trash2 } from 'lucide-react';

const PersonalBlog = ({
  $w
}) => {
  const [articles, setArticles] = useState([{
    id: 1,
    title: 'My First Blog Post',
    content: 'This is the content of my first blog post.',
    date: '2023-05-01'
  }, {
    id: 2,
    title: 'Thoughts on React',
    content: 'React is an amazing library for building user interfaces.',
    date: '2023-05-15'
  }]);
  const [newArticle, setNewArticle] = useState({
    title: '',
    content: ''
  });
  const [editingId, setEditingId] = useState(null);
  const handleAddArticle = () => {
    if (newArticle.title && newArticle.content) {
      setArticles([...articles, {
        id: articles.length + 1,
        ...newArticle,
        date: new Date().toISOString().split('T')[0]
      }]);
      setNewArticle({
        title: '',
        content: ''
      });
    }
  };
  const handleEditArticle = id => {
    const articleToEdit = articles.find(article => article.id === id);
    setNewArticle({
      title: articleToEdit.title,
      content: articleToEdit.content
    });
    setEditingId(id);
  };
  const handleUpdateArticle = () => {
    setArticles(articles.map(article => article.id === editingId ? {
      ...article,
      ...newArticle
    } : article));
    setNewArticle({
      title: '',
      content: ''
    });
    setEditingId(null);
  };
  const handleDeleteArticle = id => {
    setArticles(articles.filter(article => article.id !== id));
  };
  return <div className="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
      <header className="bg-white dark:bg-gray-800 shadow">
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <h1 className="text-3xl font-bold">
            {$w.auth.currentUser.name}'s Blog
          </h1>
        </div>
      </header>
      <main className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <div className="px-4 py-6 sm:px-0">
          <Card className="mb-8">
            <CardHeader>
              <CardTitle>Create New Article</CardTitle>
            </CardHeader>
            <CardContent>
              <Input placeholder="Article Title" value={newArticle.title} onChange={e => setNewArticle({
              ...newArticle,
              title: e.target.value
            })} className="mb-4" />
              <Textarea placeholder="Article Content" value={newArticle.content} onChange={e => setNewArticle({
              ...newArticle,
              content: e.target.value
            })} className="mb-4" />
            </CardContent>
            <CardFooter>
              <Button onClick={handleAddArticle}>
                Publish Article
              </Button>
            </CardFooter>
          </Card>

          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
            {articles.map(article => <Card key={article.id}>
                <CardHeader>
                  <CardTitle>{article.title}</CardTitle>
                  <CardDescription>{article.date}</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="line-clamp-3">{article.content}</p>
                </CardContent>
                <CardFooter className="flex justify-between">
                  <Button variant="outline" size="icon" onClick={() => handleEditArticle(article.id)}>
                    <Edit2 className="h-4 w-4" />
                  </Button>
                  <Button variant="destructive" size="icon" onClick={() => handleDeleteArticle(article.id)}>
                    <Trash2 className="h-4 w-4" />
                  </Button>
                </CardFooter>
              </Card>)}
          </div>
        </div>
      </main>
    </div>;
};
export default PersonalBlog;