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

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>
+  );
+};

package/src/components/code.tsx

@@ -1,6 +1,10 @@
+'use client';
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
 import type { Language } from 'prism-react-renderer';
 import { Highlight } from 'prism-react-renderer';
-import * as React from 'react';
+import { Fragment, useEffect } from 'react';
+import { useFragmentIdentifier } from '../hooks/use-fragment-identifier';
 import { cn } from '../utils';
 
 interface CodeProps {
@@ -43,10 +47,43 @@ const theme = {
   ],
 };
 
+const lineHashRegex = /#L(?<start>\d+)(?:,(?<end>\d+))?/;
+
 export const Code: React.FC<Readonly<CodeProps>> = ({
   children,
   language = 'html',
 }) => {
+  const locationHash = useFragmentIdentifier();
+  const highlight = (() => {
+    if (locationHash) {
+      const match = locationHash.match(lineHashRegex);
+      if (match?.groups?.start) {
+        const start = Number.parseInt(match.groups.start);
+        const end = match.groups.end
+          ? Number.parseInt(match.groups.end)
+          : start;
+        return [start, end] as const;
+      }
+    }
+  })();
+
+  const isHighlighting = (line: number) => {
+    if (!highlight) return false;
+
+    return highlight[0] <= line && highlight[1] >= line;
+  };
+
+  useEffect(() => {
+    if (highlight) {
+      document.getElementById(`L${highlight[0]}`)?.scrollIntoView({
+        block: 'start',
+        behavior: 'smooth',
+      });
+    }
+  }, [highlight]);
+
+  const searchParams = useSearchParams();
+
   const value = children.trim();
 
   return (
@@ -60,50 +97,77 @@ export const Code: React.FC<Readonly<CodeProps>> = ({
                 'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
             }}
           />
-          <pre className="h-[650px] overflow-auto p-4">
-            {tokens.map((line, i) => {
-              const lineProps = getLineProps({
-                line,
-                key: i,
-              });
-              return (
-                <div
-                  {...lineProps}
-                  className={cn('whitespace-pre', {
-                    "before:mr-2 before:text-slate-11 before:content-['$']":
-                      language === 'bash' && tokens.length === 1,
-                  })}
+          <div className="flex h-[650px] p-4 max-h-[calc(100vh-10rem)] after:w-full after:static after:block after:h-4 after:content-[''] overflow-auto">
+            <div className="text-[#49494f] text-[13px] font-light font-[MonoLisa,_Menlo,_monospace]">
+              {tokens.map((_, i) => (
+                <Link
+                  id={`L${i + 1}`}
                   key={i}
+                  href={{
+                    hash: `#L${i + 1}`,
+                    search: searchParams.toString(),
+                  }}
+                  scroll={false}
+                  className={cn(
+                    'align-middle block scroll-mt-[325px] rounded-l-sm select-none pr-3 cursor-pointer hover:text-slate-12',
+                    isHighlighting(i + 1) &&
+                      'text-cyan-11 hover:text-cyan-11 bg-cyan-5',
+                  )}
+                  type="button"
                 >
-                  {line.map((token, key) => {
-                    const tokenProps = getTokenProps({
-                      token,
-                    });
-                    const isException =
-                      token.content === 'from' &&
-                      line[key + 1]?.content === ':';
-                    const newTypes = isException
-                      ? [...token.types, 'key-white']
-                      : token.types;
-                    token.types = newTypes;
+                  {i + 1}
+                </Link>
+              ))}
+            </div>
+            <pre>
+              {tokens.map((line, i) => {
+                const lineProps = getLineProps({
+                  line,
+                  key: i,
+                });
+                return (
+                  <div
+                    {...lineProps}
+                    className={cn(
+                      'whitespace-pre flex transition-colors rounded-r-sm',
+                      isHighlighting(i + 1) && 'bg-cyan-5',
+                      {
+                        "before:mr-2 before:text-slate-11 before:content-['$']":
+                          language === 'bash' && tokens.length === 1,
+                      },
+                    )}
+                    key={i}
+                  >
+                    {line.map((token, key) => {
+                      const tokenProps = getTokenProps({
+                        token,
+                      });
+                      const isException =
+                        token.content === 'from' &&
+                        line[key + 1]?.content === ':';
+                      const newTypes = isException
+                        ? [...token.types, 'key-white']
+                        : token.types;
+                      token.types = newTypes;
 
-                    return (
-                      <React.Fragment key={key}>
-                        <span {...tokenProps} />
-                      </React.Fragment>
-                    );
-                  })}
-                </div>
-              );
-            })}
-          </pre>
-          <div
-            className="absolute bottom-0 left-0 h-px w-[200px]"
-            style={{
-              background:
-                'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
-            }}
-          />
+                      return (
+                        <Fragment key={key}>
+                          <span {...tokenProps} />
+                        </Fragment>
+                      );
+                    })}
+                  </div>
+                );
+              })}
+            </pre>
+            <div
+              className="absolute bottom-0 left-0 h-px w-[200px]"
+              style={{
+                background:
+                  'linear-gradient(90deg, rgba(56, 189, 248, 0) 0%, rgba(56, 189, 248, 0) 0%, rgba(232, 232, 232, 0.2) 33.02%, rgba(143, 143, 143, 0.6719) 64.41%, rgba(236, 72, 153, 0) 98.93%)',
+              }}
+            />
+          </div>
         </>
       )}
     </Highlight>

