react-email 4.0.0-alpha.6 → 4.0.0-alpha.7

package/dist/preview/.next/types/app/layout.ts

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email.git/4.0/packages/react-email/src/app/layout.tsx
+// File: /home/gabriel/Projects/Resend/react-email/packages/react-email/src/app/layout.tsx
 import * as entry from '../../../src/app/layout.js'
 import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'
 

package/dist/preview/.next/types/app/page.ts

@@ -0,0 +1,84 @@
+// File: /home/gabriel/Projects/Resend/react-email/packages/react-email/src/app/page.tsx
+import * as entry from '../../../src/app/page.js'
+import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'
+
+type TEntry = typeof import('../../../src/app/page.js')
+
+type SegmentParams<T extends Object = any> = T extends Record<string, any>
+  ? { [K in keyof T]: T[K] extends string ? string | string[] | undefined : never }
+  : T
+
+// Check that the entry is a valid entry
+checkFields<Diff<{
+  default: Function
+  config?: {}
+  generateStaticParams?: Function
+  revalidate?: RevalidateRange<TEntry> | false
+  dynamic?: 'auto' | 'force-dynamic' | 'error' | 'force-static'
+  dynamicParams?: boolean
+  fetchCache?: 'auto' | 'force-no-store' | 'only-no-store' | 'default-no-store' | 'default-cache' | 'only-cache' | 'force-cache'
+  preferredRegion?: 'auto' | 'global' | 'home' | string | string[]
+  runtime?: 'nodejs' | 'experimental-edge' | 'edge'
+  maxDuration?: number
+  
+  metadata?: any
+  generateMetadata?: Function
+  viewport?: any
+  generateViewport?: Function
+  experimental_ppr?: boolean
+  
+}, TEntry, ''>>()
+
+
+// Check the prop type of the entry function
+checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>()
+
+// Check the arguments and return type of the generateMetadata function
+if ('generateMetadata' in entry) {
+  checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
+  checkFields<Diff<ResolvingMetadata, SecondArg<MaybeField<TEntry, 'generateMetadata'>>, 'generateMetadata'>>()
+}
+
+// Check the arguments and return type of the generateViewport function
+if ('generateViewport' in entry) {
+  checkFields<Diff<PageProps, FirstArg<MaybeField<TEntry, 'generateViewport'>>, 'generateViewport'>>()
+  checkFields<Diff<ResolvingViewport, SecondArg<MaybeField<TEntry, 'generateViewport'>>, 'generateViewport'>>()
+}
+
+// Check the arguments and return type of the generateStaticParams function
+if ('generateStaticParams' in entry) {
+  checkFields<Diff<{ params: SegmentParams }, FirstArg<MaybeField<TEntry, 'generateStaticParams'>>, 'generateStaticParams'>>()
+  checkFields<Diff<{ __tag__: 'generateStaticParams', __return_type__: any[] | Promise<any[]> }, { __tag__: 'generateStaticParams', __return_type__: ReturnType<MaybeField<TEntry, 'generateStaticParams'>> }>>()
+}
+
+export interface PageProps {
+  params?: Promise<SegmentParams>
+  searchParams?: Promise<any>
+}
+export interface LayoutProps {
+  children?: React.ReactNode
+
+  params?: Promise<SegmentParams>
+}
+
+// =============
+// Utility types
+type RevalidateRange<T> = T extends { revalidate: any } ? NonNegative<T['revalidate']> : never
+
+// If T is unknown or any, it will be an empty {} type. Otherwise, it will be the same as Omit<T, keyof Base>.
+type OmitWithTag<T, K extends keyof any, _M> = Omit<T, K>
+type Diff<Base, T extends Base, Message extends string = ''> = 0 extends (1 & T) ? {} : OmitWithTag<T, keyof Base, Message>
+
+type FirstArg<T extends Function> = T extends (...args: [infer T, any]) => any ? unknown extends T ? any : T : never
+type SecondArg<T extends Function> = T extends (...args: [any, infer T]) => any ? unknown extends T ? any : T : never
+type MaybeField<T, K extends string> = T extends { [k in K]: infer G } ? G extends Function ? G : never : never
+
+
+
+function checkFields<_ extends { [k in keyof any]: never }>() {}
+
+// https://github.com/sindresorhus/type-fest
+type Numeric = number | bigint
+type Zero = 0 | 0n
+type Negative<T extends Numeric> = T extends Zero ? never : `${T}` extends `-${string}` ? T : never
+type NonNegative<T extends Numeric> = T extends Zero ? T : Negative<T> extends never ? T : '__invalid_negative_number__'

