Use shared Astro UI components across preview pages (#2724)

preview/pages/2-step-verification.astro

@@ -1,11 +1,13 @@
 ---
-import SingleLayout from '@shared/layouts/SingleLayout.astro';
-import Button from '@shared/components/Button.astro';
-import flags from '@data/flags.json';
-
 // Liquid: {% if country.code == 'US' %} selected{% endif %} — flags.json entries
 // have no `code` property, so the reference renders value="" and never `selected`.
 // We mirror that output exactly.
+
+import FormFooter from '@shared/components/ui/FormFooter.astro';
+import SingleLayout from '@shared/layouts/SingleLayout.astro';
+import Button from '@shared/components/ui/Button.astro';
+import FormGroup from '@shared/components/ui/FormGroup.astro';
+import flags from '@data/flags.json';
 ---
 
 <SingleLayout title="2-Step Verification">
@@ -19,29 +21,27 @@ import flags from '@data/flags.json';
 		<div class="card-body">
 			<h2 class="card-title text-center mb-4">2-Step Verification</h2>
 
-			<div class="mb-3">
-				<label class="form-label">Country</label>
+			<FormGroup label="Country">
 				<select class="form-select">
 					{flags.map((country) => <option value="">{country.name}</option>)}
 				</select>
-			</div>
+			</FormGroup>
 
-			<div class="mb-4">
-				<label class="form-label">Your Phone Number</label>
+			<FormGroup label="Your Phone Number" class="mb-4">
 				<div class="input-group">
 					<span class="input-group-text">+1</span>
 					<input type="text" class="form-control" placeholder="Enter phone number" />
 				</div>
-			</div>
+			</FormGroup>
 
 			<div class="text-secondary">
 				Security is critical in Tabler. to help keep your account safe, we'll
 				text you a verification code when you sign in on a new device
 			</div>
 
-			<div class="form-footer">
+			<FormFooter>
 				<Button element="button" type="submit" text="Send code" block color="primary" />
-			</div>
+			</FormFooter>
 		</div>
 	</form>
 </SingleLayout>