package/src/components/icons/icon-info.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconInfo = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
+      <path
+        d="M12 4C7.58173 4 4 7.58172 4 12C4 16.4182 7.58173 20 12 20C16.4183 20 20 16.4182 20 12C20 7.58172 16.4183 4 12 4ZM5.14754 12C5.14754 8.21549 8.21551 5.14754 12 5.14754C15.7845 5.14754 18.8525 8.21549 18.8525 12C18.8525 15.7844 15.7845 18.8525 12 18.8525C8.21551 18.8525 5.14754 15.7844 5.14754 12ZM12.906 8.37648C12.906 8.87682 12.5004 9.28243 12 9.28243C11.4997 9.28243 11.0941 8.87682 11.0941 8.37648C11.0941 7.87613 11.4997 7.47053 12 7.47053C12.5004 7.47053 12.906 7.87613 12.906 8.37648ZM10.1883 10.1884H10.7922H12.0002C12.3337 10.1884 12.6041 10.4588 12.6041 10.7924V15.0201H13.2081H13.8121V16.2281H13.2081H12.0002H10.7922H10.1883V15.0201H10.7922H11.3962V11.3963H10.7922H10.1883V10.1884Z"
+        fill="currentColor"
+        fillRule="evenodd"
+        clipRule="evenodd"
+      />
+    </IconBase>
+  ),
+);
+
+IconInfo.displayName = 'IconInfo';

package/src/components/icons/icon-reload.tsx

