componetize a lot of stuff

src/lib/ContactForm.svelte

@@ -1,83 +1,16 @@
 <script lang="ts">
-	import { Note, Captcha } from "$lib/Form";
+	import { Note, Captcha, Form, Meta, TextArea } from "$lib/Form";
 </script>
 
-<form
+<Form action="https://segfautils.projectsegfau.lt/api/form" method="POST" id="contact-form" >
-	action="https://segfautils.projectsegfau.lt/api/form"
-	method="POST"
-	id="contact-form"
->
 	<Note content="Your IP will be logged for anti-abuse measures." icon="i-fa6-solid:lock" />
-	<div class="meta">
+	<Meta inputType="email" inputPlaceholder="Your email" selectType="commentType">
-		<input
-			type="email"
-			name="email"
-			class="form-textbox"
-			placeholder="Your email"
-			required
-		/>
-		<select id="commentType" name="commentType" required class="form-button">
 		<option value="" selected disabled>Select a type of comment</option>
 		<option value="Feedback">Feedback</option>
 		<option value="Suggestion">Suggestion</option>
 		<option value="Question">Question</option>
 		<option value="Bug">Bug</option>
-		</select>
+	</Meta>
-	</div>
+	<TextArea id="comment" name="message" placeholder="Your message" />
-	<textarea
-		id="comment"
-		name="message"
-		rows="4"
-		cols="25"
-		required
-		class="form-textbox"
-		placeholder="Your message"
-	/>
 	<Captcha />
-</form>
+</Form>
-
-<style>
-	form {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-		width: fit-content;
-	}
-
-	.meta {
-		display: flex;
-		align-items: center;
-		flex-direction: row;
-		gap: 1rem;
-	}
-
-	.meta > * {
-		width: 50%;
-	}
-
-	@media screen and (max-width: 450px) {
-		.meta {
-			flex-direction: column;
-			align-items: flex-start;
-			justify-content: center;
-		}
-
-		.meta > * {
-			width: calc(100% - 1rem);
-		}
-
-		.meta > *:nth-child(2) {
-			width: 100%;
-		}
-	}
-
-	.form-textbox {
-		background-color: var(--secondary);
-		color: var(--text);
-		border-radius: 10px;
-		border: none;
-		padding: 0.5rem;
-		font-family: var(--font-primary);
-		outline: none;
-	}
-</style>

src/lib/Form/Form.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    export let action: string;
+    export let method: string;
+    export let id: string;
+</script>
+
+<form
+	{action}
+	{method}
+	{id}
+>
+    <slot />
+</form>
+
+<style>
+    form {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		width: fit-content;
+	}
+
+	:global(.form-button) {
+		background-color: var(--secondary);
+		border: none;
+		border-radius: 10px;
+		padding: 0.5rem;
+		cursor: pointer;
+		color: var(--text);
+		font-family: var(--font-primary);
+		text-decoration: none;
+	}
+
+	:global(.form-button:not(select):hover) {
+		background-color: var(--accent);
+		text-decoration: none;
+		transition: all 0.5s;
+		color: var(--secondary);
+	}
+
+	:global(.form-textbox) {
+		background-color: var(--secondary);
+		color: var(--text);
+		border-radius: 10px;
+		border: none;
+		padding: 0.5rem;
+		font-family: var(--font-primary);
+		outline: none;
+	}
+</style>

src/lib/Form/Meta.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    export let inputType: string;
+    export let inputPlaceholder: string;
+    export let selectType: string;
+</script>
+
+<div class="meta">
+    <input
+        type={inputType}
+        name={inputType}
+        class="form-textbox"
+        placeholder={inputPlaceholder}
+        required
+    />
+    <select name={selectType} required class="form-button">
+        <slot />
+    </select>
+</div>
+
+<style>
+    .meta {
+		display: flex;
+		align-items: center;
+		flex-direction: row;
+		gap: 1rem;
+	}
+
+	.meta > * {
+		width: 50%;
+	}
+
+	@media screen and (max-width: 450px) {
+		.meta {
+			flex-direction: column;
+			align-items: flex-start;
+			justify-content: center;
+		}
+
+		.meta > * {
+			width: calc(100% - 1rem);
+		}
+
+		.meta > *:nth-child(2) {
+			width: 100%;
+		}
+	}
+</style>

