Add first i18n stuff

src/app/components/LicenseViolation.tsx

@@ -8,10 +8,12 @@
 import { Button } from "@app/components/ui/button";
 import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
 import { useState } from "react";
+import { useTranslations } from 'next-intl';
 
 export default function LicenseViolation() {
     const { licenseStatus } = useLicenseStatusContext();
     const [isDismissed, setIsDismissed] = useState(false);
+    const t = useTranslations();
 
     if (!licenseStatus || isDismissed) return null;
 
@@ -21,15 +23,14 @@ export default function LicenseViolation() {
             <div className="fixed bottom-0 left-0 right-0 w-full bg-red-500 text-white p-4 text-center z-50">
                 <div className="flex justify-between items-center">
                     <p>
-                        Invalid or expired license keys detected. Follow license
-                        terms to continue using all features.
+                        {t('componentsInvalidKey')}
                     </p>
                     <Button
                         variant={"ghost"}
                         className="hover:bg-yellow-500"
                         onClick={() => setIsDismissed(true)}
                     >
-                        Dismiss
+                        {t('dismiss')}
                     </Button>
                 </div>
             </div>
@@ -46,17 +47,14 @@ export default function LicenseViolation() {
             <div className="fixed bottom-0 left-0 right-0 w-full bg-yellow-500 text-black p-4 text-center z-50">
                 <div className="flex justify-between items-center">
                     <p>
-                        License Violation: This server is using{" "}
-                        {licenseStatus.usedSites} sites which exceeds its
-                        licensed limit of {licenseStatus.maxSites} sites. Follow
-                        license terms to continue using all features.
+                        {t('componentsLicenseViolation', {usedSites: licenseStatus.usedSites, maxSites: licenseStatus.maxSites})}
                     </p>
                     <Button
                         variant={"ghost"}
                         className="hover:bg-yellow-500"
                         onClick={() => setIsDismissed(true)}
                     >
-                        Dismiss
+                        {t('dismiss')}
                     </Button>
                 </div>
             </div>

src/app/components/OrganizationLanding.tsx

@@ -11,6 +11,8 @@ import {
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { ArrowRight, Plus } from "lucide-react";
+import { useTranslations } from 'next-intl';
+
 interface Organization {
     id: string;
     name: string;
@@ -31,31 +33,31 @@ export default function OrganizationLanding({
         setSelectedOrg(orgId);
     };
 
+    const t = useTranslations();
+
     function getDescriptionText() {
         if (organizations.length === 0) {
             if (!disableCreateOrg) {
-                return "You are not currently a member of any organizations. Create an organization to get started.";
+                return t('componentsErrorNoMemberCreate');
             } else {
-                return "You are not currently a member of any organizations.";
+                return t('componentsErrorNoMember');
             }
         }
 
-        return `You're a member of ${organizations.length} ${
-            organizations.length === 1 ? "organization" : "organizations"
-        }.`;
+        return t('componentsMember', {count: organizations.length});
     }
 
     return (
         <Card>
             <CardHeader>
-                <CardTitle>Welcome to Pangolin</CardTitle>
+                <CardTitle>{t('welcome')}</CardTitle>
                 <CardDescription>{getDescriptionText()}</CardDescription>
             </CardHeader>
             <CardContent>
                 {organizations.length === 0 ? (
                     disableCreateOrg ? (
                         <p className="text-center text-muted-foreground">
-                            You are not currently a member of any organizations.
+                            t('componentsErrorNoMember')
                         </p>
                     ) : (
                         <Link href="/setup">
@@ -64,7 +66,7 @@ export default function OrganizationLanding({
                                 size="lg"
                             >
                                 <Plus className="mr-2 h-5 w-5" />
-                                Create an Organization
+                                {t('componentsCreateOrg')}
                             </Button>
                         </Link>
                     )

src/app/components/SupporterMessage.tsx

@@ -3,8 +3,11 @@
 import React from "react";
 import confetti from "canvas-confetti";
 import { Star } from "lucide-react";
+import { useTranslations } from 'next-intl';
 
 export default function SupporterMessage({ tier }: { tier: string }) {
+    const t = useTranslations();
+
     return (
         <div className="relative flex items-center space-x-2 whitespace-nowrap group">
             <span
@@ -31,7 +34,7 @@ export default function SupporterMessage({ tier }: { tier: string }) {
             </span>
             <Star className="w-3 h-3"/>
             <div className="absolute left-1/2 transform -translate-x-1/2 -top-10 hidden group-hover:block  text-primary text-sm rounded-md border shadow-md px-4 py-2 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity">
-                Thank you for supporting Pangolin as a {tier}!
+                {t('componentsSupporterMessage', {tier: tier})}
             </div>
         </div>
     );