From f70b6993bcc37ff8a6eb00fb4f246e47e1265bb9 Mon Sep 17 00:00:00 2001
From: GauthierWebDev <gauthier@gauthierdaniels.fr>
Date: Fri, 18 Apr 2025 11:54:45 +0200
Subject: [PATCH] style: Add React imports to component files

---
 app/components/common/Iframe.tsx     | 1 +
 app/components/common/Image.tsx      | 2 ++
 app/components/common/Link.tsx       | 3 ++-
 app/components/md/Tabs.tsx           | 2 +-
 app/components/syntax/CSRSnippet.tsx | 4 ++--
 app/components/syntax/Callout.tsx    | 6 ++++--
 app/components/syntax/DocsLayout.tsx | 2 +-
 7 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/app/components/common/Iframe.tsx b/app/components/common/Iframe.tsx
index 7a6de69..4682821 100644
--- a/app/components/common/Iframe.tsx
+++ b/app/components/common/Iframe.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import clsx from "clsx";
 
 type IframeProps = {
diff --git a/app/components/common/Image.tsx b/app/components/common/Image.tsx
index bb8a7a3..01c424b 100644
--- a/app/components/common/Image.tsx
+++ b/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" />;
 }
diff --git a/app/components/common/Link.tsx b/app/components/common/Link.tsx
index a9c00ea..0221c40 100644
--- a/app/components/common/Link.tsx
+++ b/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"));
diff --git a/app/components/md/Tabs.tsx b/app/components/md/Tabs.tsx
index 84a23f6..4eed3b1 100644
--- a/app/components/md/Tabs.tsx
+++ b/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";
 
diff --git a/app/components/syntax/CSRSnippet.tsx b/app/components/syntax/CSRSnippet.tsx
index bd388dd..2361fe8 100644
--- a/app/components/syntax/CSRSnippet.tsx
+++ b/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"
diff --git a/app/components/syntax/Callout.tsx b/app/components/syntax/Callout.tsx
index 4084dac..d3b8a69 100644
--- a/app/components/syntax/Callout.tsx
+++ b/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>
diff --git a/app/components/syntax/DocsLayout.tsx b/app/components/syntax/DocsLayout.tsx
index b0bf80a..7cb4bbb 100644
--- a/app/components/syntax/DocsLayout.tsx
+++ b/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 (
     <>