mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-04-08 03:00:28 -04:00
Delete creator details
This commit is contained in:
SwiftyOS
@@ -1,115 +0,0 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import { CreatorDetails } from "./CreatorDetails";
|
||||
|
||||
const meta = {
|
||||
title: "AGPT UI/Composite/Creator Details",
|
||||
component: CreatorDetails,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
argTypes: {
|
||||
name: { control: "text" },
|
||||
username: { control: "text" },
|
||||
description: { control: "text" },
|
||||
avgRating: { control: "number", min: 0, max: 5, step: 0.1 },
|
||||
agentCount: { control: "number" },
|
||||
topCategories: { control: "object" },
|
||||
otherLinks: { control: "object" },
|
||||
avatarSrc: { control: "text" }, // Added avatarSrc to argTypes
|
||||
},
|
||||
} satisfies Meta<typeof CreatorDetails>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
name: "John Doe",
|
||||
username: "johndoe",
|
||||
description:
|
||||
"Our agents are designed to bring happiness and positive vibes to your daily routine. Each template helps you create and live the life of your dreams while guiding you to become your best every day",
|
||||
avgRating: 4.5,
|
||||
agentCount: 10,
|
||||
topCategories: ["AI", "NLP", "Machine Learning"],
|
||||
otherLinks: {
|
||||
website: "https://johndoe.com",
|
||||
github: "https://github.com/johndoe",
|
||||
linkedin: "https://linkedin.com/in/johndoe",
|
||||
medium: "https://medium.com/@johndoe",
|
||||
youtube: "https://youtube.com/@johndoe",
|
||||
tiktok: "https://tiktok.com/@johndoe",
|
||||
},
|
||||
avatarSrc: "https://github.com/shadcn.png", // Added avatarSrc to Default args
|
||||
},
|
||||
};
|
||||
|
||||
export const NewCreator: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
name: "Jane Smith",
|
||||
username: "janesmith",
|
||||
description:
|
||||
"Aspiring AI enthusiast with a focus on computer vision and image processing.",
|
||||
avgRating: 3.8,
|
||||
agentCount: 2,
|
||||
topCategories: ["Computer Vision", "Image Processing"],
|
||||
otherLinks: {
|
||||
tiktok: "https://tiktok.com/@johndoe",
|
||||
},
|
||||
avatarSrc: "https://example.com/avatar2.jpg", // Added avatarSrc to NewCreator args
|
||||
},
|
||||
};
|
||||
|
||||
export const ExperiencedCreator: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
name: "AI Labs Inc.",
|
||||
username: "ailabs",
|
||||
description:
|
||||
"Leading AI research company developing cutting-edge solutions for various industries.",
|
||||
avgRating: 4.9,
|
||||
agentCount: 50,
|
||||
topCategories: ["AI Research", "Deep Learning", "Robotics", "NLP"],
|
||||
otherLinks: {
|
||||
website: "https://ailabs.com",
|
||||
github: "https://github.com/ailabs",
|
||||
linkedin: "https://linkedin.com/company/ailabs",
|
||||
},
|
||||
avatarSrc: "https://example.com/avatar3.jpg", // Added avatarSrc to ExperiencedCreator args
|
||||
},
|
||||
};
|
||||
|
||||
export const LongDescription: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
name: "Tech Innovations",
|
||||
username: "techinnovations",
|
||||
description:
|
||||
"We are a team of passionate developers and researchers dedicated to pushing the boundaries of artificial intelligence. Our focus spans across multiple domains including natural language processing, computer vision, and reinforcement learning. With years of experience in both academia and industry, we strive to create AI agents that are not only powerful but also ethical and user-friendly.",
|
||||
avgRating: 4.7,
|
||||
agentCount: 25,
|
||||
topCategories: ["AI", "Innovation", "Research", "Deep Learning"],
|
||||
otherLinks: {
|
||||
website: "https://techinnovations.ai",
|
||||
facebook: "https://facebook.com/techinnovations",
|
||||
linkedin: "https://linkedin.com/company/techinnovations",
|
||||
},
|
||||
avatarSrc: "https://example.com/avatar4.jpg", // Added avatarSrc to LongDescription args
|
||||
},
|
||||
};
|
||||
|
||||
export const NoLinks: Story = {
|
||||
args: {
|
||||
...Default.args,
|
||||
name: "Tech Innovations",
|
||||
username: "techinnovations",
|
||||
description:
|
||||
"We are a team of passionate developers and researchers dedicated to pushing the boundaries of artificial intelligence. Our focus spans across multiple domains including natural language processing, computer vision, and reinforcement learning. With years of experience in both academia and industry, we strive to create AI agents that are not only powerful but also ethical and user-friendly.",
|
||||
avgRating: 4.7,
|
||||
agentCount: 25,
|
||||
otherLinks: {},
|
||||
topCategories: ["AI", "Innovation", "Research", "Deep Learning"],
|
||||
avatarSrc: "https://example.com/avatar4.jpg", // Added avatarSrc to LongDescription args
|
||||
},
|
||||
};
|
||||
@@ -1,117 +0,0 @@
|
||||
import * as React from "react";
|
||||
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { getIconForSocial, StarRatingIcons } from "@/components/ui/icons";
|
||||
|
||||
interface CreatorDetailsProps {
|
||||
name: string;
|
||||
username: string;
|
||||
description: string;
|
||||
avgRating: number;
|
||||
agentCount: number;
|
||||
topCategories: string[];
|
||||
otherLinks: string[];
|
||||
avatarSrc: string;
|
||||
}
|
||||
|
||||
export const CreatorDetails: React.FC<CreatorDetailsProps> = React.memo(
|
||||
({
|
||||
name,
|
||||
username,
|
||||
description,
|
||||
avgRating,
|
||||
agentCount,
|
||||
topCategories,
|
||||
otherLinks,
|
||||
avatarSrc,
|
||||
}) => {
|
||||
const avatarSizeClasses = "h-32 w-32";
|
||||
|
||||
return (
|
||||
<div className="w-full max-w-[1359px]">
|
||||
{/* Left Hand Side */}
|
||||
<div className="flex flex-col gap-8 lg:flex-row">
|
||||
<div className="w-full lg:w-1/2">
|
||||
<div className="mb-8">
|
||||
<h1 className="mb-2 font-neue text-5xl font-medium leading-9 tracking-wide text-[#272727]">
|
||||
{name}
|
||||
</h1>
|
||||
<p className="font-neue text-[19px] font-medium leading-9 tracking-tight text-[#737373]">
|
||||
@{username}
|
||||
</p>
|
||||
</div>
|
||||
<div className="mb-8">
|
||||
<Avatar className={avatarSizeClasses}>
|
||||
<AvatarImage src={avatarSrc} alt={`${name}'s avatar`} />
|
||||
<AvatarFallback className={avatarSizeClasses}>
|
||||
{username.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
{Object.keys(otherLinks).length > 0 && (
|
||||
<div>
|
||||
<h2 className="mb-2 font-neue text-lg font-medium leading-9 tracking-tight text-[#282828]">
|
||||
Other links
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
{otherLinks.map((url, index) => (
|
||||
<a
|
||||
key={index}
|
||||
href={url}
|
||||
className="flex items-center gap-2"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{getIconForSocial(url, { className: "h-6 w-6" })}
|
||||
<span className="font-neue text-lg font-normal tracking-tight text-[#282828]">
|
||||
{new URL(url).hostname.replace("www.", "")}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{/* Right Hand Side */}
|
||||
<div className="w-full lg:w-1/2">
|
||||
<p className="mb-8 font-neue text-3xl font-normal leading-[39px] tracking-tight text-[#474747]">
|
||||
{description || "This creator is keeping their bio under wraps"}
|
||||
</p>
|
||||
<div className="mb-8 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-neue text-xl font-normal tracking-tight text-[#474747]">
|
||||
{avgRating.toFixed(1)}
|
||||
</span>
|
||||
<div className="flex">{StarRatingIcons(avgRating)}</div>
|
||||
<span className="font-neue text-xl font-medium tracking-tight text-[#474747]">
|
||||
avg rating
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-neue text-xl font-medium tracking-tight text-[#474747]">
|
||||
{agentCount} agents
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="mb-4 font-neue text-lg font-medium leading-9 tracking-tight text-[#282828]">
|
||||
Top categories
|
||||
</h2>
|
||||
<div className="flex flex-wrap gap-2.5">
|
||||
{topCategories.map((category, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="rounded-[34px] border border-black/50 px-4 py-1.5"
|
||||
>
|
||||
<span className="font-neue text-[19px] font-normal leading-relaxed tracking-tight text-[#474747]">
|
||||
{category}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
CreatorDetails.displayName = "CreatorDetails";
|
||||
Reference in New Issue
Block a user