Versions

  • v7

    9/12/2024
    Open: Version
    Changes from v6 to v7
    +8
    -18
    ⦚ 3 unchanged lines ⦚

    /** @jsxImportSource https://esm.sh/react */
    import { Book, Briefcase, FileText, MessageCircle, Palette, Trophy } from "https://esm.sh/lucide-react";
    import React from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";

    function PersonalCard() {
    ⦚ 3 unchanged lines ⦚
    <div className="bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-white">
    <div className="w-24 h-24 mx-auto bg-white rounded-full border-4 border-white shadow-lg mb-4 overflow-hidden">
    <img
    src="https://maxm-imggenurl.web.val.run/a-professional-headshot-of-a-young-chinese-woman"
    alt="张小可"
    className="w-full h-full object-cover"
    />
    </div>
    <h1 className="text-2xl font-bold text-center">张小可</h1>
    ⦚ 65 unchanged lines ⦚
    <p className="text-sm text-gray-600 italic">"用文字传递情感,用创意点亮生活"</p>
    <div className="w-16 h-16 bg-gray-200 rounded-full overflow-hidden">
    <img
    src="https://maxm-imggenurl.web.val.run/a-creative-logo-for-a-content-creator"
    alt="Logo"
    className="w-full h-full object-cover"
    />
    </div>
    </div>
    ⦚ 15 unchanged lines ⦚
    // server-side only code
    export default async function server(request: Request): Promise<Response> {
    return new Response(
    `
    ⦚ 3 unchanged lines ⦚

    /** @jsxImportSource https://esm.sh/react */
    import React from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";
    import { FileText, Trophy, Briefcase, Palette, Book, MessageCircle } from "https://esm.sh/lucide-react";

    function PersonalCard() {
    ⦚ 3 unchanged lines ⦚
    <div className="bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-white">
    <div className="w-24 h-24 mx-auto bg-white rounded-full border-4 border-white shadow-lg mb-4 overflow-hidden">
    <img src="https://s2.loli.net/2023/10/15/HrQNvpJkUsfCxmF.jpg" alt="张小可" className="w-full h-full object-cover" />
    </div>
    <h1 className="text-2xl font-bold text-center">张小可</h1>
    ⦚ 65 unchanged lines ⦚
    <p className="text-sm text-gray-600 italic">"用文字传递情感,用创意点亮生活"</p>
    <div className="w-16 h-16 bg-gray-200 rounded-full overflow-hidden">
    <img src="https://maxm-imggenurl.web.val.run/a-creative-logo-for-a-content-creator" alt="Logo" className="w-full h-full object-cover" />
    </div>
    </div>
    ⦚ 15 unchanged lines ⦚
    // server-side only code
    export default async function server(request: Request): Promise<Response> {
    return new Response(`
    <!DOCTYPE html>
    <html lang="zh-CN">
    ⦚ 12 unchanged lines ⦚
    </html>
    `,
    {
    headers: {
    "content-type": "text/html",
  • v6

    9/12/2024
    Open: Version
    Changes from v5 to v6
    +0
    -0
    ⦚ 145 unchanged lines ⦚
    ⦚ 145 unchanged lines ⦚
  • v5

    9/12/2024
    Open: Version
    Changes from v4 to v5
    +1
    -1
    ⦚ 14 unchanged lines ⦚
    <div className="w-24 h-24 mx-auto bg-white rounded-full border-4 border-white shadow-lg mb-4 overflow-hidden">
    <img
    src="https://s2.loli.net/2023/10/15/HrQNvpJkUsfCxmF.jpg"
    alt="张小可"
    className="w-full h-full object-cover"
    ⦚ 126 unchanged lines ⦚
    ⦚ 14 unchanged lines ⦚
    <div className="w-24 h-24 mx-auto bg-white rounded-full border-4 border-white shadow-lg mb-4 overflow-hidden">
    <img
    src="https://maxm-imggenurl.web.val.run/a-professional-headshot-of-a-young-chinese-woman"
    alt="张小可"
    className="w-full h-full object-cover"
    ⦚ 126 unchanged lines ⦚
  • v4

    9/12/2024
    Open: Version
    Changes from v3 to v4
    +1
    -1
    ⦚ 14 unchanged lines ⦚
    <div className="w-24 h-24 mx-auto bg-white rounded-full border-4 border-white shadow-lg mb-4 overflow-hidden">
    <img
    src="https://maxm-imggenurl.web.val.run/a-professional-headshot-of-a-young-chinese-woman"
    alt="张小可"
    className="w-full h-full object-cover"
    ⦚ 126 unchanged lines ⦚
    ⦚ 14 unchanged lines ⦚
    <div className="w-24 h-24 mx-auto bg-white rounded-full border-4 border-white shadow-lg mb-4 overflow-hidden">
    <img
    src="https://s2.loli.net/2023/10/15/HrQNvpJkUsfCxmF.jpg"
    alt="张小可"
    className="w-full h-full object-cover"
    ⦚ 126 unchanged lines ⦚
  • v3

    9/12/2024
    Open: Version
    Changes from v2 to v3
    +18
    -8
    ⦚ 3 unchanged lines ⦚

    /** @jsxImportSource https://esm.sh/react */
    import React from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";
    import { FileText, Trophy, Briefcase, Palette, Book, MessageCircle } from "https://esm.sh/lucide-react";

    function PersonalCard() {
    ⦚ 3 unchanged lines ⦚
    <div className="bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-white">
    <div className="w-24 h-24 mx-auto bg-white rounded-full border-4 border-white shadow-lg mb-4 overflow-hidden">
    <img src="https://maxm-imggenurl.web.val.run/a-professional-headshot-of-a-young-chinese-woman" alt="张小可" className="w-full h-full object-cover" />
    </div>
    <h1 className="text-2xl font-bold text-center">张小可</h1>
    ⦚ 65 unchanged lines ⦚
    <p className="text-sm text-gray-600 italic">"用文字传递情感,用创意点亮生活"</p>
    <div className="w-16 h-16 bg-gray-200 rounded-full overflow-hidden">
    <img src="https://maxm-imggenurl.web.val.run/a-creative-logo-for-a-content-creator" alt="Logo" className="w-full h-full object-cover" />
    </div>
    </div>
    ⦚ 15 unchanged lines ⦚
    // server-side only code
    export default async function server(request: Request): Promise<Response> {
    return new Response(`
    <!DOCTYPE html>
    <html lang="zh-CN">
    ⦚ 12 unchanged lines ⦚
    </html>
    `,
    {
    headers: {
    "content-type": "text/html",
    ⦚ 3 unchanged lines ⦚

    /** @jsxImportSource https://esm.sh/react */
    import { Book, Briefcase, FileText, MessageCircle, Palette, Trophy } from "https://esm.sh/lucide-react";
    import React from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";

    function PersonalCard() {
    ⦚ 3 unchanged lines ⦚
    <div className="bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-white">
    <div className="w-24 h-24 mx-auto bg-white rounded-full border-4 border-white shadow-lg mb-4 overflow-hidden">
    <img
    src="https://maxm-imggenurl.web.val.run/a-professional-headshot-of-a-young-chinese-woman"
    alt="张小可"
    className="w-full h-full object-cover"
    />
    </div>
    <h1 className="text-2xl font-bold text-center">张小可</h1>
    ⦚ 65 unchanged lines ⦚
    <p className="text-sm text-gray-600 italic">"用文字传递情感,用创意点亮生活"</p>
    <div className="w-16 h-16 bg-gray-200 rounded-full overflow-hidden">
    <img
    src="https://maxm-imggenurl.web.val.run/a-creative-logo-for-a-content-creator"
    alt="Logo"
    className="w-full h-full object-cover"
    />
    </div>
    </div>
    ⦚ 15 unchanged lines ⦚
    // server-side only code
    export default async function server(request: Request): Promise<Response> {
    return new Response(
    `
  • v2

    9/12/2024
    Open: Version
    Changes from v1 to v2
    +0
    -0
    ⦚ 135 unchanged lines ⦚
    ⦚ 135 unchanged lines ⦚
  • v1

    9/12/2024
    Open: Version
    Changes from v0 to v1
    +18
    -24
    // This approach will create a personal card using React, Shadcn UI, and Lucide React icons.
    // We'll use ESM imports for React, Shadcn UI components, and Lucide icons.
    // The card will be responsive and styled using Tailwind CSS classes.

    /** @jsxImportSource https://esm.sh/react */
    import React from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";
    import { FileText, Trophy, Briefcase, Palette, Book, MessageCircle } from "https://esm.sh/lucide-react";
    import { Card, CardContent, CardFooter, CardHeader } from "https://esm.sh/@shadcn/ui/card";
    import { Avatar, AvatarFallback, AvatarImage } from "https://esm.sh/@shadcn/ui/avatar";
    import { Badge } from "https://esm.sh/@shadcn/ui/badge";

    function PersonalCard() {
    return (
    <div className="flex justify-center items-center min-h-screen bg-gray-100 p-4">
    <Card className="max-w-md w-full overflow-hidden">
    <CardHeader className="bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-white">
    <Avatar className="w-24 h-24 mx-auto border-4 border-white shadow-lg mb-4">
    <AvatarImage src="https://maxm-imggenurl.web.val.run/a-professional-headshot-of-a-young-chinese-woman" alt="张小可" />
    <AvatarFallback>张小</AvatarFallback>
    </Avatar>
    <h1 className="text-2xl font-bold text-center">张小可</h1>
    <p className="text-center text-sm">深圳市, 广东省</p>
    <div className="flex justify-center mt-2 space-x-2">
    <Badge variant="secondary" className="bg-white text-blue-600">文案策划</Badge>
    <Badge variant="secondary" className="bg-white text-purple-600">内容编辑</Badge>
    </div>
    </CardHeader>

    <CardContent className="p-4">
    <div className="mb-4">
    <div className="flex items-center mb-2">
    ⦚ 50 unchanged lines ⦚
    </p>
    </div>
    // This approach will create a personal card using React and Lucide React icons.
    // We'll use ESM imports for React and Lucide icons.
    // The card will be responsive and styled using Tailwind CSS classes.

    /** @jsxImportSource https://esm.sh/react */
    import React from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";
    import { FileText, Trophy, Briefcase, Palette, Book, MessageCircle } from "https://esm.sh/lucide-react";

    function PersonalCard() {
    return (
    <div className="flex justify-center items-center min-h-screen bg-gray-100 p-4">
    <div className="bg-white shadow-2xl rounded-xl max-w-md w-full overflow-hidden">
    <div className="bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-white">
    <div className="w-24 h-24 mx-auto bg-white rounded-full border-4 border-white shadow-lg mb-4 overflow-hidden">
    <img src="https://maxm-imggenurl.web.val.run/a-professional-headshot-of-a-young-chinese-woman" alt="张小可" className="w-full h-full object-cover" />
    </div>
    <h1 className="text-2xl font-bold text-center">张小可</h1>
    <p className="text-center text-sm">深圳市, 广东省</p>
    <div className="flex justify-center mt-2 space-x-2">
    <span className="bg-white text-blue-600 rounded-full px-2 py-1 text-xs font-semibold">文案策划</span>
    <span className="bg-white text-purple-600 rounded-full px-2 py-1 text-xs font-semibold">内容编辑</span>
    </div>
    </div>

    <div className="p-4">
    <div className="mb-4">
    <div className="flex items-center mb-2">
    ⦚ 50 unchanged lines ⦚
    </p>
    </div>
    </div>

    <div className="bg-gray-50 p-4 flex justify-between items-center">
    <p className="text-sm text-gray-600 italic">"用文字传递情感,用创意点亮生活"</p>
  • v0

    9/12/2024
    Open: Version
    +141
    -0

    // This approach will create a personal card using React, Shadcn UI, and Lucide React icons.
    // We'll use ESM imports for React, Shadcn UI components, and Lucide icons.
    // The card will be responsive and styled using Tailwind CSS classes.

    /** @jsxImportSource https://esm.sh/react */
    import React from "https://esm.sh/react";
    import { createRoot } from "https://esm.sh/react-dom/client";
    import { FileText, Trophy, Briefcase, Palette, Book, MessageCircle } from "https://esm.sh/lucide-react";
    import { Card, CardContent, CardFooter, CardHeader } from "https://esm.sh/@shadcn/ui/card";
    import { Avatar, AvatarFallback, AvatarImage } from "https://esm.sh/@shadcn/ui/avatar";
    import { Badge } from "https://esm.sh/@shadcn/ui/badge";

    function PersonalCard() {
    return (
    <div className="flex justify-center items-center min-h-screen bg-gray-100 p-4">
    <Card className="max-w-md w-full overflow-hidden">
    <CardHeader className="bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-white">
    <Avatar className="w-24 h-24 mx-auto border-4 border-white shadow-lg mb-4">
    <AvatarImage src="https://maxm-imggenurl.web.val.run/a-professional-headshot-of-a-young-chinese-woman" alt="张小可" />
    <AvatarFallback>张小</AvatarFallback>
    </Avatar>
    <h1 className="text-2xl font-bold text-center">张小可</h1>
    <p className="text-center text-sm">深圳市, 广东省</p>
    <div className="flex justify-center mt-2 space-x-2">
    <Badge variant="secondary" className="bg-white text-blue-600">文案策划</Badge>
    <Badge variant="secondary" className="bg-white text-purple-600">内容编辑</Badge>
    </div>
    </CardHeader>

    <CardContent className="p-4">
    <div className="mb-4">
    <div className="flex items-center mb-2">
    <FileText className="w-5 h-5 text-blue-500 mr-2" />
    <h2 className="text-lg font-semibold">近期关键投入</h2>
    </div>
    <p className="text-sm text-gray-600">负责公司刊物文案撰写,结合营销节点策划活动文案</p>
1
Next
webup-zhangxiaoke.web.val.run
Updated: September 12, 2024