made responsive

This commit is contained in:
SwiftyOS
2024-10-15 11:08:35 +02:00
parent 9db01a7836
commit 5d5f14c799
2 changed files with 9 additions and 2 deletions

View File

@@ -21,18 +21,21 @@ type Story = StoryObj<typeof meta>;
const defaultCreators = [
{
creatorName: "AI Innovator",
creatorImage: "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
bio: "Pushing the boundaries of AI technology",
agentsUploaded: 15,
avatarSrc: "https://example.com/avatar1.jpg",
},
{
creatorName: "Code Wizard",
creatorImage: "https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
bio: "Crafting elegant solutions with AI",
agentsUploaded: 8,
avatarSrc: "https://example.com/avatar2.jpg",
},
{
creatorName: "Data Alchemist",
creatorImage: "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
bio: "Transforming raw data into AI gold",
agentsUploaded: 12,
avatarSrc: "https://example.com/avatar3.jpg",
@@ -59,12 +62,14 @@ export const ManyCreators: Story = {
...defaultCreators,
{
creatorName: "ML Master",
creatorImage: "https://upload.wikimedia.org/wikipedia/commons/c/c5/Big_buck_bunny_poster_big.jpg",
bio: "Specializing in machine learning algorithms",
agentsUploaded: 20,
avatarSrc: "https://example.com/avatar4.jpg",
},
{
creatorName: "NLP Ninja",
creatorImage: "https://framerusercontent.com/images/KCIpxr9f97EGJgpaoqnjKsrOPwI.jpg",
bio: "Expert in natural language processing",
agentsUploaded: 18,
avatarSrc: "https://example.com/avatar5.jpg",

View File

@@ -3,6 +3,7 @@ import { CreatorCard } from "../../CreatorCard";
interface FeaturedCreator {
creatorName: string;
creatorImage: string;
bio: string;
agentsUploaded: number;
avatarSrc: string;
@@ -18,15 +19,16 @@ export const FeaturedCreators: React.FC<FeaturedCreatorsProps> = ({
onCardClick,
}) => {
return (
<div className="flex w-full flex-col items-start justify-center gap-6 py-8">
<div className="flex w-full flex-col items-center lg:items-start justify-center gap-6 py-8">
<div className="font-neue text-[23px] font-bold leading-9 tracking-tight text-[#282828]">
Featured creators
</div>
<div className="flex flex-wrap items-center justify-start gap-5">
<div className="flex flex-wrap items-center justify-center lg:justify-start gap-5">
{featuredCreators.map((creator, index) => (
<CreatorCard
key={index}
creatorName={creator.creatorName}
creatorImage={creator.creatorImage}
bio={creator.bio}
agentsUploaded={creator.agentsUploaded}
avatarSrc={creator.avatarSrc}