Skip to content
This repository was archived by the owner on Oct 28, 2025. It is now read-only.

Commit c076b36

Browse files
committed
(#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.
1 parent c6c501d commit c076b36

File tree

1 file changed

+37
-3
lines changed

1 file changed

+37
-3
lines changed
Lines changed: 37 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,41 @@
11
---
2-
const { name, defaultValue } = Astro.props;
2+
import { z } from 'zod';
3+
4+
// Define the schema
5+
const dynamicCodeBlockInputSchema = z.object({
6+
name: z.string(),
7+
defaultValue: z.string(),
8+
label: z.string().optional()
9+
});
10+
11+
// Define the type
12+
type DynamicCodeBlockInput = z.infer<typeof dynamicCodeBlockInputSchema>;
13+
14+
interface Props {
15+
name: DynamicCodeBlockInput['name'],
16+
defaultValue: DynamicCodeBlockInput['defaultValue']
17+
label?: DynamicCodeBlockInput['label']
18+
}
19+
20+
const { name, defaultValue, label } = Astro.props;
21+
22+
const content = {
23+
name,
24+
defaultValue,
25+
label
26+
};
27+
28+
// Validate the content
29+
dynamicCodeBlockInputSchema.parse(content);
330
---
431

5-
<div class="col-lg-6">
6-
<input class="form-control mb-3 dynamic-code-block-input" type="text" name={name} data-default-value={defaultValue} placeholder={defaultValue} />
32+
<div class="row align-items-center mb-3">
33+
{label && (
34+
<div class="col-lg-auto pe-lg-0">
35+
<label for={name} class="col-form-label">{label}:</label>
36+
</div>
37+
)}
38+
<div class="col-lg-6">
39+
<input id={name} class="form-control dynamic-code-block-input" type="text" name={name} data-default-value={defaultValue} placeholder={defaultValue} />
40+
</div>
741
</div>

0 commit comments

Comments
 (0)