fix: create components

Author: dwaldeck-light-it

src/components/ui/icons/icons.tsx

@@ -26,6 +26,7 @@ const AVAILABLE_ICONIFY_ICONS = {
   Eye: "eye",
   EyeOff: "eye-off",
   Lock: "lock",
+  Ban: "ban",
 };
 
 export const initializeIcons = () => {

src/routes/_private/-components/feature-not-available.tsx

@@ -0,0 +1,12 @@
+/* eslint-disable i18next/no-literal-string */
+import { Icons } from "@/components/ui";
+
+export const FeatureNotAvailable = () => {
+  return (
+    <div className="flex min-h-screen w-full flex-col items-center justify-center text-center">
+      <Icons.Ban className="text-muted-foreground h-14 w-14" />
+
+      <h2 className="mb-2 text-xl font-semibold">Feature not available</h2>
+    </div>
+  );
+};

src/routes/_private/-components/welcome-message.tsx

@@ -0,0 +1,8 @@
+/* eslint-disable i18next/no-literal-string */
+export const WelcomeMessage = () => {
+  return (
+    <div className="flex min-h-screen w-full flex-col items-center justify-center text-center">
+      <h2 className="mb-2 text-2xl font-semibold">Welcome to the app, beta tester!</h2>
+    </div>
+  );
+};

src/routes/_private/page.tsx

@@ -1,21 +1,24 @@
 import { createFileRoute } from "@tanstack/react-router";
-import { useFeatureFlagEnabled } from "posthog-js/react";
-import { usePostHog } from "posthog-js/react";
+import { useFeatureFlagEnabled, usePostHog } from "posthog-js/react";
+
+import { FeatureNotAvailable } from "./-components/feature-not-available";
+import { WelcomeMessage } from "./-components/welcome-message";
 
 const HomePage = () => {
   const posthog = usePostHog();
   const showWelcomeMessage = useFeatureFlagEnabled("feature-a");
+
   posthog?.identify("daniela@test.com", {
     is_beta_tester: false,
   });
 
-  return (
-    <div className="flex flex-col gap-4">
-      <h3 className="text-lg font-medium">
-        {showWelcomeMessage ? "Welcome to the app!" : "Feature not available"}
-      </h3>
-    </div>
-  );
+  if (!showWelcomeMessage) {
+    return <FeatureNotAvailable />;
+  }
+
+  return <WelcomeMessage />;
 };
 
-export const Route = createFileRoute("/_private/")({ component: HomePage });
+export const Route = createFileRoute("/_private/")({
+  component: HomePage,
+});