style: Add React imports to component files

app/components/common/Iframe.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import clsx from "clsx";
 
 type IframeProps = {

app/components/common/Image.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 export function Image(props: { src: string; alt: string } & React.ComponentPropsWithoutRef<"img">) {
   return <img {...props} src={props.src} alt={props.alt} loading="lazy" />;
 }

app/components/common/Link.tsx

@@ -1,8 +1,9 @@
 import { usePageContext } from "vike-react/usePageContext";
 import { prefetch } from "vike/client/router";
+import React from "react";
 import clsx from "clsx";
 
-export function Link(props: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string }) {
+export function Link(props: React.AnchorHTMLAttributes<HTMLAnchorElement> & { href: string; className?: string }) {
   const { urlPathname } = usePageContext();
   const isActive = props.href === "/" ? urlPathname === props.href : urlPathname.startsWith(props.href);
   const isSameDomain = !(props.href.startsWith("http") || props.href.startsWith("mailto"));

app/components/md/Tabs.tsx

@@ -1,6 +1,6 @@
 import type { Dispatch, SetStateAction } from "react";
 
-import { createContext, useContext, useEffect, useState } from "react";
+import React, { createContext, useContext, useEffect, useState } from "react";
 import { Button } from "@syntax/Button";
 import clsx from "clsx";
 

app/components/syntax/CSRSnippet.tsx

@@ -40,7 +40,7 @@ export default function CSRSnippet({
                 {label}
               </div>
             )}
-            <pre className={clsx(className, { "pt-11": !!label })} style={style}>
+            <pre className={clsx(className, { "pt-11": label })} style={style}>
               <code>
                 {tokens.map((line, lineIndex) => (
                   <Fragment key={lineIndex}>
@@ -69,7 +69,7 @@ export default function CSRSnippet({
       <Button
         className={clsx(
           "absolute right-2 w-8 h-8 aspect-square opacity-0 group-hover:opacity-50 hover:opacity-100 transition-opacity",
-          !!label ? "top-10" : "top-2",
+          label ? "top-10" : "top-2",
         )}
         size="sm"
         variant="secondary"

app/components/syntax/Callout.tsx

@@ -37,10 +37,12 @@ export function Callout({
   type?: keyof typeof styles;
   collapsible?: boolean;
 }) {
-  let IconComponent = icons[type];
+  const IconComponent = icons[type];
 
   return (
-    <div className={clsx("my-8 flex flex-col rounded-3xl p-6", styles[type].container)}>
+    <div
+      className={clsx("my-8 flex flex-col rounded-3xl p-6", styles[type].container, { "cursor-pointer": collapsible })}
+    >
       <div className="flex items-center gap-6">
         <IconComponent className="h-8 w-8 flex-none" />
         <p className={clsx("!m-0 font-display text-xl text-balance", styles[type].title)}>{title}</p>

app/components/syntax/DocsLayout.tsx

@@ -18,7 +18,7 @@ export function DocsLayout({
   estimatedReadingTime?: string;
   nodes: Array<Node>;
 }) {
-  let tableOfContents = collectSections(nodes);
+  const tableOfContents = collectSections(nodes);
 
   return (
     <>