update creator page

autogpt_platform/frontend/src/app/[lang]/store/creator/[creator]/page.tsx

@@ -1,18 +1,12 @@
 import AutoGPTServerAPI from "@/lib/autogpt-server-api";
-import {
-  CreatorDetails as Creator,
-  StoreAgent,
-} from "@/lib/autogpt-server-api";
-import { CreatorDetails } from "@/components/agptui/composite/CreatorDetails";
+import { CreatorDetails as Creator, StoreAgent } from "@/lib/autogpt-server-api";
 import { AgentsSection } from "@/components/agptui/composite/AgentsSection";
 import { BreadCrumbs } from "@/components/agptui/BreadCrumbs";
 import { Metadata } from "next";
+import { CreatorInfoCard } from "@/components/agptui/CreatorInfoCard";
+import { CreatorLinks } from "@/components/agptui/CreatorLinks";
 
-export async function generateMetadata({
-  params,
-}: {
-  params: { creator: string };
-}): Promise<Metadata> {
+export async function generateMetadata({ params }: { params: { creator: string } }): Promise<Metadata> {
   const api = new AutoGPTServerAPI();
   const creator = await api.getStoreCreator(params.creator);
 
@@ -27,7 +21,7 @@ export async function generateStaticParams() {
   const creators = await api.getStoreCreators({ featured: true });
   return creators.creators.map((creator) => ({
     creator: creator.username,
-    lang: "en",
+    lang: 'en'
   }));
 }
 
@@ -37,39 +31,54 @@ export default async function Page({
   params: { lang: string; creator: string };
 }) {
   const api = new AutoGPTServerAPI();
-  const creator = await api.getStoreCreator(params.creator);
-  const creatorAgents = await api.getStoreAgents({ creator: params.creator });
-  const agents = creatorAgents.agents;
+  
+  try {
+    const creator = await api.getStoreCreator(params.creator);
+    const creatorAgents = await api.getStoreAgents({ creator: params.creator });
+
+    return (
+      <>
+        <div className="w-full px-4 sm:px-6 md:px-10 py-4 sm:py-6 md:py-8">
+
+          <BreadCrumbs items={[{ name: "Store", link: "/store" }, { name: creator.name, link: "#" }]}/>
+          
+          <div className="mt-4 sm:mt-6 md:mt-8 flex flex-col md:flex-row items-start gap-4 sm:gap-6 md:gap-8">
+            <div className="w-full md:w-auto md:shrink-0">
+              <CreatorInfoCard
+                username={creator.name}
+                handle={creator.username}
+                avatarSrc={creator.avatar_url}
+                categories={creator.top_categories}
+                averageRating={creator.agent_rating}
+                totalRuns={creator.agent_runs}
+              />
+            </div>
+            <div className="flex min-w-0 flex-1 flex-col gap-4 sm:gap-6 md:gap-8">
+              <div className="font-neue text-2xl sm:text-3xl md:text-[35px] font-normal leading-normal md:leading-[45px] text-neutral-900">
+                {creator.description}
+              </div>
+              <CreatorLinks links={creator.links} />
+            </div>
+          </div>
+          <div className="mt-8 sm:mt-12 md:mt-16">
+            <hr className="w-full bg-neutral-700" />
+            <AgentsSection
+              agents={creatorAgents.agents}
+              hideAvatars={true}
+              sectionTitle={`Agents by ${creator.name}`}
+            />
+          </div>
 
-  return (
-    <>
-      <div className="flex w-full flex-col items-center justify-center px-4">
-        <div className="mt-8">
-          <BreadCrumbs
-            items={[
-              { name: "Store", link: "/store" },
-              { name: creator.name, link: "#" },
-            ]}
-          />
-          <CreatorDetails
-            avatarSrc={creator.avatar_url}
-            name={creator.name}
-            username={creator.username}
-            description={creator.description}
-            avgRating={creator.agent_rating}
-            agentCount={creator.agent_runs}
-            topCategories={creator.top_categories}
-            otherLinks={creator.links}
-          />
         </div>
-        <div className="mt-16">
-          <AgentsSection
-            agents={agents}
-            hideAvatars={true}
-            sectionTitle={`Agents by ${creator.name}`}
-          />
+      </>
+    );
+  } catch (error) {
+    return (
+      <div className="w-full h-screen flex items-center justify-center">
+        <div className="font-neue text-2xl text-neutral-900">
+          Creator not found
         </div>
       </div>
-    </>
-  );
-}
+    );
+  }
+}

autogpt_platform/frontend/src/components/agptui/CreatorLinks.tsx

@@ -1,34 +1,27 @@
 import * as React from "react";
-import { IconExternalLink } from "@/components/ui/icons";
+import { getIconForSocial } from "@/components/ui/icons";
 
 interface CreatorLinksProps {
-  links: {
-    website?: string;
-    linkedin?: string;
-    github?: string;
-    other?: string[];
-  };
+  links: string[];
 }
 
 export const CreatorLinks: React.FC<CreatorLinksProps> = ({ links }) => {
-  const hasLinks = links.website || links.linkedin || links.github || (links.other && links.other.length > 0);
-
-  if (!hasLinks) {
+  if (!links || links.length === 0) {
     return null;
   }
 
-  const renderLinkButton = (text: string, href?: string) => (
+  const renderLinkButton = (url: string) => (
     <a
-      href={href}
+      href={url}
       target="_blank"
       rel="noopener noreferrer"
       className="flex min-w-[200px] flex-1 items-center justify-between rounded-[34px] border border-neutral-600 px-5 py-3"
     >
       <div className="font-neue text-base font-medium leading-normal text-neutral-800">
-        {text}
+        {new URL(url).hostname.replace("www.", "")}
       </div>
       <div className="relative h-6 w-6">
-        <IconExternalLink className="h-6 w-6 text-neutral-800" />
+        {getIconForSocial(url, { className: "h-6 w-6 text-neutral-800" })}
       </div>
     </a>
   );
@@ -39,12 +32,9 @@ export const CreatorLinks: React.FC<CreatorLinksProps> = ({ links }) => {
         Other links
       </div>
       <div className="flex w-full flex-wrap gap-3">
-        {links.website && renderLinkButton("Website link", links.website)}
-        {links.linkedin && renderLinkButton("LinkedIn", links.linkedin)}
-        {links.github && renderLinkButton("GitHub", links.github)}
-        {links.other?.map((link, index) => (
+        {links.map((link, index) => (
           <React.Fragment key={index}>
-            {renderLinkButton("Other links", link)}
+            {renderLinkButton(link)}
           </React.Fragment>
         ))}
       </div>