use i18n for page text

messages/en.json

@@ -13,5 +13,9 @@
 	"login_error_email_incorrect": "Email is incorrect",
 	"login_error_password_incorrect": "Password is incorrect",
 	"login_error_email_inuse": "Email is already in use",
-	"login_error_user_not_found": "The user could not be found"
+	"login_error_user_not_found": "The user could not be found",
+	"sms_prompt": "Send a Message",
+	"sms_label_phone": "Phone Number",
+	"sms_label_message": "Message",
+	"sms_button_submit": "Send Message"
 }

src/app.d.ts

@@ -14,4 +14,4 @@ declare global {
 	}
 }
 
-export {};
+export {};

src/lib/components/DataInput/Textarea.stories.svelte

@@ -33,6 +33,9 @@
 			label: {
 				control: 'text',
 			},
+			placeholder: {
+				control: 'text',
+			},
 			size: {
 				control: 'select',
 				options: ['xs', 'sm', '-', 'lg'],

src/lib/components/DataInput/Textarea.svelte

@@ -10,6 +10,7 @@
 		form?: string;
 		label?: string | Snippet;
 		name?: string;
+		placeholder?: string;
 		size?: DaisySize;
 	};
 	let { bordered, color, error, label, size, ...props }: Props = $props();

src/routes/app/sms/+page.server.ts

@@ -52,4 +52,4 @@ export const actions = {
 			success: true,
 		};
 	},
-} satisfies Actions;
+} satisfies Actions;

src/routes/app/sms/+page.svelte

@@ -4,6 +4,7 @@
 	import { Textarea, TextInput } from '$lib/components/DataInput';
 	import { fade } from 'svelte/transition';
 	import type { ActionData } from './$types';
+	import { messages } from '$lib/i18n';
 
 	type Props = {
 		form: ActionData;
@@ -11,12 +12,12 @@
 	let { form }: Props = $props();
 </script>
 
-{#snippet PhoneIcon()}
+{#snippet PhoneLabel()}
-	<i class="fi fi-sr-phone-flip"></i>
+	<i class="fi fi-sr-phone-flip"></i> {messages.sms_label_phone()}
 {/snippet}
 
 {#snippet MessageLabel()}
-	<i class="fi fi-sr-comment-alt"></i> Message
+	<i class="fi fi-sr-comment-alt"></i> {messages.sms_label_message()}
 {/snippet}
 
 {#snippet alert(message: string)}
@@ -27,9 +28,9 @@
 {/snippet}
 
 <div class="page" transition:fade>
-	<div class="card bg-base-200 p-4 shadow-xl">
+	<div class="card bg-base-200 px-4 pt-4 shadow-xl">
 		<div class="card-title justify-center">
-			<h2 class="text-2xl font-semibold">Send a Message</h2>
+			<h2 class="text-2xl font-semibold">{messages.sms_prompt()}</h2>
 			{#if form?.error}
 				{@render alert(form.error)}
 			{/if}
@@ -39,22 +40,22 @@
 				<TextInput
 					type="tel"
 					name="phone"
-					start={PhoneIcon}
+					label={PhoneLabel}
-					placeholder="Phone"
+					placeholder="XXX-XXX-XXXX"
 					bordered
 					fade
 				/>
 				<Textarea
-					color="primary"
 					label={MessageLabel}
 					size="lg"
 					error={form?.error}
 					name="message"
+					placeholder="..."
 					form="sms"
 				/>
 			</div>
-			<div class="card-actions justify-center px-8">
+			<div class="card-actions justify-center px-8 pb-4">
-				<Button color="primary" type="submit" full>Send Message</Button>
+				<Button outline type="submit" full>{messages.sms_button_submit()}</Button>
 			</div>
 		</form>
 	</div>
@@ -64,4 +65,4 @@
 	.page {
 		@apply flex flex-col items-center justify-around gap-24 py-[10%];
 	}
-</style>
+</style>