diff --git a/src/app/(main)/explore/_components/agent-card.tsx b/src/app/(main)/explore/_components/agent-card.tsx index 3af99dc..c4be8de 100644 --- a/src/app/(main)/explore/_components/agent-card.tsx +++ b/src/app/(main)/explore/_components/agent-card.tsx @@ -3,6 +3,8 @@ import React from "react"; import Link from "next/link"; import Image from "next/image"; +import { motion } from "framer-motion"; + import { Play } from "lucide-react"; import { formatDate } from "@/lib/utils"; @@ -12,7 +14,9 @@ import { Tables } from "@/utils/supabase/database.types"; import { Badge } from "@/components/ui/badge"; import { buttonVariants } from "@/components/ui/button"; -type AgentCardProps = { data: Tables<"agents"> }; +const ease = [0.16, 1, 0.3, 1]; + +type AgentCardProps = { data: Tables<"agents">; idx: number }; export default function AgentCard(props: AgentCardProps) { const { @@ -27,7 +31,16 @@ export default function AgentCard(props: AgentCardProps) { } = props.data; return ( -
  • +
    Try it -
    • + ); } diff --git a/src/app/(main)/explore/_components/agent-list.tsx b/src/app/(main)/explore/_components/agent-list.tsx index 5a4a7ee..f2e1c45 100644 --- a/src/app/(main)/explore/_components/agent-list.tsx +++ b/src/app/(main)/explore/_components/agent-list.tsx @@ -5,6 +5,8 @@ import Link from "next/link"; import { parseAsInteger, useQueryState } from "nuqs"; +import { motion } from "framer-motion"; + import { useQuery } from "@tanstack/react-query"; import { BadgePlus, ChevronLeft, ChevronRight, Search } from "lucide-react"; @@ -26,6 +28,7 @@ import AgentCard from "./agent-card"; import AgentCardSkeleton from "./agent-card-skeleton"; const DATA_DISPLAY = 6; +const ease = [0.16, 1, 0.3, 1]; export function AgentList() { const [searchFilter, setSearchFilter] = useQueryState("search", { @@ -74,7 +77,20 @@ export function AgentList() { return ( <> -
    + + Agents + +
    Create new Agent -
    +     {agentsData && agentsData.data.length === 0 && (
    @@ -116,18 +132,27 @@ export function AgentList() {

    No data found

    )} - + + ) : ( + + )} {agentsData ? ( diff --git a/src/app/(main)/explore/page.tsx b/src/app/(main)/explore/page.tsx index c664b8a..8c68dfa 100644 --- a/src/app/(main)/explore/page.tsx +++ b/src/app/(main)/explore/page.tsx @@ -5,9 +5,6 @@ export default function Explore() { return (
    -

    - Agents -

    diff --git a/src/components/drawer.tsx b/src/components/drawer.tsx index bb6bc71..0cc3757 100644 --- a/src/components/drawer.tsx +++ b/src/components/drawer.tsx @@ -10,16 +10,104 @@ import { import { siteConfig } from "@/lib/config"; import { cn } from "@/lib/utils"; import { LoginModalOptions } from "@privy-io/react-auth"; +import Image from "next/image"; import Link from "next/link"; +import { usePathname } from "next/navigation"; +import React from "react"; import { IoMenuSharp } from "react-icons/io5"; -export default function drawerDemo({ +const headerLinks = [ + // { + // trigger: "Features", + // content: { + // main: { + // icon: , + // title: "AI-Powered Automation", + // description: "Streamline your workflow with intelligent automation.", + // href: "#", + // }, + // items: [ + // { + // href: "#", + // title: "Task Automation", + // description: "Automate repetitive tasks and save time.", + // }, + // { + // href: "#", + // title: "Workflow Optimization", + // description: "Optimize your processes with AI-driven insights.", + // }, + // { + // href: "#", + // title: "Intelligent Scheduling", + // description: "AI-powered scheduling for maximum efficiency.", + // }, + // ], + // }, + // }, + // { + // trigger: "Solutions", + // content: { + // items: [ + // { + // title: "For Small Businesses", + // href: "#", + // description: "Tailored automation solutions for growing companies.", + // }, + // { + // title: "Enterprise", + // href: "#", + // description: "Scalable AI automation for large organizations.", + // }, + // { + // title: "Developers", + // href: "#", + // description: "API access and integration tools for developers.", + // }, + // { + // title: "Healthcare", + // href: "#", + // description: "Specialized automation for healthcare workflows.", + // }, + // { + // title: "Finance", + // href: "#", + // description: "AI-driven process automation for financial services.", + // }, + // { + // title: "Education", + // href: "#", + // description: + // "Streamline administrative tasks in educational institutions.", + // }, + // ], + // }, + // }, + { + href: "/explore", + label: "Agents", + }, + { + href: "/faq", + label: "FAQ", + }, + { + href: "/docs", + label: "Docs", + }, +]; + +export default function DrawerDemo({ login, }: { login: (options?: LoginModalOptions | React.MouseEvent) => void; }) { + const pathName = usePathname(); + + const [open, setOpen] = React.useState(false); + return ( - + setOpen(val)}> @@ -29,23 +117,32 @@ export default function drawerDemo({ - + logo {siteConfig.name}