fix lint

Author: alissacrane-cb

apps/web/app/(base-org)/developers/agentkit/page.tsx

@@ -12,7 +12,7 @@ import { OnchainActions } from 'apps/web/src/components/Developers/AgentKit/Onch
 import { Possibilities } from 'apps/web/src/components/Developers/AgentKit/Possibilities';
 import { Testmonials } from 'apps/web/src/components/Developers/AgentKit/Testimonials';
 import { CtaBanner } from 'apps/web/src/components/Developers/Shared/CtaBanner';
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 
 export default async function AgentKit() {
   return (
@@ -21,7 +21,13 @@ export default async function AgentKit() {
         {/* Header  */}
         <div className="flex flex-col items-center gap-1 pt-20">
           <div className="flex items-center gap-2 pb-6">
-            <Image src={agentkit} alt="agentkit" width={32} height={32} className="h-5 w-5" />
+            <Image
+              src={agentkit as StaticImageData}
+              alt="agentkit"
+              width={32}
+              height={32}
+              className="h-5 w-5"
+            />
             <Title level={TitleLevel.Title3} className="text-[#E66020]">
               AgentKit
             </Title>

apps/web/src/components/Developers/AgentKit/Demo.tsx

@@ -50,7 +50,7 @@ const MESSAGES: Item[] = [
 
 const MESSAGE_ARRAY = Array.from({ length: 10 }, () => MESSAGES).flat();
 
-const Message = ({ text, content, type }: Item) => {
+function Message({ text, content, type }: Item) {
   const isAgent = type === 'agent';
   return (
     <figure
@@ -75,7 +75,7 @@ const Message = ({ text, content, type }: Item) => {
       </div>
     </figure>
   );
-};
+}
 
 export function Demo() {
   return (
@@ -91,8 +91,8 @@ export function Demo() {
         className={cn('relative flex h-[500px] w-full flex-col overflow-hidden rounded-lg p-6 ')}
       >
         <AnimatedList>
-          {MESSAGE_ARRAY.map((item, idx) => (
-            <Message {...item} key={idx} />
+          {MESSAGE_ARRAY.map((item) => (
+            <Message {...item} key={item.text} />
           ))}
         </AnimatedList>
       </div>

apps/web/src/components/Developers/AgentKit/Frameworks.tsx

@@ -2,7 +2,7 @@ import framework from 'apps/web/src/components/Developers/AgentKit/framework.svg
 import eliza from 'apps/web/src/components/Developers/AgentKit/eliza.svg';
 import robot from 'apps/web/src/components/Developers/AgentKit/robot.svg';
 import cImage from 'apps/web/src/components/Developers/AgentKit/c.png';
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 import Title from 'apps/web/src/components/base-org/typography/Title';
 import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/types';
 
@@ -19,16 +19,16 @@ export function Frameworks() {
       </div>
       <div className="flex w-full gap-6">
         <div className="flex-0 flex aspect-square h-40 w-40 items-center justify-center rounded-xl bg-dark-palette-backgroundAlternate">
-          <Image src={framework} alt="framework" width={106} height={54} />
+          <Image src={framework as StaticImageData} alt="framework" width={106} height={54} />
         </div>
         <div className="flex-0 flex aspect-square h-40 w-40 items-center justify-center rounded-xl bg-dark-palette-backgroundAlternate">
-          <Image src={eliza} alt="eliza" width={128} height={22} />
+          <Image src={eliza as StaticImageData} alt="eliza" width={128} height={22} />
         </div>
         <div className="flex flex-1 items-center justify-center rounded-xl bg-[#330D00]">
-          <Image src={robot} alt="robot" width={127} height={126} />
+          <Image src={robot as StaticImageData} alt="robot" width={127} height={126} />
         </div>
         <div className="flex-0 flex aspect-square h-40 w-40 items-center justify-center rounded-xl bg-dark-palette-backgroundAlternate">
-          <Image src={cImage} alt="cImage" width={70} height={70} />
+          <Image src={cImage as StaticImageData} alt="cImage" width={70} height={70} />
         </div>
         <div className="flex-0 flex aspect-square h-40 w-40 items-center justify-center rounded-xl bg-dark-palette-backgroundAlternate">
           <Title level={TitleLevel.Title1} className="text-palette-foregroundMuted">

apps/web/src/components/Developers/AgentKit/InfoCards.tsx

@@ -1,10 +1,10 @@
-import { Card } from 'apps/web/src/components/Developers/Shared/Card';
+import { Card, CardProps } from 'apps/web/src/components/Developers/Shared/Card';
 import dropsActive from 'apps/web/src/components/Developers/AgentKit/dropsActive.svg';
 import blockchain from 'apps/web/src/components/Developers/AgentKit/blockchain.svg';
 import metaverse from 'apps/web/src/components/Developers/AgentKit/metaverse.svg';
 import Image from 'next/image';
 
-const INFO_CARDS = [
+const INFO_CARDS: CardProps[] = [
   {
     icon: <Image src={dropsActive} alt="dropsActive" width={32} height={32} className="h-8 w-8" />,
     title: 'No coding required',

apps/web/src/components/Developers/AgentKit/OnchainActions.tsx

@@ -5,11 +5,11 @@ import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/ty
 import { AnimatedList } from 'apps/web/src/components/Developers/Shared/AnimatedList';
 import { cn } from 'base-ui/utils/cn';
 
-type Action = {
+type ActionItem = {
   title: string;
 };
 
-const ACTIONS: Action[] = [
+const ACTIONS: ActionItem[] = [
   {
     title: 'Deploy an NFT',
   },
@@ -24,7 +24,7 @@ const ACTIONS: Action[] = [
   },
 ];
 
-const Action = ({ title }: Action) => {
+function Action({ title }: ActionItem) {
   return (
     <figure
       className={cn(
@@ -41,13 +41,15 @@ const Action = ({ title }: Action) => {
       </div>
     </figure>
   );
-};
+}
 
 export function OnchainActions({ className }: { className?: string }) {
   return (
     <div className="flex  w-full flex-col">
       <div className="p-4">
-        <Title level={TitleLevel.Title1}>All onchain actions at your agent's fingertips.</Title>
+        <Title level={TitleLevel.Title1}>
+          All onchain actions at your agent&apos;s fingertips.
+        </Title>
       </div>
       <div
         className={cn('bg-background relative flex w-full flex-col overflow-hidden p-4', className)}

apps/web/src/components/Developers/AgentKit/Possibilities.tsx

@@ -1,8 +1,8 @@
 import Title from 'apps/web/src/components/base-org/typography/Title';
 import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/types';
-import { Card } from 'apps/web/src/components/Developers/Shared/Card';
+import { Card, CardProps } from 'apps/web/src/components/Developers/Shared/Card';
 
-const POSSIBILITIES = [
+const POSSIBILITIES: CardProps[] = [
   {
     title: 'Onchain Assistants',
     description:
@@ -45,7 +45,12 @@ export function Possibilities() {
       <div className="grid grid-cols-3 gap-20">
         {POSSIBILITIES.map((pos) => {
           return (
-            <Card className="text-[#E66020]" title={pos.title} description={pos.description} />
+            <Card
+              key={pos.title}
+              className="text-[#E66020]"
+              title={pos.title}
+              description={pos.description}
+            />
           );
         })}
       </div>

apps/web/src/components/Developers/AgentKit/ValueProps.tsx

@@ -1,9 +1,9 @@
-import { ValueProp } from 'apps/web/src/components/Developers/Shared/ValueProp';
+import { ValueProp, ValuePropProps } from 'apps/web/src/components/Developers/Shared/ValueProp';
 import coinbase from 'apps/web/src/components/Developers/Verifications/coinbase.svg';
 import globe from 'apps/web/src/components/Developers/Verifications/globe.svg';
 import coinbaseOne from 'apps/web/src/components/Developers/Verifications/coinbaseOne.svg';
 
-const VALUE_PROPS = [
+const VALUE_PROPS: ValuePropProps[] = [
   {
     title: 'Verified Account',
     description: 'A Coinbase user with a valid Coinbase trading account. ',

apps/web/src/components/Developers/Shared/AnimatedList.tsx

@@ -18,10 +18,10 @@ export function AnimatedListItem({ children }: { children: React.ReactNode }) {
   );
 }
 
-export interface AnimatedListProps extends ComponentPropsWithoutRef<'div'> {
+export type AnimatedListProps = ComponentPropsWithoutRef<'div'> & {
   children: React.ReactNode;
   delay?: number;
-}
+};
 
 export const AnimatedList = React.memo(
   ({ children, className, delay = 1000, ...props }: AnimatedListProps) => {

apps/web/src/components/Developers/Shared/Card.tsx

@@ -2,7 +2,7 @@ import Title from 'apps/web/src/components/base-org/typography/Title';
 import { TitleLevel } from 'apps/web/src/components/base-org/typography/Title/types';
 import { ReactNode } from 'react';
 
-type CardProps = {
+export type CardProps = {
   icon?: ReactNode;
   title: string;
   description: string;

apps/web/src/components/Developers/Shared/Marquee.tsx

@@ -1,7 +1,7 @@
 import { cn } from 'base-ui/utils/cn';
 import { ComponentPropsWithoutRef } from 'react';
 
-interface MarqueeProps extends ComponentPropsWithoutRef<'div'> {
+export type MarqueeProps = ComponentPropsWithoutRef<'div'> & {
   /**
    * Optional CSS class name to apply custom styles
    */
@@ -30,7 +30,7 @@ interface MarqueeProps extends ComponentPropsWithoutRef<'div'> {
    * @default 4
    */
   repeat?: number;
-}
+};
 
 export function Marquee({
   className,
@@ -55,9 +55,9 @@ export function Marquee({
     >
       {Array(repeat)
         .fill(0)
-        .map((_, i) => (
+        .map((item, i) => (
           <div
-            key={i}
+            key={item?.toString()}
             className={cn('flex shrink-0 justify-around [gap:var(--gap)]', {
               'animate-marquee flex-row': !vertical,
               'animate-marquee-vertical flex-col': vertical,