@@ -1,19 +1,18 @@
-export const IconReload = (props: React.ComponentProps<'svg'>) => {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
+import * as React from 'react';
+import type { IconElement, IconProps } from './icon-base';
+import { IconBase } from './icon-base';
+
+export const IconReload = React.forwardRef<IconElement, Readonly<IconProps>>(
+  ({ ...props }, forwardedRef) => (
+    <IconBase ref={forwardedRef} {...props}>
       <path
         fillRule="evenodd"
         clipRule="evenodd"
-        d="M10.52 6C10.52 3.73168 8.75221 1.48 6.00006 1.48C3.77741 1.48 2.67886 3.1251 2.21074 3.99999H3.60005C3.82096 3.99999 4.00005 4.17908 4.00005 4.39999C4.00005 4.6209 3.82096 4.79999 3.60005 4.79999H1.20005C0.979137 4.79999 0.800049 4.6209 0.800049 4.39999V1.99999C0.800049 1.77908 0.979137 1.59999 1.20005 1.59999C1.42096 1.59999 1.60005 1.77908 1.60005 1.99999V3.45056C2.16367 2.45702 3.4673 0.679993 6.00006 0.679993C9.25029 0.679993 11.32 3.34831 11.32 6C11.32 8.65169 9.25029 11.32 6.00006 11.32C4.44499 11.32 3.15027 10.7047 2.22843 9.76673C1.73486 9.26449 1.34939 8.67121 1.08658 8.03257C1.0025 7.8283 1.09995 7.59453 1.30424 7.51046C1.50853 7.42638 1.7423 7.52384 1.82637 7.72812C2.05104 8.27401 2.38001 8.77961 2.79901 9.20593C3.57646 9.99705 4.66802 10.52 6.00006 10.52C8.75221 10.52 10.52 8.26833 10.52 6Z"
+        d="M17.9354 12C17.9354 9.01537 15.5828 6.05264 11.9202 6.05264C8.96229 6.05264 7.50033 8.21724 6.87735 9.36841H8.72625C9.02024 9.36841 9.25858 9.60406 9.25858 9.89473C9.25858 10.1854 9.02024 10.421 8.72625 10.421H5.53232C5.23833 10.421 5 10.1854 5 9.89473V6.73684C5 6.44617 5.23833 6.21052 5.53232 6.21052C5.82631 6.21052 6.06465 6.44617 6.06465 6.73684V8.64548C6.81471 7.33819 8.54959 5 11.9202 5C16.2456 5 19 8.51094 19 12C19 15.4891 16.2456 19 11.9202 19C9.8507 19 8.12769 18.1904 6.9009 16.9562C6.24405 16.2954 5.73107 15.5148 5.38132 14.6744C5.26942 14.4057 5.39911 14.0981 5.67098 13.9875C5.94285 13.8768 6.25395 14.0051 6.36583 14.2738C6.66482 14.9921 7.10262 15.6574 7.66023 16.2183C8.69486 17.2593 10.1475 17.9474 11.9202 17.9474C15.5828 17.9474 17.9354 14.9846 17.9354 12Z"
         fill="currentColor"
       />
-    </svg>
-  );
-};
+    </IconBase>
+  ),
+);
+
+IconReload.displayName = 'IconReload';

package/src/components/logo.tsx

