Fix eslint and types error

jonaschlegel · Sep 30, 2024 · 7b94862 · 7b94862
1 parent 5c971da
commit 7b94862
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/app/components/Navbar.tsx b/app/components/Navbar.tsx
@@ -49,14 +49,14 @@ const Navbar = () => {
       >
         <ul className="flex w-full flex-col items-center gap-6 lg:flex-row lg:gap-8">
           {navLinks.map((navItem) => (
-            <li className="list-none" key={navItem.name}>
+            <li className="list-none" key={`nav-${navItem.name}`}>
               <Button href={navItem.href} onClick={handleToggleMenu}>
                 {navItem.name}
               </Button>
             </li>
           ))}
           {externalLinks.map((link) => (
-            <li className="list-none" key={link.name}>
+            <li className="list-none" key={`external-${link.name}`}>
               <a
                 href={link.href}
                 target="_blank"

diff --git a/app/components/ServiceCard.tsx b/app/components/ServiceCard.tsx
@@ -30,19 +30,20 @@ const ServiceCard: FC<ServiceCardProps> = ({
           <p className="mt-2 text-sm text-neutral-400 md:text-base">
             {description}
           </p>
-          {options && (
-            <ul className="mt-2 list-disc pl-5 text-sm text-neutral-400">
-              {options.map((option) => (
-                <li key={option}>{option}</li>
-              ))}
-            </ul>
-          )}
+          <ul className="mt-2 list-disc pl-5 text-sm text-neutral-400">
+            {options.map((option) => (
+              <li key={`option-${option}`}>{option}</li>
+            ))}
+          </ul>
           {limitedProjects.length > 0 && (
             <div className="mt-6 flex items-center">
               <h3 className="font-semibold mr-4">Related Projects:</h3>
               <div className="flex space-x-4">
                 {limitedProjects.map((project) => (
-                  <Link key={project.id} href={`/projects/${project.slug}`}>
+                  <Link
+                    key={`project-${project.id}`}
+                    href={`/projects/${project.slug}`}
+                  >
                     <p className="text-white hover:underline">{project.name}</p>
                   </Link>
                 ))}

diff --git a/app/data/content.ts b/app/data/content.ts
@@ -22,7 +22,7 @@ import webDevelopment from '../images/services/web-development.png';
 export const navLinks = [
   { name: 'Featured Projects', href: '/#project' },
   { name: 'Services', href: '/#service' },
-];
+] as const;
 
 export const heroSectionData = {
   heading: 'Want better visual science communication?',
@@ -196,4 +196,4 @@ export const footerdata = {
     },
     { Icon: BsGithub, href: 'https://github.com/jonaschlegel' },
   ],
-};
+} as const;
diff --git a/types/global.d.ts b/types/global.d.ts
@@ -1,5 +1,6 @@
 import type { StaticImageData } from 'next/image';
 import type { JSX } from 'react';
+import type { UrlObject } from 'url';
 
 type ProjectType = {
   id: string;
@@ -38,7 +39,7 @@ type StatType = {
 
 type SocialType = {
   Icon: React.ComponentType;
-  href: string;
+  href: UrlObject;
 };
 
 declare module '*.mdx' {