chore: docs comp cleanup (#2082)

* remove unused docs top navigation

* remove unused typography components

* remove unused card components

* remove unused ConnectWalletButton components

* added typed return for lint

* fix lint

* fix some lints

* fix lints

* remove unused components

* fix lints and build warnings

Author: brendan-defi

apps/base-docs/docs/components/App.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import { OnchainKitProvider } from '@coinbase/onchainkit';
 import '@coinbase/onchainkit/styles.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -8,6 +9,7 @@ import { base, baseSepolia } from 'wagmi/chains';
 import { coinbaseWallet } from 'wagmi/connectors';
 import { useTheme } from '../contexts/Theme.tsx';
 import { defineChain } from 'viem';
+
 const queryClient = new QueryClient();
 
 export const SANDBOX_CHAIN = defineChain({
@@ -65,9 +67,7 @@ export default function App({ children }: { children: ReactNode }) {
             },
           }}
         >
-          <div style={{ display: 'flex', flexDirection: 'column' }}>
-            {children}
-          </div>
+          <div style={{ display: 'flex', flexDirection: 'column' }}>{children}</div>
         </OnchainKitProvider>
       </QueryClientProvider>
     </WagmiProvider>

apps/base-docs/docs/components/BrowseCard.tsx

@@ -1,27 +1,25 @@
-interface BrowseCardProps {
+type BrowseCardProps = {
   title: string;
   description: string;
   icon: React.ReactNode;
   href?: string;
-}
+};
 
 export function BrowseCard({ title, description, icon, href }: BrowseCardProps) {
   const CardWrapper = href ? 'a' : 'div';
-  
+
   return (
-    <CardWrapper 
+    <CardWrapper
       href={href}
-      className="block h-full p-6 rounded-lg bg-zinc-100 dark:bg-zinc-900 hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors"
+      className="block h-full rounded-lg bg-zinc-100 p-6 transition-colors hover:bg-zinc-200 dark:bg-zinc-900 dark:hover:bg-zinc-800"
     >
       <div className="flex flex-col gap-4">
-        <div className="h-12 w-12 text-blue-500">
-          {icon}
-        </div>
+        <div className="h-12 w-12 text-blue-500">{icon}</div>
         <div>
-          <h3 className="text-lg font-semibold text-white mb-1 my-4">{title}</h3>
+          <h3 className="my-4 mb-1 text-lg font-semibold text-white">{title}</h3>
           <p className="text-zinc-400">{description}</p>
         </div>
       </div>
     </CardWrapper>
   );
-} 
+}

apps/base-docs/docs/components/BrowseUseCaseCard.tsx

@@ -1,27 +1,22 @@
-interface BrowseUseCaseCardProps {
+type BrowseUseCaseCardProps = {
   title: string;
   description: string;
   icon: React.ReactNode;
   href?: string;
-}
+};
 
 export function BrowseUseCaseCard({ title, description, icon, href }: BrowseUseCaseCardProps) {
   const CardWrapper = href ? 'a' : 'div';
 
   return (
-    <CardWrapper
-      href={href}
-      className="block h-[420px]"
-    >
-      <div className="flex flex-col h-full">
-        <div className="h-[280px] w-full flex items-center dark:bg-zinc-900 justify-center mb-4 rounded-lg">
-          <div className="w-[60%] mx-auto flex items-center justify-center">
-            {icon}
-          </div>
+    <CardWrapper href={href} className="block h-[420px]">
+      <div className="flex h-full flex-col">
+        <div className="mb-4 flex h-[280px] w-full items-center justify-center rounded-lg dark:bg-zinc-900">
+          <div className="mx-auto flex w-[60%] items-center justify-center">{icon}</div>
         </div>
 
-        <div className="flex flex-col flex-1">
-          <h3 className="text-lg font-bold text-white mb-1">{title}</h3>
+        <div className="flex flex-1 flex-col">
+          <h3 className="mb-1 text-lg font-bold text-white">{title}</h3>
           <p className="text-zinc-400">{description}</p>
         </div>
       </div>

apps/base-docs/docs/components/Button/index.tsx

@@ -2,8 +2,8 @@
 
 import { ButtonHTMLAttributes } from 'react';
 import classNames from 'classnames';
-import { ButtonVariants, ButtonSizes } from 'apps/web/src/components/base-org/Button/types';
-import { Icon, IconProps } from 'apps/web/src/components/Icon/Icon';
+import { Icon, IconProps } from '../base-org/Icon/Icon.tsx';
+import { ButtonVariants, ButtonSizes } from './types.ts';
 
 export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   connectWallet?: boolean;
@@ -87,7 +87,9 @@ export default function Button({
   return (
     <button type="button" onClick={onClick} disabled={disabled} className={buttonClasses}>
       <span>{children}</span>
-      {iconName && <Icon name={iconName} width={iconSize} height={iconSize} color="currentColor" />}
+      {iconName && (
+        <Icon name={iconName as string} width={iconSize} height={iconSize} color="currentColor" />
+      )}
     </button>
   );
 }

apps/base-docs/docs/components/BuyWrapper.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import type { SwapError } from '@coinbase/onchainkit/swap';
 import type { Token } from '@coinbase/onchainkit/token';
 import { type ReactNode, useCallback } from 'react';