problem: no validate of new rocket name

src/lib/types.ts

@@ -0,0 +1,24 @@
+import type { NDKEvent } from '@nostr-dev-kit/ndk';
+
+export class RocketState {
+	IgnitionID: string;
+	Name: string;
+	constructor(event?: NDKEvent) {
+		if (event) {
+			if (!event.dTag) {
+				throw new Error('invalid rocket name, no d tag found on event');
+			}
+            validateRocketName(event.dTag)
+			this.Name = event.dTag;
+		}
+	}
+}
+
+function validateRocketName(name:string) {
+    if (name.length < 4) {
+        throw new Error("name is too short")
+    }
+    if (name.length > 20) {
+        throw new Error("name is too long")
+    }
+}

src/routes/rockets/new/+page.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { Input } from '$lib/components/ui/input/index.js';
+	import { Button } from '@/components/ui/button';
+	import { RocketState } from '@/types';
+	import { NDKEvent } from '@nostr-dev-kit/ndk';
+	import SidePanelLayout from '../../../layouts/SidePanelLayout.svelte';
+
+    let rocketName:string;
+    $:err = undefined;
+
+    function validate() {
+        let e = new NDKEvent()
+        e.dTag = rocketName
+        try {
+            new RocketState(e)
+        } catch(_err) {
+            console.log(_err)
+            err = _err
+            return 
+        }
+        err = undefined
+        console.log(new RocketState(e))
+        
+    }
+    
+</script>
+
+<SidePanelLayout>
+	<div slot="content">
+        <div class="flex w-full max-w-sm flex-col gap-1.5">
+            <Input type="email" id="email-2" placeholder="Name" bind:value={rocketName} />
+            <p class="text-sm text-muted-foreground">Enter the name of your new Rocket</p>
+            <Button on:click={validate} type="submit">Publish</Button>
+            <div>{err?err:""}</div>
+          </div>
+	</div>
+</SidePanelLayout>