Make all props used in components listed explicitly

src/components/atoms/button.astro

@@ -3,7 +3,7 @@ export interface Props {
   href: string;
 }
 
-const { props } = Astro;
+const { href } = Astro.props;
 
 const classes = {
   main: 'inline-flex items-center px-4 h-10 text-base font-medium rounded-md shadow-sm text-white bg-primary-600 select-none cursor-pointer',
@@ -13,4 +13,4 @@ const classes = {
 };
 ---
 
-<a href={props.href} class:list={[classes.main, classes.hover, classes.active, classes.focus]}><slot /></a>
+<a href={href} class:list={[classes.main, classes.hover, classes.active, classes.focus]}><slot /></a>

src/components/atoms/icon-button.astro

@@ -1,11 +1,14 @@
 ---
+import type { IconName } from '@/types/icon';
+
 import Icon from './icon';
 
 type IconButtonSize = 'small' | 'large';
 
-export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {
-  icon: string;
-  name: string;
+export interface Props {
+  icon: IconName;
+  target?: astroHTML.JSX.AnchorHTMLAttributes['target'];
+  href: string;
   size: IconButtonSize;
 }
 
@@ -14,11 +17,12 @@ const sizeMap: Record<IconButtonSize, string> = {
   large: 'w-9 h-9',
 };
 
-const { icon, name, size, ...props } = Astro.props;
+const { icon, href, target, size } = Astro.props;
 ---
 
 <a
-  {...props}
+  href={href}
+  target={target}
   class:list={[
     'flex',
     'items-center',
@@ -29,12 +33,10 @@ const { icon, name, size, ...props } = Astro.props;
     'active:translate-y-px',
     'focus:outline-none',
     'focus:ring-2',
+    'focus:ring-offset-2',
+    'focus:ring-primary-500',
     sizeMap[size],
-    props.class,
   ]}
-  tabindex="-1"
 >
-  <button class:list={['flex', 'items-center', 'justify-center', 'w-full', 'h-full']}>
-    <Icon client:load name={icon} size={16} />
-  </button>
+  <Icon client:load name={icon} size={16} />
 </a>

src/components/atoms/labelled-value.astro

@@ -1,13 +1,13 @@
 ---
-export interface Props extends astroHTML.JSX.HTMLAttributes {
+export interface Props {
   label: string;
   value: string;
 }
 
-const { label, value, ...props } = Astro.props;
+const { label, value } = Astro.props;
 ---
 
-<div {...props} class:list={['text-base', props.class]}>
+<div class="text-base">
   <span class="font-medium text-gray-700">{label}:</span>
   <span class="font-normal text-gray-500">{value}</span>
 </div>

src/components/atoms/section-card.astro

@@ -1,7 +1 @@
----
-export interface Props extends astroHTML.JSX.HTMLAttributes {}
-
-const { props } = Astro;
----
-
-<div {...props} class:list={['p-8 bg-white rounded-2xl shadow-md', props.class]}><slot /></div>
+<div class="p-8 bg-white rounded-2xl shadow-md"><slot /></div>

src/components/atoms/sidebar-item.astro

@@ -1,24 +1,23 @@
 ---
-import type { Icon as IconName } from '@/types/icon';
+import type { IconName } from '@/types/icon';
 
 import Icon from './icon';
 
-export interface Props extends astroHTML.JSX.ButtonHTMLAttributes {
+export interface Props {
   icon: IconName;
   active?: boolean;
 }
 
-const { props } = Astro;
+const { icon, active } = Astro.props;
 ---
 
 <button
   type="button"
   class:list={[
     `inline-flex justify-center items-center h-10 w-10 rounded-lg transition hover:bg-primary-600`,
-    props.active && 'bg-primary-600',
-    props.class,
+    active && 'bg-primary-600',
   ]}
 >
-  <Icon client:load name={props.icon} size={20} color={props.active ? 'white' : 'gray'} />
+  <Icon client:load name={icon} size={20} color={active ? 'white' : 'gray'} />
   <slot />
 </button>

src/components/atoms/skill-level-tile.astro

@@ -1,9 +1,11 @@
 ---
-export interface Props extends astroHTML.JSX.HTMLAttributes {
+export interface Props {
   skillLevel: number;
   tileLevel: number;
 }
+
 const { skillLevel, tileLevel } = Astro.props;
+
 const isFilled = skillLevel >= tileLevel;
 ---
 

src/components/organisms/sidebar.astro

@@ -1,9 +1,3 @@
----
-export interface Props extends astroHTML.JSX.HTMLAttributes {}
-
-const { props } = Astro;
----
-
-<nav class:list={['flex flex-col w-max p-2 rounded-lg gap-2 bg-white shadow-md', props.class]}>
+<nav class="flex flex-col w-max p-2 rounded-lg gap-2 bg-white shadow-md">
   <slot />
 </nav>

src/components/organisms/skill-level.astro

@@ -1,14 +1,15 @@
 ---
 import SkillLevelTile from '@/atoms/skill-level-tile.astro';
 
-export interface Props extends astroHTML.JSX.HTMLAttributes {
+export interface Props {
   skillLevel: number;
 }
+
 const { skillLevel } = Astro.props;
 
-const LEVELS = [1, 2, 3, 4, 5];
+const levels = [1, 2, 3, 4, 5];
 ---
 
 <div class:list={['flex', 'gap-1']}>
-  {LEVELS.map((tileLevel) => <SkillLevelTile tileLevel={tileLevel} skillLevel={skillLevel} />)}
+  {levels.map((tileLevel) => <SkillLevelTile tileLevel={tileLevel} skillLevel={skillLevel} />)}
 </div>

src/components/organisms/skill.astro

@@ -5,19 +5,17 @@ import type { LevelledSkill } from '@/types/skills-section';
 
 import SkillLevel from './skill-level.astro';
 
-export interface Props extends astroHTML.JSX.HTMLAttributes {
-  levelledSkill: LevelledSkill;
-}
+export interface Props extends LevelledSkill {}
 
-const { levelledSkill, ...props } = Astro.props;
+const { url, icon, iconColor, name, level } = Astro.props;
 ---
 
-<div class:list={['flex', 'flex-col', 'gap-2']} {...props}>
+<div class:list={['flex', 'flex-col', 'gap-2']}>
   <div class:list={['flex', 'gap-2', 'h-5']}>
-    <a href={levelledSkill.url} target="_blank" rel="noopener noreferrer">
-      <Icon client:load name={levelledSkill.icon} color={levelledSkill.iconColor} size={20} />
+    <a href={url} target="_blank" rel="noopener noreferrer">
+      <Icon client:load name={icon} color={iconColor} size={20} />
     </a>
-    <Typography variant="tile-subtitle" class="text-gray-700">{levelledSkill.name}</Typography>
+    <Typography variant="tile-subtitle" class="text-gray-700">{name}</Typography>
   </div>
-  <SkillLevel skillLevel={levelledSkill.level} />
+  <SkillLevel skillLevel={level} />
 </div>

src/pages/playground/icon-button.astro

@@ -3,8 +3,8 @@ import IconButton from '@/atoms/icon-button.astro';
 ---
 
 <div class:list={['p-5', 'flex', 'flex-col', 'gap-2']}>
-  <IconButton icon="fa6-brands:facebook-f" name="Facebook" size="small" href="https://facebook.com/" target="_blank" />
-  <IconButton icon="fa6-brands:github" name="GitHub" size="small" href="https://github.com/" target="_blank" />
-  <IconButton icon="fa6-brands:linkedin-in" name="LinkedIn" size="large" href="https://linkedin.com/" target="_blank" />
-  <IconButton icon="fa6-brands:twitter" name="Twitter" size="large" href="https://twitter.com/" target="_blank" />
+  <IconButton icon="fa6-brands:facebook-f" size="small" href="#" />
+  <IconButton icon="fa6-brands:github" size="small" href="#" />
+  <IconButton icon="fa6-brands:linkedin-in" size="large" href="#" />
+  <IconButton icon="fa6-brands:twitter" size="large" href="#" />
 </div>

src/pages/playground/skill.astro

@@ -11,4 +11,4 @@ const levelledSkill: LevelledSkill = {
 };
 ---
 
-<Skill levelledSkill={levelledSkill} />
+<Skill {...levelledSkill} />