package/dist/preview/.next/types/app/preview/[...slug]/page.ts

@@ -1,4 +1,4 @@
-// File: /home/gabriel/Projects/Resend/react-email.git/4.0/packages/react-email/src/app/preview/[...slug]/page.tsx
+// File: /home/gabriel/Projects/Resend/react-email/packages/react-email/src/app/preview/[...slug]/page.tsx
 import * as entry from '../../../../../src/app/preview/[...slug]/page.js'
 import type { ResolvingMetadata, ResolvingViewport } from 'next/dist/lib/metadata/types/metadata-interface.js'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email",
-  "version": "4.0.0-alpha.6",
+  "version": "4.0.0-alpha.7",
   "description": "A live preview of your emails right in your browser.",
   "bin": {
     "email": "./dist/cli/index.js"

package/src/actions/email-validation/check-compatibility.ts

@@ -112,7 +112,6 @@ export interface SupportEntry {
 const relevantEmailClients: EmailClient[] = [
   'gmail',
   'apple-mail',
-  'hey',
   'outlook',
   'yahoo',
 ];

package/src/actions/email-validation/check-images.spec.tsx

@@ -1,18 +1,12 @@
-import { render } from '@react-email/render';
 import { type ImageCheckingResult, checkImages } from './check-images';
 
 test('checkImages()', async () => {
   const results: ImageCheckingResult[] = [];
-  const stream = await checkImages(
-    await render(
-      <div>
-        {/* biome-ignore lint/a11y/useAltText: This is intentional to test the checking for accessibility */}
-        <img src="https://resend.com/static/brand/resend-icon-white.png" />,
-        <img src="/static/codepen-challengers.png" alt="codepen challenges" />,
-      </div>,
-    ),
-    'https://demo.react.email',
-  );
+  const html = `<div>
+  <img src="https://resend.com/static/brand/resend-icon-white.png" />,
+  <img src="/static/codepen-challengers.png" alt="codepen challenges" />,
+</div>`;
+  const stream = await checkImages(html, 'https://demo.react.email');
   const reader = stream.getReader();
   while (true) {
     const { done, value } = await reader.read();
@@ -26,6 +20,10 @@ test('checkImages()', async () => {
   expect(results).toEqual([
     {
       source: 'https://resend.com/static/brand/resend-icon-white.png',
+      codeLocation: {
+        line: 2,
+        column: 3,
+      },
       checks: [
         {
           passed: false,
@@ -60,6 +58,10 @@ test('checkImages()', async () => {
       status: 'warning',
     },
     {
+      codeLocation: {
+        line: 3,
+        column: 3,
+      },
       checks: [
         {
           metadata: {

package/src/actions/email-validation/check-images.ts

@@ -2,6 +2,10 @@
 
 import type { IncomingMessage } from 'node:http';
 import { parse } from 'node-html-parser';
+import {
+  type CodeLocation,
+  getCodeLocationFromAstElement,
+} from './get-code-location-from-ast-element';
 import { quickFetch } from './quick-fetch';
 
 export type ImageCheck = { passed: boolean } & (
@@ -34,6 +38,7 @@ export type ImageCheck = { passed: boolean } & (
 export interface ImageCheckingResult {
   status: 'success' | 'warning' | 'error';
   source: string;
+  codeLocation: CodeLocation;
   checks: ImageCheck[];
 }
 
@@ -61,6 +66,7 @@ export const checkImages = async (code: string, base: string) => {
 
         const result: ImageCheckingResult = {
           source: rawSource,
+          codeLocation: getCodeLocationFromAstElement(image, code),
           status: 'success',
           checks: [],
         };

package/src/actions/email-validation/check-links.spec.tsx

@@ -1,18 +1,14 @@
-import { render } from '@react-email/render';
 import { type LinkCheckingResult, checkLinks } from './check-links';
 
 test('checkLinks()', async () => {
   const results: LinkCheckingResult[] = [];
-  const stream = await checkLinks(
-    await render(
-      <div>
-        <a href="/">Root</a>
-        <a href="https://resend.com">Resend</a>
-        <a href="https://notion.so">Notion</a>
-        <a href="http://react.email">React Email unsafe</a>
-      </div>,
-    ),
-  );
+  const html = `<div>
+  <a href="/">Root</a>
+  <a href="https://resend.com">Resend</a>
+  <a href="https://notion.so">Notion</a>
+  <a href="http://react.email">React Email unsafe</a>
+</div>`;
+  const stream = await checkLinks(html);
   const reader = stream.getReader();
   while (true) {
     const { done, value } = await reader.read();
@@ -26,6 +22,10 @@ test('checkLinks()', async () => {
   expect(results).toEqual([
     {
       status: 'error',
+      codeLocation: {
+        line: 2,
+        column: 3,
+      },
       checks: [
         {
           type: 'syntax',
@@ -36,6 +36,10 @@ test('checkLinks()', async () => {
     },
     {
       status: 'success',
+      codeLocation: {
+        line: 3,
+        column: 3,
+      },
       checks: [
         {
           type: 'syntax',
@@ -57,6 +61,10 @@ test('checkLinks()', async () => {
     },
     {
       status: 'warning',
+      codeLocation: {
+        line: 4,
+        column: 3,
+      },
       checks: [
         {
           type: 'syntax',
@@ -78,6 +86,10 @@ test('checkLinks()', async () => {
     },
     {
       status: 'warning',
+      codeLocation: {
+        line: 5,
+        column: 3,
+      },
       checks: [
         {
           type: 'syntax',

package/src/actions/email-validation/check-links.ts

@@ -1,6 +1,10 @@
 'use server';
 
 import { parse } from 'node-html-parser';
+import {
+  type CodeLocation,
+  getCodeLocationFromAstElement,
+} from './get-code-location-from-ast-element';
 import { quickFetch } from './quick-fetch';
 
 export type LinkCheck = { passed: boolean } & (
@@ -21,6 +25,7 @@ export type LinkCheck = { passed: boolean } & (
 export interface LinkCheckingResult {
   status: 'success' | 'warning' | 'error';
   link: string;
+  codeLocation: CodeLocation;
   checks: LinkCheck[];
 }
 
@@ -37,6 +42,7 @@ export const checkLinks = async (code: string) => {
 
         const result: LinkCheckingResult = {
           link,
+          codeLocation: getCodeLocationFromAstElement(anchor, code),
           status: 'success',
           checks: [],
         };

package/src/actions/email-validation/get-code-location-from-ast-element.ts

@@ -0,0 +1,18 @@
+import type { HTMLElement } from 'node-html-parser';
+import { getLineAndColumnFromOffset } from '../../utils/get-line-and-column-from-offset';
+
+export interface CodeLocation {
+  line: number;
+  column: number;
+}
+
+export const getCodeLocationFromAstElement = (
+  ast: HTMLElement,
+  html: string,
+): CodeLocation => {
+  const [line, column] = getLineAndColumnFromOffset(ast.range[0], html);
+  return {
+    line,
+    column,
+  };
+};

package/src/actions/render-email-by-path.tsx

@@ -4,7 +4,7 @@ import path from 'node:path';
 import chalk from 'chalk';
 import logSymbols from 'log-symbols';
 import ora from 'ora';
-import { isBuilding } from '../app/env';
+import { isBuilding, isPreviewDevelopment } from '../app/env';
 import { getEmailComponent } from '../utils/get-email-component';
 import { improveErrorWithSourceMap } from '../utils/improve-error-with-sourcemap';
 import { registerSpinnerAutostopping } from '../utils/register-spinner-autostopping';
@@ -36,7 +36,7 @@ export const renderEmailByPath = async (
 
   const emailFilename = path.basename(emailPath);
   let spinner: ora.Ora | undefined;
-  if (!isBuilding) {
+  if (!isBuilding && !isPreviewDevelopment) {
     spinner = ora({
       text: `Rendering email template ${emailFilename}\n`,
       prefixText: ' ',

package/src/app/env.ts

@@ -10,3 +10,6 @@ export const emailsDirectoryAbsolutePath =
   process.env.EMAILS_DIR_ABSOLUTE_PATH!;
 
 export const isBuilding = process.env.NEXT_PUBLIC_IS_BUILDING === 'true';
+
+export const isPreviewDevelopment =
+  process.env.NEXT_PUBLIC_IS_PREVIEW_DEVELOPMENT === 'true';

package/src/app/preview/[...slug]/page.tsx

@@ -1,6 +1,10 @@
 import path from 'node:path';
 import { redirect } from 'next/navigation';
 import { Suspense } from 'react';
+import {
+  type CompatibilityCheckingResult,
+  checkCompatibility,
+} from '../../../actions/email-validation/check-compatibility';
 import { getEmailPathFromSlug } from '../../../actions/get-email-path-from-slug';
 import { renderEmailByPath } from '../../../actions/render-email-by-path';
 import { Shell } from '../../../components/shell';
@@ -10,8 +14,8 @@ import type { SpamCheckingResult } from '../../../components/toolbar/spam-assass
 import { PreviewProvider } from '../../../contexts/preview';
 import { getEmailsDirectoryMetadata } from '../../../utils/get-emails-directory-metadata';
 import { getLintingSources, loadLintingRowsFrom } from '../../../utils/linting';
+import { loadStream } from '../../../utils/load-stream';
 import { emailsDirectoryAbsolutePath, isBuilding } from '../../env';
-import Home from '../../page';
 import Preview from './preview';
 
 export const dynamicParams = true;
@@ -56,20 +60,19 @@ This is most likely not an issue with the preview server. Maybe there was a typo
 
   const serverEmailRenderingResult = await renderEmailByPath(emailPath);
 
-  if (isBuilding && 'error' in serverEmailRenderingResult) {
-    throw new Error(serverEmailRenderingResult.error.message, {
-      cause: serverEmailRenderingResult.error,
-    });
-  }
-
   let spamCheckingResult: SpamCheckingResult | undefined = undefined;
   let lintingRows: LintingRow[] | undefined = undefined;
+  let compatibilityCheckingResults: CompatibilityCheckingResult[] | undefined =
+    undefined;
 
-  if (isBuilding && !('error' in serverEmailRenderingResult)) {
+  if (isBuilding) {
+    if ('error' in serverEmailRenderingResult) {
+      throw new Error(serverEmailRenderingResult.error.message, {
+        cause: serverEmailRenderingResult.error,
+      });
+    }
     const lintingSources = getLintingSources(
       serverEmailRenderingResult.markup,
-      serverEmailRenderingResult.reactMarkup,
-      emailPath,
       '',
     );
     lintingRows = [];
@@ -87,6 +90,15 @@ This is most likely not an issue with the preview server. Maybe there was a typo
 
       return 0;
     });
+    compatibilityCheckingResults = [];
+    for await (const result of loadStream(
+      await checkCompatibility(
+        serverEmailRenderingResult.reactMarkup,
+        emailPath,
+      ),
+    )) {
+      compatibilityCheckingResults.push(result);
+    }
 
     const response = await fetch('https://react.email/api/check-spam', {
       method: 'POST',
@@ -118,12 +130,13 @@ This is most likely not an issue with the preview server. Maybe there was a typo
         {/* This suspense is so that this page doesn't throw warnings */}
         {/* on the build of the preview server de-opting into         */}
         {/* client-side rendering on build                            */}
-        <Suspense fallback={<Home />}>
+        <Suspense>
           <Preview emailTitle={path.basename(emailPath)} />
 
           <Toolbar
             serverLintingRows={lintingRows}
             serverSpamCheckingResult={spamCheckingResult}
+            serverCompatibilityResults={compatibilityCheckingResults}
           />
         </Suspense>
       </Shell>

package/src/app/preview/[...slug]/preview.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-import { use, useState } from 'react';
+import { use, useRef } from 'react';
 import { flushSync } from 'react-dom';
 import { Toaster } from 'sonner';
 import { useDebouncedCallback } from 'use-debounce';
@@ -37,21 +37,24 @@ const Preview = ({ emailTitle }: PreviewProps) => {
   const handleViewChange = (view: string) => {
     const params = new URLSearchParams(searchParams);
     params.set('view', view);
-    router.push(`${pathname}?${params.toString()}`);
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
   };
 
   const handleLangChange = (lang: string) => {
     const params = new URLSearchParams(searchParams);
     params.set('view', 'source');
     params.set('lang', lang);
-    router.push(`${pathname}?${params.toString()}`);
+    const isSameLang = searchParams.get('lang') === lang;
+    router.push(
+      `${pathname}?${params.toString()}${isSameLang ? location.hash : ''}`,
+    );
   };
 
   const hasRenderingMetadata = typeof renderedEmailMetadata !== 'undefined';
   const hasErrors = 'error' in renderingResult;
 
-  const [maxWidth, setMaxWidth] = useState(Number.POSITIVE_INFINITY);
-  const [maxHeight, setMaxHeight] = useState(Number.POSITIVE_INFINITY);
+  const maxWidthRef = useRef(Number.POSITIVE_INFINITY);
+  const maxHeightRef = useRef(Number.POSITIVE_INFINITY);
   const minWidth = 350;
   const minHeight = 600;
   const storedWidth = searchParams.get('width');
@@ -59,19 +62,19 @@ const Preview = ({ emailTitle }: PreviewProps) => {
   const [width, setWidth] = useClampedState(
     storedWidth ? Number.parseInt(storedWidth) : 600,
     350,
-    maxWidth,
+    maxWidthRef.current,
   );
   const [height, setHeight] = useClampedState(
     storedHeight ? Number.parseInt(storedHeight) : 1024,
     600,
-    maxHeight,
+    maxHeightRef.current,
   );
 
   const handleSaveViewSize = useDebouncedCallback(() => {
     const params = new URLSearchParams(searchParams);
     params.set('width', width.toString());
     params.set('height', height.toString());
-    router.push(`${pathname}?${params.toString()}`);
+    router.push(`${pathname}?${params.toString()}${location.hash}`);
   }, 300);
 
   return (
@@ -110,8 +113,8 @@ const Preview = ({ emailTitle }: PreviewProps) => {
           const observer = new ResizeObserver((entry) => {
             const [elementEntry] = entry;
             if (elementEntry) {
-              setMaxWidth(elementEntry.contentRect.width - 80);
-              setMaxHeight(elementEntry.contentRect.height - 80);
+              maxWidthRef.current = elementEntry.contentRect.width - 80;
+              maxHeightRef.current = elementEntry.contentRect.height - 80;
             }
           });
 
@@ -132,8 +135,8 @@ const Preview = ({ emailTitle }: PreviewProps) => {
               <ResizableWarpper
                 minHeight={minHeight}
                 minWidth={minWidth}
-                maxHeight={maxHeight}
-                maxWidth={maxWidth}
+                maxHeight={maxHeightRef.current}
+                maxWidth={maxWidthRef.current}
                 height={height}
                 onResizeEnd={() => {
                   handleSaveViewSize();

package/src/components/code-container.tsx

@@ -27,52 +27,19 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
   activeLang,
   setActiveLang,
 }) => {
-  const [isCopied, setIsCopied] = React.useState(false);
-
-  const renderDownloadIcon = () => {
-    const value = markups.filter((markup) => markup.language === activeLang);
-    if (typeof value[0] === 'undefined') return;
-    const file = new File([value[0].content], `email.${value[0].language}`);
-    const url = URL.createObjectURL(file);
-
-    return (
-      <a
-        className="text-slate-11 transition duration-200 ease-in-out hover:text-slate-12"
-        download={file.name}
-        href={url}
-      >
-        <IconDownload />
-      </a>
-    );
-  };
-
-  const renderClipboardIcon = () => {
-    const handleClipboard = async () => {
-      const activeContent = markups.filter(({ language }) => {
-        return activeLang === language;
-      });
-      setIsCopied(true);
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      await copyTextToClipboard(activeContent[0]!.content);
-      setTimeout(() => {
-        setIsCopied(false);
-      }, 3000);
-    };
-
-    return (
-      <IconButton onClick={() => void handleClipboard()}>
-        {isCopied ? <IconCheck /> : <IconClipboard />}
-      </IconButton>
-    );
-  };
-
-  React.useEffect(() => {
-    setIsCopied(false);
-  }, [activeLang]);
+  const activeMarkup = markups.find(({ language }) => activeLang === language);
+  if (!activeMarkup) {
+    throw new Error('No markup found for the active language!', {
+      cause: {
+        activeLang,
+        markups,
+      },
+    });
+  }
 
   return (
     <div
-      className="relative w-full items-center whitespace-pre rounded-md border border-slate-6 text-sm backdrop-blur-md"
+      className="relative w-full items-center whitespace-pre rounded-md border border-slate-6 text-sm"
       style={{
         lineHeight: '130%',
         background:
@@ -111,35 +78,87 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
             })}
           </LayoutGroup>
         </div>
-        <Tooltip>
-          <Tooltip.Trigger
-            asChild
-            className="absolute right-2 top-2 hidden md:block"
-          >
-            {renderClipboardIcon()}
-          </Tooltip.Trigger>
-          <Tooltip.Content>Copy to Clipboard</Tooltip.Content>
-        </Tooltip>
-        <Tooltip>
-          <Tooltip.Trigger
-            asChild
-            className="text-gray-11 absolute right-8 top-2 hidden md:block"
-          >
-            {renderDownloadIcon()}
-          </Tooltip.Trigger>
-          <Tooltip.Content>Download</Tooltip.Content>
-        </Tooltip>
+        <CopyToClipboardButton content={activeMarkup.content} />
+        <DownloadButton
+          content={activeMarkup.content}
+          filename={`email.${activeMarkup.language}`}
+        />
+      </div>
+      <div>
+        <Code language={activeLang}>{activeMarkup.content}</Code>
       </div>
-      {markups.map(({ language, content }) => {
-        return (
-          <div
-            className={`${activeLang !== language && 'hidden'}`}
-            key={language}
-          >
-            <Code language={language}>{content}</Code>
-          </div>
-        );
-      })}
     </div>
   );
 };
+
+interface CopyToClipboardButtonProps {
+  content: string;
+}
+
+const CopyToClipboardButton = ({ content }: CopyToClipboardButtonProps) => {
+  const [isCopied, setIsCopied] = React.useState(false);
+
+  const unsetIsCopiedTimeout = React.useRef<NodeJS.Timeout>(undefined);
+  React.useEffect(() => {
+    setIsCopied(false);
+    clearTimeout(unsetIsCopiedTimeout.current);
+    unsetIsCopiedTimeout.current = undefined;
+  }, [content]);
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger
+        asChild
+        className="absolute right-2 top-2 hidden md:block"
+      >
+        <IconButton
+          onClick={async () => {
+            setIsCopied(true);
+            await copyTextToClipboard(content);
+            unsetIsCopiedTimeout.current = setTimeout(() => {
+              setIsCopied(false);
+            }, 3000);
+          }}
+        >
+          {isCopied ? <IconCheck /> : <IconClipboard />}
+        </IconButton>
+      </Tooltip.Trigger>
+      <Tooltip.Content>Copy to Clipboard</Tooltip.Content>
+    </Tooltip>
+  );
+};
+
+interface DownloadButtonProps {
+  content: string;
+  filename: string;
+}
+
+const DownloadButton = ({ content, filename }: DownloadButtonProps) => {
+  const generatedUrl = React.useMemo(() => {
+    const file = new File([content], filename);
+    return URL.createObjectURL(file);
+  }, [content, filename]);
+  const url = React.useSyncExternalStore(
+    () => () => {},
+    () => generatedUrl,
+    () => undefined,
+  );
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger
+        asChild
+        className="text-gray-11 absolute right-8 top-2 hidden md:block"
+      >
+        <a
+          className="text-slate-11 transition duration-200 ease-in-out hover:text-slate-12"
+          download={filename}
+          href={url}
+        >
+          <IconDownload />
+        </a>
+      </Tooltip.Trigger>
+      <Tooltip.Content>Download</Tooltip.Content>
+    </Tooltip>
+  );
+};