fix: define component Props type instead of typecasting Astro.props

This surfaces some type errors in props being passed to some components,
particularly in the way Features passes the classes props.

src/components/ui/Background.astro

@@ -1,4 +1,8 @@
 ---
+export interface Props {
+  isDark?: boolean
+}
+
 const { isDark = false } = Astro.props;
 ---
 

src/components/ui/Button.astro

@@ -1,7 +1,7 @@
 ---
 import { Icon } from 'astro-icon/components';
 import { twMerge } from 'tailwind-merge';
-import type { CallToAction } from '~/types';
+import type { CallToAction as Props } from '~/types';
 
 const {
   variant = 'secondary',
@@ -11,7 +11,7 @@ const {
   class: className = '',
   type,
   ...rest
-} = Astro.props as CallToAction;
+} = Astro.props;
 
 const variants = {
   primary: 'btn-primary',

src/components/ui/Form.astro

@@ -1,8 +1,8 @@
 ---
-import type { Form } from '~/types';
+import type { Form as Props } from '~/types';
 import Button from '~/components/ui/Button.astro';
 
-const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props as Form;
+const { inputs, textarea, disclaimer, button = 'Contact us', description = '' } = Astro.props;
 ---
 
 <form>

src/components/ui/Headline.astro

@@ -1,5 +1,5 @@
 ---
-import type { Headline } from "~/types";
+import type { Headline as Props } from "~/types";
 import { twMerge } from "tailwind-merge";
 
 const {
@@ -7,7 +7,7 @@ const {
   subtitle = await Astro.slots.render("subtitle"),
   tagline,
   classes = {},
-} = Astro.props as Headline;
+} = Astro.props;
 
 const {
   container: containerClass = "max-w-3xl",

src/components/ui/ItemGrid.astro

@@ -1,10 +1,10 @@
 ---
+import type { ItemGrid as Props } from '~/types';
 import { twMerge } from 'tailwind-merge';
-import type { ItemGrid } from '~/types';
 import Button from './Button.astro';
 import { Icon } from 'astro-icon/components';
 
-const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props as ItemGrid;
+const { items = [], columns, defaultIcon = '', classes = {} } = Astro.props;
 
 const {
   container: containerClass = '',

src/components/ui/ItemGrid2.astro

@@ -1,7 +1,7 @@
 ---
+import type { ItemGrid as Props } from "~/types";
 import { Icon } from "astro-icon/components";
 import { twMerge } from "tailwind-merge";
-import type { ItemGrid } from "~/types";
 import Button from "./Button.astro";
 
 const {
@@ -9,7 +9,7 @@ const {
   columns,
   defaultIcon = "",
   classes = {},
-} = Astro.props as ItemGrid;
+} = Astro.props;
 
 const {
   container: containerClass = "",

src/components/ui/WidgetWrapper.astro

@@ -1,7 +1,14 @@
 ---
+import type { HTMLTag } from "astro/types";
+import type { Widget } from "~/types";
 import { twMerge } from "tailwind-merge";
 import Background from "./Background.astro";
 
+export interface Props extends Widget {
+  containerClass?: string;
+  ["as"]?: HTMLTag;
+}
+
 const { id, isDark = false, containerClass = "", bg, as = "section" } = Astro.props;
 
 const WrapperTag = as;