@@ -1,10 +1,11 @@
 export const Logo = () => (
   <svg
     fill="none"
-    height="32"
+    height="30"
     viewBox="0 0 119 32"
-    width="119"
+    width="113"
     xmlns="http://www.w3.org/2000/svg"
+    style={{ opacity: 0.9 }}
   >
     <g clipPath="url(#clip0_27_291)">
       <path

package/src/components/resizable-wrapper.tsx

@@ -100,10 +100,7 @@ export const ResizableWarpper = ({
   return (
     <div
       {...rest}
-      className={cn(
-        'relative mx-auto my-auto box-content px-4 py-2',
-        rest.className,
-      )}
+      className={cn('relative mx-auto my-auto box-content', rest.className)}
     >
       <div
         aria-label="resize-west"

package/src/components/sidebar/file-tree-directory-children.tsx

@@ -5,6 +5,7 @@ import { useSearchParams } from 'next/navigation';
 import { cn } from '../../utils';
 import type { EmailsDirectory } from '../../utils/get-emails-directory-metadata';
 import { IconFile } from '../icons/icon-file';
+import { Tooltip } from '../tooltip';
 import { FileTreeDirectory } from './file-tree-directory';
 
 export const FileTreeDirectoryChildren = (props: {
@@ -71,12 +72,13 @@ export const FileTreeDirectoryChildren = (props: {
                           pathname: `/preview/${emailSlug}`,
                           search: searchParams.toString(),
                         }}
+                        prefetch
                         key={emailSlug}
                       >
                         <motion.span
                           animate={{ x: 0, opacity: 1 }}
                           className={cn(
-                            'relative flex h-8 max-w-full items-center gap-2 rounded-md align-middle text-slate-11 text-sm transition-colors duration-100 ease-[cubic-bezier(.6,.12,.34,.96)]',
+                            'relative flex h-8 w-full items-center text-start gap-2 rounded-md align-middle text-slate-11 text-sm transition-colors duration-100 ease-[cubic-bezier(.6,.12,.34,.96)]',
                             props.isRoot ? undefined : 'pl-3',
                             {
                               'text-cyan-11': isCurrentPage,
@@ -115,7 +117,16 @@ export const FileTreeDirectoryChildren = (props: {
                             height="20"
                             width="20"
                           />
-                          <span className="truncate">{emailFilename}</span>
+                          <Tooltip.Provider>
+                            <Tooltip>
+                              <Tooltip.Trigger asChild>
+                                <span className="truncate w-[calc(100%-1.25rem)]">
+                                  {emailFilename}
+                                </span>
+                              </Tooltip.Trigger>
+                              <Tooltip.Content>{emailFilename}</Tooltip.Content>
+                            </Tooltip>
+                          </Tooltip.Provider>
                         </motion.span>
                       </Link>
                     );

package/src/components/sidebar/file-tree-directory.tsx

@@ -7,6 +7,7 @@ import { Heading } from '../heading';
 import { IconArrowDown } from '../icons/icon-arrow-down';
 import { IconFolder } from '../icons/icon-folder';
 import { IconFolderOpen } from '../icons/icon-folder-open';
+import { Tooltip } from '../tooltip';
 import { FileTreeDirectoryChildren } from './file-tree-directory-children';
 
 interface SidebarDirectoryProps {
@@ -51,31 +52,38 @@ export const FileTreeDirectory = ({
     >
       <Collapsible.Trigger
         className={cn(
-          'mt-1 mb-1.5 flex w-full items-center justify-between gap-2 font-medium text-[14px]',
+          'mt-1 mb-1.5 flex w-full items-center text-start justify-between gap-2 font-medium text-[14px]',
           {
             'cursor-pointer': !isEmpty,
           },
         )}
       >
-        <div className="flex items-center gap-2 text-slate-11 transition duration-200 ease-in-out hover:text-slate-12">
-          {open ? (
-            <IconFolderOpen height="20" width="20" />
-          ) : (
-            <IconFolder height="20" width="20" />
-          )}
-          <Heading
-            as="h3"
-            className="transition duration-200 ease-in-out hover:text-slate-12"
-            color="gray"
-            size="2"
-            weight="medium"
-          >
-            {directoryMetadata.directoryName}
-          </Heading>
-        </div>
+        {open ? (
+          <IconFolderOpen className="w-[20px]" height="20" width="20" />
+        ) : (
+          <IconFolder height="20" width="20" />
+        )}
+        <Tooltip.Provider>
+          <Tooltip>
+            <Tooltip.Trigger asChild>
+              <Heading
+                as="h3"
+                className="transition grow w-[calc(100%-40px)] truncate duration-200 ease-in-out hover:text-slate-12"
+                color="gray"
+                size="2"
+                weight="medium"
+              >
+                {directoryMetadata.directoryName}
+              </Heading>
+            </Tooltip.Trigger>
+            <Tooltip.Content>{directoryMetadata.directoryName}</Tooltip.Content>
+          </Tooltip>
+        </Tooltip.Provider>
         {!isEmpty ? (
           <IconArrowDown
-            className="justify-self-end opacity-60 transition-transform data-[open=true]:rotate-180"
+            width="20"
+            height="20"
+            className="ml-auto opacity-60 transition-transform data-[open=true]:rotate-180"
             data-open={open}
           />
         ) : null}

package/src/components/sidebar/file-tree.tsx

@@ -13,8 +13,8 @@ export const FileTree = ({
   emailsDirectoryMetadata,
 }: FileTreeProps) => {
   return (
-    <div className="flex h-full w-full flex-col overflow-hidden lg:w-full lg:min-w-[14.5rem]">
-      <nav className="flex w-full flex-grow flex-col overflow-y-auto p-4 pr-0 pl-0">
+    <div className="flex w-full h-full flex-col lg:w-full lg:min-w-[14.5rem]">
+      <nav className="flex flex-grow flex-col p-4 pr-0 pl-0">
         <Collapsible.Root open>
           <React.Suspense>
             <FileTreeDirectoryChildren

package/src/components/sidebar/sidebar.tsx

@@ -2,7 +2,6 @@
 import { clsx } from 'clsx';
 import { useEmails } from '../../contexts/emails';
 import { cn } from '../../utils';
-import { Heading } from '../heading';
 import { Logo } from '../logo';
 import { FileTree } from './file-tree';
 
@@ -17,28 +16,26 @@ export const Sidebar = ({ className, currentEmailOpenSlug }: SidebarProps) => {
   return (
     <aside
       className={cn(
-        'fixed top-[4.375rem] left-0 z-[9999] h-full max-h-full w-screen max-w-ful overflow-hidden bg-black will-change-auto',
+        'fixed top-[4.375rem] left-0 z-[9999] h-full max-h-full w-screen max-w-full bg-black will-change-auto',
         'lg:static lg:z-auto lg:max-h-screen lg:w-[16rem]',
         className,
       )}
     >
-      <div className="w-full h-full overflow-y-auto overflow-x-hidden">
-        <div className="flex w-full h-full flex-col border-slate-6 border-r">
-          <div
-            className={clsx(
-              'hidden min-h-[3.3125rem] flex-shrink items-center p-3 px-4 lg:flex',
-            )}
-          >
-            <Heading as="h2" className="truncate" size="2" weight="medium">
-              <Logo />
-            </Heading>
-          </div>
-          <div className="relative h-full w-full border-slate-4 border-t px-4 pb-3">
-            <FileTree
-              currentEmailOpenSlug={currentEmailOpenSlug}
-              emailsDirectoryMetadata={emailsDirectoryMetadata}
-            />
-          </div>
+      <div className="flex w-full h-full overflow-hidden flex-col border-slate-6 border-r">
+        <div
+          className={clsx(
+            'hidden min-h-[3.3125rem] flex-shrink items-center p-3 px-4 lg:flex',
+          )}
+        >
+          <h2>
+            <Logo />
+          </h2>
+        </div>
+        <div className="relative grow w-full h-full overflow-y-auto overflow-x-hidden border-slate-4 border-t px-4 pb-3">
+          <FileTree
+            currentEmailOpenSlug={currentEmailOpenSlug}
+            emailsDirectoryMetadata={emailsDirectoryMetadata}
+          />
         </div>
       </div>
     </aside>

package/src/components/toolbar/code-preview-line-link.tsx

@@ -0,0 +1,40 @@
+import Link from 'next/link';
+import { useSearchParams } from 'next/navigation';
+
+interface CodePreviewLineLinkProps {
+  line: number;
+  column: number;
+
+  type: 'react' | 'html';
+}
+
+export const CodePreviewLineLink = ({
+  line,
+  column,
+  type,
+}: CodePreviewLineLinkProps) => {
+  const searchParams = useSearchParams();
+
+  const newSearchParams = new URLSearchParams(searchParams);
+  newSearchParams.set('view', 'source');
+  if (type === 'html') {
+    newSearchParams.set('lang', 'markup');
+  } else if (type === 'react') {
+    newSearchParams.set('lang', 'jsx');
+  }
+
+  const fragmentIdentifier = `#L${line}`;
+
+  return (
+    <Link
+      href={{
+        search: newSearchParams.toString(),
+        hash: fragmentIdentifier,
+      }}
+      scroll={false}
+      className="appearance-none underline mx-2"
+    >
+      L{line.toString().padStart(2, '0')}
+    </Link>
+  );
+};