refactor and standardize SmallCard component

Author: ryanwaits

components/card.tsx

@@ -108,13 +108,13 @@ export function SmallCard({
     <Link
       {...props}
       className={cn(
-        "not-prose block text-sm text-card-foreground transition-colors",
+        "not-prose block text-sm text-card-foreground transition-colors space-y-3",
         props.className
       )}
     >
       <div className="group flex space-x-4 px-3 py-4 rounded-lg hover:bg-accent">
         {icon && (
-          <div className="h-fit w-fit rounded-md border bg-card group-hover:bg-background p-2 text-muted-foreground [&_svg]:size-4">
+          <div className="h-fit w-fit rounded-md border bg-card group-hover:bg-background group-hover:text-primary transition-colors duration-500 ease-in-out p-2 text-muted-foreground [&_svg]:size-4">
             {icon}
           </div>
         )}

components/ui/icon.tsx

@@ -78,27 +78,8 @@ export function Ordinals(): JSX.Element {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle
-        cx="7.58228"
-        cy="7.05255"
-        r="6.36257"
-        stroke="currentColor"
-        style={{
-          stroke: "currentColor",
-          strokeOpacity: 1,
-          strokeWidth: "1.2651",
-        }}
-      />
-      <circle
-        cx="7.53107"
-        cy="7.04505"
-        r="3.76642"
-        fill="currentColor"
-        style={{
-          fill: "currentColor",
-          fillOpacity: 1,
-        }}
-      />
+      <circle cx="7.58228" cy="7.05255" r="6.36257" stroke="currentColor" />
+      <circle cx="7.53107" cy="7.04505" r="3.76642" fill="currentColor" />
     </svg>
   );
 }

content/docs/bitcoin/get-started.mdx

@@ -48,8 +48,7 @@ import { API, Container, Chainhook, BitcoinIcon } from '@/components/ui/icon';
 
 <Cards>
   <SmallCard
-    className="group"
-    icon={<BitcoinIcon className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<BitcoinIcon />}
     href="/guides/sync-a-bitcoin-node"
     title="Sync a Bitcoin node"
     description="Set up and run a Bitcoin node to use tools like Ordhook."

content/docs/bitcoin/index.mdx

@@ -57,22 +57,19 @@ import heroImage from '@/public/bitcoin-hero.svg';
 
 <Cards>
   <SmallCard
-    className='group space-y-3'
-    icon={<Ordinals className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
-    href="/bitcoin/ordinals/ordhook"
-    title="Ordhook"
-    description="Create custom event streams for real-time data and analytics with Ordhook."
+    icon={<Ordinals />}
+    href="/bitcoin/ordinals/api"
+    title="Ordinals API"
+    description="Fetch on-chain data for Ordinals and meta-protocols with our hosted API."
   />
   <SmallCard
-    className='group space-y-3'
-    icon={<API className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<API />}
     href="/bitcoin/ordinals/api"
     title="Ordinals API"
     description="Fetch on-chain data for Ordinals and meta-protocols with our hosted API."
   />
   <SmallCard
-    className='group space-y-3'
-    icon={<Play className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Play />}
     href="/ordinals/explorer"
     title="Explorer"
     description="View on-chain data for Ordinals and meta-protocols with our explorer."
@@ -91,8 +88,7 @@ import heroImage from '@/public/bitcoin-hero.svg';
 
 <Cards>
   <SmallCard
-    className='group space-y-3'
-    icon={<API className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<API />}
     href="/bitcoin/runes/api"
     title="Runes API"
     description="Interact with the Runes protocol from your backend via our hosted API."

content/docs/bitcoin/runes/runehook/quickstart.mdx

@@ -71,7 +71,7 @@ Before starting, ensure you have `runehook` installed. If you haven't already, c
 
 <Cards className='sm:grid-cols-1'>
   <SmallCard
-    icon={<Code className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Code />}
     href="/bitcoin/runes/api"
     title="Integrate runes data into your app"
     description="Use the Runes API to get reliable data for Runes and BRC-20 tokens."

content/docs/stacks/get-started.mdx

@@ -14,32 +14,28 @@ import { SectionHeader } from '@/components/layout/section-header';
 
 <Cards>
   <SecondaryCard
-    className="group"
-    icon={<Clarinet className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Clarinet />}
     href="/stacks/clarinet/quickstart"
     title="Create your first smart contract"
     description="Build a simple counter contract using Clarinet."
     tag='Clarinet'
   />
   <SecondaryCard
-    className="group"
-    icon={<Blockchain className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Blockchain />}
     href="/stacks/clarinet-js-sdk/quickstart"
     title="Write unit tests for your smart contracts"
     description="Learn how run unit tests with Clarinet JS SDK."
     tag='Clarinet JS SDK'
   />
   <SecondaryCard
-    className="group"
-    icon={<Js className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Js />}
     href="/stacks/stacks.js/quickstart"
     title="Make a contract call with Stacks.js"
     description="Learn how to integrate smart contracts into your app."
     tag='Stacks.js'
   />
   <SecondaryCard
-    className="group"
-    icon={<Database className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Database />}
     href="/stacks/chainhook/quickstart"
     title="Stream custom blockchain events"
     description="Use Chainhook to filter & stream for contract deployments."
@@ -57,29 +53,25 @@ import { SectionHeader } from '@/components/layout/section-header';
 
 <Cards>
   <SmallCard
-    className="group"
-    icon={<Shapes className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Shapes />}
     href="/guides/build-an-nft-marketplace"
     title="Build an NFT Marketplace"
     description="Learn how to create and deploy your own NFT marketplace."
   />
   {/* <SmallCard
-    className="group"
-    icon={<DAO className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<DAO />}
     href="/stacks/clarinet"
     title="Launch a Decentralized Autonomous Organization (DAO)"
     description="Discover the steps to creating your own DAO."
   /> */}
   <SmallCard
-    className="group"
-    icon={<Ticket className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Ticket />}
     href="/guides/no-loss-lottery"
     title="Create a no-loss lottery pool"
     description="Build a no-loss lottery pool that leverages stacking yield."
   />
   <SmallCard
-    className="group"
-    icon={<Plant className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Plant />}
     href="/guides/build-a-decentralized-kickstarter"
     title="Build a decentralized Kickstarter"
     description="Learn how to create a crowdfunding app, enabling creators to fund their projects without a third party."
@@ -98,22 +90,19 @@ import { SectionHeader } from '@/components/layout/section-header';
 
 <Cards>
   <SmallCard
-    className="group"
-    icon={<BitcoinIcon className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<BitcoinIcon />}
     href="/guides/sync-a-bitcoin-node"
     title="Sync a Bitcoin node"
     description="Set up and run a Bitcoin node to run tools like Chainhook as a service."
   />
   <SmallCard
-    className="group"
-    icon={<StacksIcon className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<StacksIcon />}
     href="/guides/sync-a-stacks-node"
     title="Sync a Stacks node"
     description="Set up and run a Stacks node to use tools like Chainhook or spin up your own API."
   />
   <SmallCard
-    className="group"
-    icon={<Container className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Container />}
     href="/guides/installing-docker"
     title="Install and run Docker on your machine"
     description="Essential for running a local development with Clarinet"

content/docs/stacks/index.mdx

@@ -57,43 +57,37 @@ import heroImage from '@/public/stacks-hero.svg';
 
 <Cards>
   <SmallCard
-    className='group space-y-3'
-    icon={<Cloud className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Cloud />}
     href="/stacks/platform"
     title="Cloud-Based Development"
     description="Develop, test, and deploy smart contracts straight from your browser."
   />
   <SmallCard
-    className='group space-y-3'
-    icon={<Code className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Code />}
     href="/stacks/clarinet"
     title="Smart Contract Development"
     description="Kickstart your smart contract journey with Clarinet and the Clarinet JS SDK."
   />
   <SmallCard
-    className='group space-y-3'
-    icon={<Database className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Database />}
     href="/stacks/chainhook"
     title="Data Streaming &amp; Events"
     description="Create custom event streams for real-time data with Chainhook."
   />
   <SmallCard
-    className='group space-y-3'
-    icon={<Frontend className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Frontend />}
     href="/stacks/stacks.js"
     title="Frontend Web Development"
     description="Interact with smart contracts on the web with the Stacks.js library."
   />
   <SmallCard
-    className='group space-y-3'
-    icon={<Backend className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Backend />}
     href="/stacks/api"
     title="Backend Development"
     description="Explore our hosted APIs offering a familiar REST interface."
   />
   <SmallCard
-    className='group space-y-3'
-    icon={<Braces className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Braces />}
     href="/stacks/token-metadata-api"
     title="Token Management"
     description="Explore our hosted API for fetching token metadata on Stacks."
@@ -113,36 +107,31 @@ import heroImage from '@/public/stacks-hero.svg';
 
 <Cards>
   <SmallCard
-    className='group space-y-3'
-    icon={<Hiro className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Hiro />}
     href="/stacks/platform"
     title="Hiro Platform"
     description="A hosted developer experience for creating, testing, and deploying smart contracts."
   />
   <SmallCard
-    className='group space-y-3'
-    icon={<Clarinet className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Clarinet />}
     href="/stacks/clarinet"
     title="Clarinet"
     description="Create, test, and deploy smart contracts on the Stacks blockchain."
   />
   <SmallCard
-    className='group space-y-3'
-    icon={<API className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<API />}
     href="/stacks/api"
     title="Stacks Blockchain API"
     description="Interact with the Stacks blockchain from your backend via our hosted API."
   />
   <SmallCard
-    className='group space-y-3'
-    icon={<Js className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Js />}
     href="/stacks/stacks.js"
     title="Stacks.js"
     description="A collection of JavaScript libraries to build web applications on Stacks."
   />
   <SmallCard
-    className='group space-y-3'
-    icon={<Chainhook className='transition-colors duration-500 ease-in-out group-hover:text-primary' />}
+    icon={<Chainhook />}
     href="/stacks/chainhook"
     title="Chainhook"
     description="Create customizable, lightweight databases for on-chain events for Bitcoin and Stacks."