react-email 1.7.2 → 1.7.4

package/dist/source/commands/export.js

@@ -0,0 +1,80 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.exportTemplates = void 0;
+const glob_1 = require("glob");
+const esbuild_1 = __importDefault(require("esbuild"));
+const tree_node_cli_1 = __importDefault(require("tree-node-cli"));
+const ora_1 = __importDefault(require("ora"));
+const log_symbols_1 = __importDefault(require("log-symbols"));
+const render_1 = require("@react-email/render");
+const fs_1 = require("fs");
+const cpy_1 = __importDefault(require("cpy"));
+const normalize_path_1 = __importDefault(require("normalize-path"));
+const utils_1 = require("../utils");
+/*
+  This first builds all the templates using esbuild and then puts the output in the `.js`
+  files. Then these `.js` files are imported dynamically and rendered to `.html` files
+  using the `render` function.
+ */
+const exportTemplates = async (outDir, options) => {
+    const spinner = (0, ora_1.default)('Preparing files...\n').start();
+    const allTemplates = glob_1.glob.sync((0, normalize_path_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/*.{tsx,jsx}`));
+    esbuild_1.default.buildSync({
+        bundle: true,
+        entryPoints: allTemplates,
+        platform: 'node',
+        write: true,
+        outdir: outDir,
+    });
+    const allBuiltTemplates = glob_1.glob.sync((0, normalize_path_1.default)(`${outDir}/*.js`), {
+        absolute: true,
+    });
+    for (const template of allBuiltTemplates) {
+        const component = await Promise.resolve().then(() => __importStar(require(template)));
+        const rendered = (0, render_1.render)(component.default(), options);
+        const htmlPath = template.replace('.js', options.plainText ? '.txt' : '.html');
+        (0, fs_1.writeFileSync)(htmlPath, rendered);
+        (0, fs_1.unlinkSync)(template);
+    }
+    const hasStaticDirectory = (0, utils_1.checkDirectoryExist)(`${utils_1.CLIENT_EMAILS_PATH}/static`);
+    if (hasStaticDirectory) {
+        await (0, cpy_1.default)(`${utils_1.CLIENT_EMAILS_PATH}/static`, `${outDir}/static`);
+    }
+    const fileTree = (0, tree_node_cli_1.default)(outDir, {
+        allFiles: true,
+        maxDepth: 4,
+    });
+    console.log(fileTree);
+    spinner.stopAndPersist({
+        symbol: log_symbols_1.default.success,
+        text: 'Successfully exported emails',
+    });
+    process.exit();
+};
+exports.exportTemplates = exportTemplates;

package/dist/source/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/source/index.js

@@ -0,0 +1,27 @@
+#!/usr/bin/env node
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const extra_typings_1 = require("@commander-js/extra-typings");
+const constants_1 = require("./utils/constants");
+const dev_1 = require("./commands/dev");
+const export_1 = require("./commands/export");
+const package_json_1 = __importDefault(require("../package.json"));
+extra_typings_1.program
+    .name(constants_1.PACKAGE_NAME)
+    .description('A live preview of your emails right in your browser')
+    .version(package_json_1.default.version);
+extra_typings_1.program
+    .command('dev')
+    .description('Starts the application in development mode')
+    .action(dev_1.dev);
+extra_typings_1.program
+    .command('export')
+    .description('Build the templates to the `out` directory')
+    .option('--outDir <path>', 'Output directory', 'out')
+    .option('-p, --pretty', 'Pretty print the output', false)
+    .option('-t, --plainText', 'Set output format as plain Text', false)
+    .action(({ outDir, pretty, plainText }) => (0, export_1.exportTemplates)(outDir, { pretty, plainText }));
+extra_typings_1.program.parse();

package/dist/source/utils/check-directory-exist.d.ts

@@ -0,0 +1 @@
+export declare const checkDirectoryExist: (path: string) => boolean;

package/dist/source/utils/check-directory-exist.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkDirectoryExist = void 0;
+const fs_1 = __importDefault(require("fs"));
+const checkDirectoryExist = (path) => fs_1.default.existsSync(path);
+exports.checkDirectoryExist = checkDirectoryExist;

package/dist/source/utils/check-empty-directory.d.ts

@@ -0,0 +1 @@
+export declare const checkEmptyDirectory: (path: string) => Promise<boolean>;

package/dist/source/utils/check-empty-directory.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkEmptyDirectory = void 0;
+const fs_1 = __importDefault(require("fs"));
+const checkEmptyDirectory = async (path) => {
+    const files = await fs_1.default.promises.readdir(path);
+    return files.length === 0;
+};
+exports.checkEmptyDirectory = checkEmptyDirectory;

package/dist/source/utils/check-is-up-to-date.d.ts

@@ -0,0 +1,2 @@
+export declare const checkPackageIsUpToDate: () => Promise<boolean>;
+export declare const getPreviewPkg: () => any;

package/dist/source/utils/check-is-up-to-date.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPreviewPkg = exports.checkPackageIsUpToDate = void 0;
+const root_1 = require("../_preview/root");
+const constants_1 = require("./constants");
+const path_1 = __importDefault(require("path"));
+const fs_1 = __importDefault(require("fs"));
+const checkPackageIsUpToDate = async () => {
+    try {
+        const reactEmailPkg = await fs_1.default.promises.readFile(path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'package.json'), { encoding: 'utf8' });
+        const isUpToDate = JSON.parse(reactEmailPkg).version === (0, exports.getPreviewPkg)().version;
+        return isUpToDate;
+    }
+    catch (error) {
+        throw new Error('Error checking if app is up-to-date');
+    }
+};
+exports.checkPackageIsUpToDate = checkPackageIsUpToDate;
+const getPreviewPkg = () => {
+    const [previewPkg] = root_1.root.filter((pkg) => pkg.title === 'package.json');
+    return JSON.parse(previewPkg?.content || '');
+};
+exports.getPreviewPkg = getPreviewPkg;

package/dist/source/utils/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const DEFAULT_EMAILS_DIRECTORY = "emails";
+export declare const PACKAGE_NAME = "react-email";
+export declare const CURRENT_PATH: string;
+export declare const CLIENT_PACKAGE_JSON: string;
+export declare const REACT_EMAIL_ROOT: string;
+export declare const SRC_PATH: string;
+export declare const PUBLIC_PATH: string;
+export declare const EVENT_FILE_DELETED = "unlink";
+export declare const CLIENT_EMAILS_PATH: string;
+export declare const PACKAGE_EMAILS_PATH: string;

package/dist/source/utils/constants.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PACKAGE_EMAILS_PATH = exports.CLIENT_EMAILS_PATH = exports.EVENT_FILE_DELETED = exports.PUBLIC_PATH = exports.SRC_PATH = exports.REACT_EMAIL_ROOT = exports.CLIENT_PACKAGE_JSON = exports.CURRENT_PATH = exports.PACKAGE_NAME = exports.DEFAULT_EMAILS_DIRECTORY = void 0;
+const path_1 = __importDefault(require("path"));
+// Package variables
+exports.DEFAULT_EMAILS_DIRECTORY = 'emails';
+exports.PACKAGE_NAME = 'react-email';
+// Default paths
+exports.CURRENT_PATH = process.cwd();
+// Client paths
+exports.CLIENT_PACKAGE_JSON = path_1.default.join(exports.CURRENT_PATH, 'package.json');
+// React Email paths
+exports.REACT_EMAIL_ROOT = path_1.default.join(exports.CURRENT_PATH, '.react-email');
+exports.SRC_PATH = path_1.default.join(exports.REACT_EMAIL_ROOT, 'src');
+exports.PUBLIC_PATH = path_1.default.join(exports.REACT_EMAIL_ROOT, 'public');
+// Events
+exports.EVENT_FILE_DELETED = 'unlink';
+exports.CLIENT_EMAILS_PATH = path_1.default.join(exports.CURRENT_PATH, exports.DEFAULT_EMAILS_DIRECTORY);
+exports.PACKAGE_EMAILS_PATH = path_1.default.join(exports.REACT_EMAIL_ROOT, exports.DEFAULT_EMAILS_DIRECTORY);

package/dist/source/utils/create-directory.d.ts

@@ -0,0 +1 @@
+export declare const createDirectory: (directory: string) => Promise<string | undefined>;

package/dist/source/utils/create-directory.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createDirectory = void 0;
+const fs_1 = __importDefault(require("fs"));
+const createDirectory = async (directory) => fs_1.default.promises.mkdir(directory, { recursive: true });
+exports.createDirectory = createDirectory;

package/dist/source/utils/index.d.ts

@@ -0,0 +1,6 @@
+export * from './check-directory-exist';
+export * from './check-empty-directory';
+export * from './check-is-up-to-date';
+export * from './constants';
+export * from './create-directory';
+export * from './watcher';

package/dist/source/utils/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./check-directory-exist"), exports);
+__exportStar(require("./check-empty-directory"), exports);
+__exportStar(require("./check-is-up-to-date"), exports);
+__exportStar(require("./constants"), exports);
+__exportStar(require("./create-directory"), exports);
+__exportStar(require("./watcher"), exports);

package/dist/source/utils/watcher.d.ts

@@ -0,0 +1,3 @@
+import chokidar from 'chokidar';
+export declare const watcherInstance: chokidar.FSWatcher;
+export declare const watcher: () => chokidar.FSWatcher;

package/dist/source/utils/watcher.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.watcher = exports.watcherInstance = void 0;
+const chokidar_1 = __importDefault(require("chokidar"));
+const constants_1 = require("./constants");
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const cpy_1 = __importDefault(require("cpy"));
+exports.watcherInstance = chokidar_1.default.watch(constants_1.CLIENT_EMAILS_PATH, {
+    ignoreInitial: true,
+    cwd: constants_1.CURRENT_PATH,
+    ignored: /(^|[\/\\])\../,
+});
+const watcher = () => exports.watcherInstance.on('all', async (event, filename) => {
+    if (event === constants_1.EVENT_FILE_DELETED) {
+        const file = filename.split(path_1.default.sep);
+        if (file[1] === 'static' && file[2]) {
+            await fs_1.default.promises.rm(path_1.default.join(constants_1.REACT_EMAIL_ROOT, 'public', 'static', file[2]));
+            return;
+        }
+        await fs_1.default.promises.rm(path_1.default.join(constants_1.REACT_EMAIL_ROOT, filename));
+    }
+    else {
+        const file = filename.split(path_1.default.sep);
+        if (file[1] === 'static' && file[2]) {
+            await (0, cpy_1.default)(`${constants_1.CLIENT_EMAILS_PATH}/static/${file[2]}`, `${constants_1.REACT_EMAIL_ROOT}/public/static`);
+            return;
+        }
+        await (0, cpy_1.default)(path_1.default.join(constants_1.CURRENT_PATH, filename), path_1.default.join(constants_1.REACT_EMAIL_ROOT, file.slice(0, -1).join(path_1.default.sep)));
+    }
+});
+exports.watcher = watcher;

package/package.json

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

package/preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-email-preview",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "The React Email preview application",
   "license": "MIT",
   "scripts": {
@@ -24,6 +24,7 @@
     "@radix-ui/react-tooltip": "1.0.2",
     "@react-email/render": "0.0.6",
     "classnames": "2.3.2",
+    "framer-motion": "8.4.6",
     "next": "13.0.4",
     "prism-react-renderer": "1.3.5",
     "react": "18.2.0",

package/preview/src/components/code-container.tsx

@@ -7,6 +7,7 @@ import { copyTextToClipboard } from '../utils';
 import languageMap from '../utils/language-map';
 import { Tooltip } from './tooltip';
 import { Code } from './code';
+import { AnimateSharedLayout, motion } from 'framer-motion';
 import * as React from 'react';
 
 interface CodeContainerProps {
@@ -21,6 +22,7 @@ interface MarkupProps {
 export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
   markups,
 }) => {
+  const [hovered, setHovered] = React.useState('');
   const [isCopied, setIsCopied] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState(markups[0].language);
   let file = null;
@@ -32,7 +34,11 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
     url = URL.createObjectURL(file);
 
     return (
-      <a href={url} download={file.name}>
+      <a
+        href={url}
+        download={file.name}
+        className="text-slate-11 transition ease-in-out duration-200 hover:text-slate-12"
+      >
         <IconDownload />
       </a>
     );
@@ -72,19 +78,34 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
       }}
     >
       <div className="h-9 border-b border-slate-6">
-        <div className="py-[10px] px-4 text-xs flex gap-8">
-          {markups.map(({ language }) => {
-            return (
-              <div key={language}>
-                <button
-                  className={`${activeTab !== language && 'opacity-25'}`}
+        <div className="flex">
+          <AnimateSharedLayout>
+            {markups.map(({ language }) => {
+              const isHovered = hovered === language;
+              return (
+                <motion.button
+                  className={`relative py-[8px] px-4 text-sm font-medium font-sans transition ease-in-out duration-200 ${
+                    activeTab !== language ? 'text-slate-11' : 'text-slate-12'
+                  }`}
                   onClick={() => setActiveTab(language)}
+                  onHoverStart={() => setHovered(language)}
+                  onHoverEnd={() => setHovered('')}
+                  key={language}
                 >
+                  {isHovered && (
+                    <motion.span
+                      layoutId="nav"
+                      className="absolute left-0 right-0 top-0 bottom-0 bg-slate-4"
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: 1 }}
+                      exit={{ opacity: 0 }}
+                    />
+                  )}
                   {languageMap[language]}
-                </button>
-              </div>
-            );
-          })}
+                </motion.button>
+              );
+            })}
+          </AnimateSharedLayout>
         </div>
         <Tooltip>
           <Tooltip.Trigger className="absolute top-2 right-2 hidden md:block">

package/preview/src/components/icon-button.tsx

@@ -12,7 +12,7 @@ export const IconButton = React.forwardRef<
     {...props}
     ref={forwardedRef}
     className={classnames(
-      'rounded text-gray-11 focus:text-gray-12 ease-in-out transition duration-200 focus:outline-none focus:ring-2 focus:ring-gray-8 hover:text-gray-12',
+      'rounded text-slate-11 focus:text-slate-12 ease-in-out transition duration-200 focus:outline-none focus:ring-2 focus:ring-gray-8 hover:text-slate-12',
       className,
     )}
   >

package/preview/src/components/sidebar.tsx

@@ -5,6 +5,7 @@ import Link from 'next/link';
 import { Heading } from './heading';
 import { useRouter } from 'next/router';
 import * as Collapsible from '@radix-ui/react-collapsible';
+import { AnimateSharedLayout, motion } from 'framer-motion';
 
 type SidebarElement = React.ElementRef<'aside'>;
 type RootProps = React.ComponentPropsWithoutRef<'aside'>;
@@ -15,6 +16,7 @@ interface SidebarProps extends RootProps {
 
 export const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(
   ({ className, navItems, ...props }, forwardedRef) => {
+    const [hovered, setHovered] = React.useState('');
     const { query } = useRouter();
 
     return (
@@ -58,13 +60,18 @@ export const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(
                 />
               </svg>
 
-              <div className="flex items-center">
-                <Heading as="h3" color="white" size="2" weight="medium">
+              <div className="flex items-center text-slate-11 transition ease-in-out duration-200 hover:text-slate-12">
+                <Heading
+                  as="h3"
+                  color="gray"
+                  size="2"
+                  weight="medium"
+                  className="transition ease-in-out duration-200 hover:text-slate-12"
+                >
                   All emails
                 </Heading>
                 {navItems && navItems.length > 0 && (
                   <svg
-                    className="text-slate-11"
                     width="24"
                     height="24"
                     viewBox="0 0 24 24"
@@ -84,51 +91,66 @@ export const Sidebar = React.forwardRef<SidebarElement, Readonly<SidebarProps>>(
               <Collapsible.Content className="relative mt-3">
                 <div className="absolute left-2.5  w-px h-full bg-slate-6" />
 
-                <div className="py-2 flex flex-col gap-1.5 truncate">
-                  {navItems &&
-                    navItems.map((item) => (
-                      <Link key={item} href={`/preview/${item}`}>
-                        <span
-                          className={classnames(
-                            'text-[14px] flex items-center font-medium gap-2 h-8 w-full pl-4 rounded-md text-slate-11',
-                            {
-                              'bg-cyan-3 text-cyan-11': query.slug === item,
-                              'hover:text-slate-12': query.slug !== item,
-                            },
-                          )}
-                        >
-                          {query.slug === item && (
-                            <div className="h-5 bg-cyan-11 w-px absolute left-2.5" />
-                          )}
-                          <svg
-                            className="flex-shrink-0"
-                            width="24"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z"
-                              stroke="currentColor"
-                              strokeOpacity="0.927"
-                              strokeWidth="1.5"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                            <path
-                              d="M18 9.25H13.75V5"
-                              stroke="currentColor"
-                              strokeOpacity="0.927"
-                              strokeWidth="1.5"
-                              strokeLinecap="round"
-                              strokeLinejoin="round"
-                            />
-                          </svg>
-                          {item}
-                        </span>
-                      </Link>
-                    ))}
+                <div className="py-2 flex flex-col truncate">
+                  <AnimateSharedLayout>
+                    {navItems &&
+                      navItems.map((item) => {
+                        const isHovered = hovered === item;
+                        return (
+                          <Link key={item} href={`/preview/${item}`}>
+                            <motion.span
+                              className={classnames(
+                                'text-[14px] flex items-center font-medium gap-2 w-full pl-4 h-8 rounded-md text-slate-11 relative block transition ease-in-out duration-200',
+                                {
+                                  'bg-cyan-3 text-cyan-11': query.slug === item,
+                                  'hover:text-slate-12': query.slug !== item,
+                                },
+                              )}
+                              onHoverStart={() => setHovered(item)}
+                              onHoverEnd={() => setHovered('')}
+                            >
+                              {isHovered && (
+                                <motion.span
+                                  layoutId="sidebar"
+                                  className="absolute left-0 right-0 top-0 bottom-0 rounded-md bg-slate-5"
+                                  initial={{ opacity: 0 }}
+                                  animate={{ opacity: 1 }}
+                                  exit={{ opacity: 0 }}
+                                >
+                                  <div className="bg-cyan-11 w-px absolute top-1 left-2.5 h-6" />
+                                </motion.span>
+                              )}
+                              <svg
+                                className="flex-shrink-0"
+                                width="24"
+                                height="24"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M7.75 19.25H16.25C17.3546 19.25 18.25 18.3546 18.25 17.25V9L14 4.75H7.75C6.64543 4.75 5.75 5.64543 5.75 6.75V17.25C5.75 18.3546 6.64543 19.25 7.75 19.25Z"
+                                  stroke="currentColor"
+                                  strokeOpacity="0.927"
+                                  strokeWidth="1.5"
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                />
+                                <path
+                                  d="M18 9.25H13.75V5"
+                                  stroke="currentColor"
+                                  strokeOpacity="0.927"
+                                  strokeWidth="1.5"
+                                  strokeLinecap="round"
+                                  strokeLinejoin="round"
+                                />
+                              </svg>
+                              {item}
+                            </motion.span>
+                          </Link>
+                        );
+                      })}
+                  </AnimateSharedLayout>
                 </div>
               </Collapsible.Content>
             )}