(#17) Add a label and validation

This adds an optional label that can be passed in and displayed with
the input. In addtion, some validation has been added to where if one
of the required fields are not passed in, it will throw an error in
Astro.

Author: st3phhays

src/components/dynamicCodeBlock/DynamicCodeBlockInput.astro

@@ -1,7 +1,41 @@
 ---
-const { name, defaultValue } = Astro.props;
+import { z } from 'zod';
+
+// Define the schema
+const dynamicCodeBlockInputSchema = z.object({
+    name: z.string(),
+    defaultValue: z.string(),
+    label: z.string().optional()
+});
+
+// Define the type
+type DynamicCodeBlockInput = z.infer<typeof dynamicCodeBlockInputSchema>;
+
+interface Props {
+    name: DynamicCodeBlockInput['name'],
+    defaultValue: DynamicCodeBlockInput['defaultValue']
+    label?: DynamicCodeBlockInput['label']
+}
+
+const { name, defaultValue, label } = Astro.props;
+
+const content = {
+    name,
+    defaultValue,
+    label
+};
+
+// Validate the content
+dynamicCodeBlockInputSchema.parse(content);
 ---
 
-<div class="col-lg-6">
-    <input class="form-control mb-3 dynamic-code-block-input" type="text" name={name} data-default-value={defaultValue} placeholder={defaultValue} />
+<div class="row align-items-center mb-3">
+    {label && (
+        <div class="col-lg-auto pe-lg-0">
+            <label for={name} class="col-form-label">{label}:</label>
+        </div>
+    )}
+    <div class="col-lg-6">
+        <input id={name} class="form-control dynamic-code-block-input" type="text" name={name} data-default-value={defaultValue} placeholder={defaultValue} />
+    </div>
 </div>