mirror of
https://github.com/Significant-Gravitas/AutoGPT.git
synced 2026-04-08 03:00:28 -04:00
add new design changes in some components
This commit is contained in:
Abhimanyu Yadav
BIN
autogpt_platform/frontend/public/agpt-logo.png
Normal file
BIN
autogpt_platform/frontend/public/agpt-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
37
autogpt_platform/frontend/public/agpt-logo.svg
Normal file
37
autogpt_platform/frontend/public/agpt-logo.svg
Normal file
@@ -0,0 +1,37 @@
|
||||
<svg width="90" height="40" viewBox="0 0 90 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3_4463)">
|
||||
<path d="M69.9139 28.8681V38.6414C69.9139 39.3617 69.3179 39.951 68.5928 39.951C67.8081 39.951 67.1592 39.4599 67.1592 38.6414V24.0584C67.1592 20.9644 69.6987 18.4531 72.8275 18.4531C75.9563 18.4531 78.4958 20.9644 78.4958 24.0584C78.4958 27.1525 75.9563 29.6637 72.8275 29.6637C71.7614 29.6637 70.7681 29.3723 69.9172 28.8681H69.9139ZM71.076 22.3231C72.0428 22.3231 72.8275 23.0991 72.8275 24.0552C72.8275 25.0112 72.0428 25.7872 71.076 25.7872C70.8972 25.7872 70.7217 25.761 70.5595 25.7119C71.0727 26.3994 71.8971 26.8447 72.8275 26.8447C74.3836 26.8447 75.6451 25.5973 75.6451 24.0584C75.6451 22.5196 74.3836 21.2721 72.8275 21.2721C71.8971 21.2721 71.0727 21.7174 70.5595 22.405C70.7217 22.3559 70.8972 22.3297 71.076 22.3297V22.3231Z" fill="url(#paint0_linear_3_4463)"/>
|
||||
<path d="M62.8318 28.8675V35.144C62.8318 35.7137 62.5968 36.2343 62.216 36.6075C61.3817 37.4326 59.8355 37.4326 59.0011 36.6075C57.9052 35.5238 58.9448 33.6903 56.9848 31.752C55.0247 29.8137 51.7734 29.8694 49.8729 31.752C48.9955 32.6196 48.4492 33.8212 48.4492 35.144C48.4492 35.8643 49.0452 36.4536 49.7736 36.4536C50.5616 36.4536 51.2072 35.9625 51.2072 35.144C51.2072 34.5743 51.4423 34.057 51.823 33.6805C52.6574 32.8554 54.2036 32.8554 55.0379 33.6805C56.2332 34.8624 55.0247 36.5289 57.0543 38.536C58.9581 40.4186 62.2657 40.4186 64.1661 38.536C65.0435 37.6683 65.5898 36.4667 65.5898 35.144V24.0545C65.5898 20.9605 63.0504 18.4492 59.9215 18.4492C56.7927 18.4492 54.2533 20.9605 54.2533 24.0545C54.2533 27.1486 56.7927 29.6598 59.9215 29.6598C60.9877 29.6598 61.9842 29.3684 62.8318 28.8642V28.8675ZM59.9215 26.8441C58.9912 26.8441 58.1668 26.3988 57.6536 25.7112C57.8158 25.7603 57.9913 25.7865 58.1701 25.7865C59.1369 25.7865 59.9215 25.0106 59.9215 24.0545C59.9215 23.0985 59.1369 22.3225 58.1701 22.3225C57.9913 22.3225 57.8158 22.3487 57.6536 22.3978C58.1668 21.7103 58.9912 21.265 59.9215 21.265C61.4777 21.265 62.7391 22.5124 62.7391 24.0512C62.7391 25.5901 61.4777 26.8375 59.9215 26.8375V26.8441Z" fill="url(#paint1_linear_3_4463)"/>
|
||||
<path d="M82.6281 12.959C82.6281 9.51134 81.2409 6.24048 78.7809 3.80453C76.3175 1.36858 73.0099 0 69.5235 0C66.0372 0 62.7296 1.37186 60.2662 3.80453C57.8029 6.24048 56.4189 9.51461 56.4189 12.959V13.5451C56.4189 14.2948 57.0348 14.9038 57.793 14.9038C58.5512 14.9038 59.167 14.2948 59.167 13.5451V12.959C59.167 10.2349 60.2662 7.64836 62.2097 5.72645C64.1532 3.80453 66.7689 2.71425 69.5235 2.71425C72.2782 2.71425 74.8905 3.80126 76.8374 5.72645C78.7809 7.64836 79.8834 10.2349 79.8834 12.959C79.8834 13.7088 80.4992 14.3178 81.2574 14.3178C82.0156 14.3178 82.6315 13.7088 82.6315 12.959H82.6281Z" fill="url(#paint2_linear_3_4463)"/>
|
||||
<path d="M82.6289 17.061V18.7341H84.8406C85.5756 18.7341 86.1782 19.33 86.1782 20.0569C86.1782 20.7837 85.6485 21.4582 84.8406 21.4582H82.6289V35.1964C82.6289 35.7661 82.864 36.2834 83.2447 36.6599C84.0791 37.485 85.6253 37.485 86.4596 36.6599C86.8404 36.2834 87.0755 35.7661 87.0755 35.1964V34.738C87.0755 33.9228 87.7244 33.4284 88.5091 33.4284C89.2375 33.4284 89.8335 34.0177 89.8335 34.738V35.1964C89.8335 36.5192 89.2872 37.7208 88.4098 38.5884C86.506 40.471 83.2083 40.471 81.3046 38.5884C80.4272 37.7208 79.8809 36.5192 79.8809 35.1964V17.061C79.8809 16.272 80.5132 15.7383 81.288 15.7383C82.0628 15.7383 82.6256 16.3342 82.6256 17.061H82.6289Z" fill="url(#paint3_linear_3_4463)"/>
|
||||
<path d="M76.2765 38.6377C76.2765 39.358 75.6806 39.9441 74.9522 39.9441C74.1675 39.9441 73.5186 39.453 73.5186 38.6377V34.2013C73.5186 33.4809 74.1145 32.8916 74.8429 32.8916C75.6276 32.8916 76.2765 33.3827 76.2765 34.2013V38.6377Z" fill="url(#paint4_linear_3_4463)"/>
|
||||
<path d="M11.9004 22.2907V31.6252H9.04308V26.9399H2.8583V31.6252H0.000976562V22.2907C0.000976562 14.5998 11.9004 14.4983 11.9004 22.2907ZM44.8804 31.6252C49.1085 31.6252 52.5353 28.2365 52.5353 24.0554C52.5353 19.8744 49.1085 16.4857 44.8804 16.4857C40.6524 16.4857 37.2256 19.8744 37.2256 24.0554C37.2256 28.2365 40.6524 31.6252 44.8804 31.6252ZM44.8804 28.7309C42.2714 28.7309 40.1557 26.6387 40.1557 24.0587C40.1557 21.4787 42.2714 19.3865 44.8804 19.3865C47.4894 19.3865 49.6051 21.4787 49.6051 24.0587C49.6051 26.6387 47.4894 28.7309 44.8804 28.7309ZM37.7421 16.4857V19.2097H33.5836V31.6252H30.8289V19.2097H26.6704V16.4857H37.7421ZM25.2931 25.8202V16.4857H22.4357V25.8202C22.4357 30.0242 16.2476 29.9489 16.2476 25.8202V16.4857H13.3903V25.8202C13.3903 33.5111 25.2897 33.6126 25.2897 25.8202H25.2931ZM9.04308 24.2159V22.294C9.04308 18.09 2.85498 18.1653 2.85498 22.294V24.2159H9.04308Z" fill="#000030"/>
|
||||
<path d="M88.4557 32.257C89.2365 32.257 89.8695 31.6311 89.8695 30.859C89.8695 30.0869 89.2365 29.4609 88.4557 29.4609C87.675 29.4609 87.042 30.0869 87.042 30.859C87.042 31.6311 87.675 32.257 88.4557 32.257Z" fill="#669CF6"/>
|
||||
<path d="M49.7702 39.9475C50.551 39.9475 51.184 39.3215 51.184 38.5494C51.184 37.7773 50.551 37.1514 49.7702 37.1514C48.9894 37.1514 48.3564 37.7773 48.3564 38.5494C48.3564 39.3215 48.9894 39.9475 49.7702 39.9475Z" fill="#669CF6"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear_3_4463" x1="63.4383" y1="20.9589" x2="63.4383" y2="33.2932" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#000030"/>
|
||||
<stop offset="1" stop-color="#9900FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint1_linear_3_4463" x1="48.0684" y1="20.947" x2="48.0684" y2="33.2951" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#000030"/>
|
||||
<stop offset="1" stop-color="#4285F4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint2_linear_3_4463" x1="70.1948" y1="6.17402" x2="48.7204" y2="-4.1259" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#4285F4"/>
|
||||
<stop offset="1" stop-color="#9900FF"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint3_linear_3_4463" x1="75.134" y1="15.7136" x2="75.134" y2="34.5465" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#000030"/>
|
||||
<stop offset="1" stop-color="#4285F4"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="paint4_linear_3_4463" x1="65.0808" y1="24.1914" x2="65.8035" y2="30.9774" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#4285F4"/>
|
||||
<stop offset="1" stop-color="#9900FF"/>
|
||||
</linearGradient>
|
||||
<clipPath id="clip0_3_4463">
|
||||
<rect width="89.8681" height="40" fill="white" transform="translate(0.000976562)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.2 KiB |
@@ -7,14 +7,15 @@ export default function PlatformLayout({ children }: { children: ReactNode }) {
|
||||
<>
|
||||
<Navbar
|
||||
links={[
|
||||
{
|
||||
name: "Home",
|
||||
href: "/home",
|
||||
},
|
||||
{
|
||||
name: "Marketplace",
|
||||
href: "/marketplace",
|
||||
},
|
||||
{
|
||||
name: "Library",
|
||||
href: "/library",
|
||||
},
|
||||
|
||||
{
|
||||
name: "Build",
|
||||
href: "/build",
|
||||
|
||||
@@ -150,7 +150,7 @@ export default async function Page({}: {}) {
|
||||
|
||||
return (
|
||||
<div className="mx-auto w-screen max-w-[1360px] overflow-x-hidden">
|
||||
<main className="px-4">
|
||||
<main>
|
||||
<HeroSection />
|
||||
<FeaturedSection featuredAgents={featuredAgents.agents} />
|
||||
{/* 100px margin because our featured sections button are placed 40px below the container */}
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react";
|
||||
import AutogptButton from "./AutogptButton";
|
||||
|
||||
const meta = {
|
||||
title: "New/AutogptButton",
|
||||
component: AutogptButton,
|
||||
parameters: {
|
||||
layout: "centered",
|
||||
},
|
||||
tags: ["autodocs"],
|
||||
} satisfies Meta<typeof AutogptButton>;
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof meta>;
|
||||
|
||||
export const Primary: Story = {
|
||||
args: {
|
||||
children: "Primary Button",
|
||||
variant: "default",
|
||||
},
|
||||
};
|
||||
|
||||
export const PrimaryWithIcon: Story = {
|
||||
args: {
|
||||
icon: true,
|
||||
children: "Primary Button",
|
||||
variant: "default",
|
||||
},
|
||||
};
|
||||
|
||||
export const PrimaryDisabled: Story = {
|
||||
args: {
|
||||
children: "Primary Button",
|
||||
variant: "default",
|
||||
isDisabled: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const Secondary: Story = {
|
||||
args: {
|
||||
children: "Primary Button",
|
||||
variant: "secondary",
|
||||
},
|
||||
};
|
||||
|
||||
export const SecondaryWithIcon: Story = {
|
||||
args: {
|
||||
icon: true,
|
||||
children: "Secondary Button",
|
||||
variant: "secondary",
|
||||
},
|
||||
};
|
||||
|
||||
export const SecondaryDisabled: Story = {
|
||||
args: {
|
||||
children: "Secondary Button",
|
||||
variant: "secondary",
|
||||
isDisabled: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const Destructive: Story = {
|
||||
args: {
|
||||
children: "Destructive Button",
|
||||
variant: "destructive",
|
||||
},
|
||||
};
|
||||
|
||||
export const DestructiveWithIcon: Story = {
|
||||
args: {
|
||||
icon: true,
|
||||
children: "Destructive Button",
|
||||
variant: "destructive",
|
||||
},
|
||||
};
|
||||
|
||||
export const DestructiveDisabled: Story = {
|
||||
args: {
|
||||
children: "Destructive Button",
|
||||
variant: "destructive",
|
||||
isDisabled: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const Outline: Story = {
|
||||
args: {
|
||||
children: "Outline Button",
|
||||
variant: "outline",
|
||||
},
|
||||
};
|
||||
|
||||
export const OutlineWithIcon: Story = {
|
||||
args: {
|
||||
icon: true,
|
||||
children: "Outline Button",
|
||||
variant: "outline",
|
||||
},
|
||||
};
|
||||
|
||||
export const OutlineDisabled: Story = {
|
||||
args: {
|
||||
children: "Outline Button",
|
||||
variant: "outline",
|
||||
isDisabled: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const Ghost: Story = {
|
||||
args: {
|
||||
children: "Ghost Button",
|
||||
variant: "ghost",
|
||||
},
|
||||
};
|
||||
|
||||
export const GhostDisabled: Story = {
|
||||
args: {
|
||||
children: "Ghost Button",
|
||||
variant: "ghost",
|
||||
isDisabled: true,
|
||||
},
|
||||
};
|
||||
|
||||
export const Link: Story = {
|
||||
args: {
|
||||
children: "Link Button",
|
||||
variant: "link",
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,54 @@
|
||||
import { PlayIcon } from "lucide-react";
|
||||
import { Button } from "../ui/button";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva("inline-flex items-center justify-center", {
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-zinc-700 text-white hover:bg-zinc-800 disabled:bg-zinc-300 border-none",
|
||||
secondary:
|
||||
"bg-zinc-200 text-zinc-800 hover:bg-zinc-300 disabled:bg-zinc-50 disabled:text-zinc-300 border-none",
|
||||
destructive:
|
||||
"bg-red-500 text-white hover:bg-red-600 disabled:bg-zinc-300 disabled:text-white border-none",
|
||||
outline:
|
||||
"bg-white text-zinc-800 hover:bg-zinc-100 border border-zinc-700 disabled:bg-white disabled:border-zinc-300 disabled:text-zinc-300",
|
||||
ghost:
|
||||
"bg-transparent text-zinc-800 hover:bg-zinc-100 disabled:text-zinc-300 border-none",
|
||||
link: "bg-transparent text-zinc-800 hover:underline border-none hover:bg-transparent",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
},
|
||||
});
|
||||
|
||||
interface AutogptButtonProps extends VariantProps<typeof buttonVariants> {
|
||||
icon?: boolean;
|
||||
children: React.ReactNode;
|
||||
isDisabled?: boolean;
|
||||
}
|
||||
|
||||
const AutogptButton = ({
|
||||
icon = false,
|
||||
children,
|
||||
variant,
|
||||
isDisabled = false,
|
||||
}: AutogptButtonProps) => {
|
||||
return (
|
||||
<Button
|
||||
className={cn(
|
||||
"h-12 space-x-1.5 rounded-[3rem] px-4 py-3 shadow-none",
|
||||
buttonVariants({ variant }),
|
||||
isDisabled && "bg-red-500",
|
||||
)}
|
||||
disabled={isDisabled}
|
||||
>
|
||||
{icon && <PlayIcon className="h-5 w-5" />}
|
||||
<p className="font-sans text-sm font-medium">{children}</p>
|
||||
</Button>
|
||||
);
|
||||
};
|
||||
|
||||
export default AutogptButton;
|
||||
@@ -27,21 +27,18 @@ export const FeaturedAgentCard: React.FC<FeaturedStoreCardProps> = ({
|
||||
data-testid="featured-store-card"
|
||||
onMouseEnter={() => setIsHovered(true)}
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
className={`flex h-[47rem] w-full min-w-96 max-w-[27.5rem] flex-col md:w-[24rem] lg:w-[27.5rem] ${backgroundColor} rounded-[1.5rem] border-none px-5 pb-5 pt-7 transition-colors duration-200`}
|
||||
className={`flex h-[30rem] w-full max-w-[27.5rem] flex-col hover:cursor-pointer md:w-[24rem] lg:w-[27.5rem] ${backgroundColor} rounded-[1.5rem] border-none px-5 pb-5 pt-6 transition-colors duration-200`}
|
||||
>
|
||||
<CardHeader className="mb-7 min-h-48 space-y-3 p-0">
|
||||
<CardTitle className="line-clamp-3 font-poppins text-4xl font-medium text-neutral-900">
|
||||
<CardHeader className="mb-7 h-[9.5rem] space-y-3 p-0">
|
||||
<CardTitle className="line-clamp-3 font-poppins text-3xl font-medium text-zinc-800">
|
||||
{agent.agent_name}
|
||||
</CardTitle>
|
||||
<CardDescription className="line-clamp-2 font-sans text-xl font-normal text-neutral-800">
|
||||
{agent.sub_heading}
|
||||
<CardDescription className="line-clamp-1 font-sans text-lg font-normal text-zinc-800">
|
||||
By {agent.creator}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="mb-4 flex flex-1 flex-col gap-4 p-0">
|
||||
<p className="line-clamp-1 font-sans text-xl text-neutral-800">
|
||||
By {agent.creator}
|
||||
</p>
|
||||
<div className="relative flex-1 overflow-hidden rounded-xl">
|
||||
<Image
|
||||
src={agent.agent_image || "/default_agent_image.jpg"}
|
||||
@@ -55,9 +52,9 @@ export const FeaturedAgentCard: React.FC<FeaturedStoreCardProps> = ({
|
||||
<Image
|
||||
src={agent.creator_avatar || "/default_avatar.png"}
|
||||
alt={`${agent.creator} avatar`}
|
||||
width={74}
|
||||
height={74}
|
||||
className={`absolute bottom-3 left-3 aspect-square rounded-full transition-opacity duration-200 ${
|
||||
width={50}
|
||||
height={50}
|
||||
className={`absolute bottom-3 left-3 aspect-square rounded-full border border-zinc-200 transition-opacity duration-200 ${
|
||||
isHovered ? "opacity-0" : "opacity-100"
|
||||
}`}
|
||||
/>
|
||||
@@ -68,18 +65,18 @@ export const FeaturedAgentCard: React.FC<FeaturedStoreCardProps> = ({
|
||||
>
|
||||
<CardDescription
|
||||
data-testid="agent-description"
|
||||
className="line-clamp-6 font-sans text-base text-neutral-800"
|
||||
className="line-clamp-6 font-sans text-sm text-neutral-800"
|
||||
>
|
||||
{agent.description}
|
||||
</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex min-h-7 items-center justify-between p-0">
|
||||
<div className="font-sans text-lg font-semibold text-neutral-800">
|
||||
<CardFooter className="flex min-h-7 flex-col items-start justify-between p-0 sm:flex-row sm:items-center">
|
||||
<div className="font-sans text-base font-medium text-zinc-800">
|
||||
{agent.runs?.toLocaleString() ?? "0"} runs
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5 font-sans text-lg font-semibold text-neutral-800">
|
||||
<div className="flex items-center gap-1.5 font-sans text-base font-medium text-zinc-800">
|
||||
<p>{agent.rating.toFixed(1) ?? "0.0"}</p>
|
||||
{StarRatingIcons(agent.rating)}
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,7 @@ import { FeaturedAgentCard } from "./FeaturedAgentCard";
|
||||
import { userEvent, within, expect } from "@storybook/test";
|
||||
|
||||
const meta = {
|
||||
title: "AGPT UI/Featured Store Card",
|
||||
title: "new/Featured Store Card",
|
||||
component: FeaturedAgentCard,
|
||||
parameters: {
|
||||
layout: {
|
||||
|
||||
@@ -30,7 +30,7 @@ const mockCreditData = {
|
||||
// });
|
||||
|
||||
const meta = {
|
||||
title: "AGPT UI/Navbar",
|
||||
title: "new/Navbar",
|
||||
component: Navbar,
|
||||
decorators: [
|
||||
(Story) => (
|
||||
|
||||
@@ -10,9 +10,8 @@ import { NavbarLink } from "./NavbarLink";
|
||||
import getServerUser from "@/lib/supabase/getServerUser";
|
||||
import BackendAPI from "@/lib/autogpt-server-api";
|
||||
import MockClient from "@/lib/autogpt-server-api/mock_client";
|
||||
|
||||
// Disable theme toggle for now
|
||||
// import { ThemeToggle } from "./ThemeToggle";
|
||||
import Image from "next/image";
|
||||
import AutogptButton from "./AutogptButton";
|
||||
|
||||
interface NavLink {
|
||||
name: string;
|
||||
@@ -49,19 +48,28 @@ export const Navbar = async ({ links, menuItemGroups }: NavbarProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="sticky top-0 z-40 hidden h-16 w-full items-center justify-between rounded-bl-2xl rounded-br-2xl border border-white/50 bg-white/5 py-3 pl-6 pr-3 backdrop-blur-[26px] dark:border-gray-700 dark:bg-gray-900 md:inline-flex">
|
||||
<div className="flex items-center gap-11">
|
||||
<div className="relative h-10 w-20">
|
||||
<IconAutoGPTLogo className="h-full w-full" />
|
||||
</div>
|
||||
<nav className="md:justify-center-center sticky top-0 z-40 hidden h-16 w-full border-b border-zinc-50 bg-neutral-50/20 px-4 backdrop-blur-[26px] md:flex md:items-center">
|
||||
{/* Nav Links */}
|
||||
<div className="flex flex-1 items-center gap-5">
|
||||
{links.map((link) => (
|
||||
<NavbarLink key={link.name} name={link.name} href={link.href} />
|
||||
))}
|
||||
</div>
|
||||
{/* Profile section */}
|
||||
<div className="flex items-center gap-4">
|
||||
|
||||
{/* Icon */}
|
||||
<Link href="/" className="flex items-center">
|
||||
<Image
|
||||
src="/agpt-logo.svg"
|
||||
alt="AutoGPT Logo"
|
||||
width={90}
|
||||
height={40}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Popouts */}
|
||||
<div className="flex flex-1 items-center justify-end gap-3">
|
||||
{isLoggedIn ? (
|
||||
<div className="flex items-center gap-4">
|
||||
<>
|
||||
{profile && <Wallet />}
|
||||
<ProfilePopoutMenu
|
||||
menuItemGroups={menuItemGroups}
|
||||
@@ -69,21 +77,15 @@ export const Navbar = async ({ links, menuItemGroups }: NavbarProps) => {
|
||||
userEmail={profile?.name}
|
||||
avatarSrc={profile?.avatar_url}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<Link href="/login">
|
||||
<Button
|
||||
size="sm"
|
||||
className="flex items-center justify-end space-x-2"
|
||||
>
|
||||
<IconLogIn className="h-5 h-[48px] w-5" />
|
||||
<span>Log In</span>
|
||||
</Button>
|
||||
<AutogptButton variant={"default"}>Login</AutogptButton>
|
||||
</Link>
|
||||
)}
|
||||
{/* <ThemeToggle /> */}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Mobile Navbar - Adjust positioning */}
|
||||
<>
|
||||
{isLoggedIn ? (
|
||||
|
||||
@@ -1,60 +1,50 @@
|
||||
"use client";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
import {
|
||||
IconShoppingCart,
|
||||
IconBoxes,
|
||||
IconLibrary,
|
||||
IconLaptop,
|
||||
} from "@/components/ui/icons";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
interface NavbarLinkProps {
|
||||
name: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
const icons = {
|
||||
"/marketplace": IconShoppingCart,
|
||||
"/build": IconBoxes,
|
||||
"/monitor": IconLaptop,
|
||||
"/home": IconLibrary,
|
||||
};
|
||||
|
||||
export const NavbarLink = ({ name, href }: NavbarLinkProps) => {
|
||||
const pathname = usePathname();
|
||||
const parts = pathname.split("/");
|
||||
const activeLink = "/" + (parts.length > 2 ? parts[2] : parts[1]);
|
||||
const isActive = pathname === href;
|
||||
|
||||
const Icon = icons[href as keyof typeof icons];
|
||||
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
data-testid={`navbar-link-${name.toLowerCase()}`}
|
||||
className="font-poppins text-[20px] leading-[28px]"
|
||||
>
|
||||
<Link href={href} data-testid={`navbar-link-${name.toLowerCase()}`}>
|
||||
<div
|
||||
className={`h-[48px] px-5 py-4 ${
|
||||
activeLink === href
|
||||
? "rounded-2xl bg-neutral-800 dark:bg-neutral-200"
|
||||
: ""
|
||||
} flex items-center justify-start gap-3`}
|
||||
className={`flex h-10 items-center justify-start gap-2 px-3 py-2 ${
|
||||
isActive ? "rounded-lg bg-zinc-800 dark:bg-neutral-200" : ""
|
||||
}`}
|
||||
>
|
||||
{href === "/marketplace" && (
|
||||
<IconShoppingCart
|
||||
className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
|
||||
/>
|
||||
)}
|
||||
{href === "/build" && (
|
||||
<IconBoxes
|
||||
className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
|
||||
/>
|
||||
)}
|
||||
{href === "/monitor" && (
|
||||
<IconLaptop
|
||||
className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
|
||||
/>
|
||||
)}
|
||||
{href === "/library" && (
|
||||
<IconLibrary
|
||||
className={`h-6 w-6 ${activeLink === href ? "text-white dark:text-black" : ""}`}
|
||||
{Icon && (
|
||||
<Icon
|
||||
className={`h-5 w-5 ${
|
||||
isActive ? "text-zinc-50 dark:text-black" : ""
|
||||
}`}
|
||||
/>
|
||||
)}
|
||||
<div
|
||||
className={`hidden font-poppins text-[20px] font-medium leading-[28px] lg:block ${
|
||||
activeLink === href
|
||||
? "text-neutral-50 dark:text-neutral-900"
|
||||
className={`hidden font-poppins text-base font-medium lg:block ${
|
||||
isActive
|
||||
? "text-zinc-50 dark:text-neutral-900"
|
||||
: "text-neutral-900 dark:text-neutral-50"
|
||||
}`}
|
||||
>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import * as React from "react";
|
||||
import { IconClose } from "../ui/icons";
|
||||
import Image from "next/image";
|
||||
import { Button } from "../agptui/Button";
|
||||
import { Button } from "./Button";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
interface PublishAgentAwaitingReviewProps {
|
||||
|
||||
Reference in New Issue
Block a user