src/lib/Form/TextArea.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    export let id: string;
+    export let name: string;
+    export let placeholder: string;
+</script>
+
+<textarea
+    {id}
+    {name}
+    rows="4"
+    cols="25"
+    required
+    class="form-textbox"
+    {placeholder}
+/>

src/lib/Form/index.ts

@@ -1,2 +1,5 @@
 export { default as Note } from "./Note.svelte";
 export { default as Captcha } from "./Captcha.svelte";
+export { default as Form } from "./Form.svelte";
+export { default as Meta } from "./Meta.svelte";
+export { default as TextArea } from "./TextArea.svelte";

src/lib/PubnixForm.svelte

@@ -1,27 +1,14 @@
 <script lang="ts">
-	import { Note, Captcha } from "$lib/Form";
+	import { Note, Captcha, Form, Meta, TextArea } from "$lib/Form";
 </script>
 
-<form
+<Form action="https://segfautils.projectsegfau.lt/api/pubnix" method="POST" id="pubnix-form" >
-	action="https://segfautils.projectsegfau.lt/api/pubnix"
-	method="POST"
-	id="contact-form"
->
 	<Note content="Your IP will be logged for anti-abuse measures." icon="i-fa6-solid:lock" />
-	<div class="meta">
+	<Meta inputType="email" inputPlaceholder="Your email" selectType="actionType">
-		<input
-			type="email"
-			name="email"
-			class="form-textbox"
-			placeholder="Your email"
-			required
-		/>
-		<select id="actionType" name="actionType" required class="form-button">
 		<option value="" selected disabled>Select a type of action</option>
         <option value="Feedback">Sign up</option>
         <option value="Suggestion">Delete user account</option>
-		</select>
+	</Meta>
-	</div>
 	<input
 		type="text"
 		name="sshkey"
@@ -29,60 +16,6 @@
 		placeholder="Your SSH public key"
 		required
 	/>
-	<textarea
+	<TextArea id="comment" name="message" placeholder="The reason you want to join the pubnix." />
-		id="comment"
-		name="message"
-		rows="4"
-		cols="25"
-		required
-		class="form-textbox"
-		placeholder="The reason you want to join the pubnix."
-	/>
 	<Captcha />
-</form>
+</Form>
-
-<style>
-	form {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-		width: fit-content;
-	}
-
-	.meta {
-		display: flex;
-		align-items: center;
-		flex-direction: row;
-		gap: 1rem;
-	}
-
-	.meta > * {
-		width: 50%;
-	}
-
-	@media screen and (max-width: 450px) {
-		.meta {
-			flex-direction: column;
-			align-items: flex-start;
-			justify-content: center;
-		}
-
-		.meta > * {
-			width: calc(100% - 1rem);
-		}
-
-		.meta > *:nth-child(2) {
-			width: 100%;
-		}
-	}
-
-	.form-textbox {
-		background-color: var(--secondary);
-		color: var(--text);
-		border-radius: 10px;
-		border: none;
-		padding: 0.5rem;
-		font-family: var(--font-primary);
-		outline: none;
-	}
-</style>

src/lib/app.css

@@ -60,21 +60,3 @@ a {
 a:hover {
 	filter: brightness(125%);
 }
-
-.form-button {
-	background-color: var(--secondary);
-	border: none;
-	border-radius: 10px;
-	padding: 0.5rem;
-	cursor: pointer;
-	color: var(--text);
-	font-family: var(--font-primary);
-	text-decoration: none;
-}
-
-.form-button:not(select):hover {
-	background-color: var(--accent);
-	text-decoration: none;
-	transition: all 0.5s;
-	color: var(--secondary);
-}