@allbluecn/web-app 0.9.4 → 0.10.0

package/src/components/settings/personal-team/team/team-member-list.tsx

@@ -11,7 +11,6 @@ import {
   UserCheck,
 } from "lucide-react"
 import { useState } from "react"
-import { useTranslation } from "react-i18next"
 import { cn } from "@/lib/utils"
 import { formatDate } from "@/lib/datetime"
 import { useTimezone } from "@/providers/timezone-provider"
@@ -53,6 +52,7 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { Separator } from "@/components/ui/separator"
+import { m } from "@/paraglide/messages.js";
 
 export interface TeamMember {
   id: string
@@ -85,23 +85,31 @@ export interface TeamMemberListProps {
   showUsage?: boolean
 }
 
-function formatLastActive(date: Date | undefined, timezone: string, t: (key: string, params?: Record<string, unknown>) => string): string {
-  if (!date) return t("team.never")
+function formatLastActive(date: Date | undefined, timezone: string): string {
+  if (!date) return m.settings_team_never()
   const now = Date.now()
   const diff = now - date.getTime()
   const minutes = Math.floor(diff / 60_000)
   const hours = Math.floor(minutes / 60)
   const days = Math.floor(hours / 24)
 
-  if (minutes < 1) return t("team.justNow")
-  if (minutes < 60) return t("team.minutesAgo", { count: minutes })
-  if (hours < 24) return t("team.hoursAgo", { count: hours })
-  if (days < 7) return t("team.daysAgo", { count: days })
+  if (minutes < 1) return m.settings_team_justNow()
+  if (minutes < 60) return m.settings_team_minutesAgo({ count: minutes })
+  if (hours < 24) return m.settings_team_hoursAgo({ count: hours })
+  if (days < 7) return m.settings_team_daysAgo({ count: days })
   return formatDate(date, timezone, "MMM d, yyyy")
 }
 
-function getRoleLabel(role: TeamMember["role"], t: (key: string) => string): string {
-  return t(`team.role.${role}`)
+const ROLE_LABELS: Record<string, () => string> = {
+  owner: m.settings_team_role_owner,
+  admin: m.settings_team_role_admin,
+  member: m.settings_team_role_member,
+  viewer: m.settings_team_role_viewer,
+  guest: m.settings_team_role_guest,
+}
+
+function getRoleLabel(role: TeamMember["role"]): string {
+  return ROLE_LABELS[role]?.() ?? role
 }
 
 function formatNumber(num: number): string {
@@ -153,7 +161,6 @@ export default function TeamMemberList({
   showFilters = true,
   showUsage = false,
 }: TeamMemberListProps) {
-  const { t } = useTranslation("settings")
   const timezone = useTimezone()
   const [searchQuery, setSearchQuery] = useState("")
   const [roleFilter, setRoleFilter] = useState<string>("all")
@@ -190,9 +197,9 @@ export default function TeamMemberList({
       <CardHeader>
         <div className="flex flex-col gap-4">
           <div className="flex flex-col gap-1">
-            <CardTitle>{t("team.title")}</CardTitle>
+            <CardTitle>{m.settings_team_title()}</CardTitle>
             <CardDescription>
-              {t("team.memberCount", { count: members.length })}
+              {m.settings_team_memberCount({ count: members.length })}
             </CardDescription>
           </div>
           {showSearch && (
@@ -217,7 +224,7 @@ export default function TeamMemberList({
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                   setSearchQuery(e.target.value)
                 }
-                placeholder={t("team.searchPlaceholder")}
+                placeholder={m.settings_team_searchPlaceholder()}
                 type="search"
                 value={searchQuery}
               />
@@ -227,26 +234,26 @@ export default function TeamMemberList({
             <div className="flex flex-wrap gap-2">
               <Select onValueChange={setRoleFilter} value={roleFilter}>
                 <SelectTrigger className="w-full md:w-[140px]">
-                  <SelectValue placeholder={t("team.allRoles")} />
+                  <SelectValue placeholder={m.settings_team_allRoles()} />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="all">{t("team.allRoles")}</SelectItem>
-                  <SelectItem value="owner">{t("team.role.owner")}</SelectItem>
-                  <SelectItem value="admin">{t("team.role.admin")}</SelectItem>
-                  <SelectItem value="member">{t("team.role.member")}</SelectItem>
-                  <SelectItem value="viewer">{t("team.role.viewer")}</SelectItem>
-                  <SelectItem value="guest">{t("team.role.guest")}</SelectItem>
+                  <SelectItem value="all">{m.settings_team_allRoles()}</SelectItem>
+                  <SelectItem value="owner">{m.settings_team_role_owner()}</SelectItem>
+                  <SelectItem value="admin">{m.settings_team_role_admin()}</SelectItem>
+                  <SelectItem value="member">{m.settings_team_role_member()}</SelectItem>
+                  <SelectItem value="viewer">{m.settings_team_role_viewer()}</SelectItem>
+                  <SelectItem value="guest">{m.settings_team_role_guest()}</SelectItem>
                 </SelectContent>
               </Select>
               <Select onValueChange={setStatusFilter} value={statusFilter}>
                 <SelectTrigger className="w-full md:w-[140px]">
-                  <SelectValue placeholder={t("team.allStatuses")} />
+                  <SelectValue placeholder={m.settings_team_allStatuses()} />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="all">{t("team.allStatuses")}</SelectItem>
-                  <SelectItem value="active">{t("team.status.active")}</SelectItem>
-                  <SelectItem value="invited">{t("team.status.invited")}</SelectItem>
-                  <SelectItem value="suspended">{t("team.status.suspended")}</SelectItem>
+                  <SelectItem value="all">{m.settings_team_allStatuses()}</SelectItem>
+                  <SelectItem value="active">{m.settings_team_status_active()}</SelectItem>
+                  <SelectItem value="invited">{m.settings_team_status_invited()}</SelectItem>
+                  <SelectItem value="suspended">{m.settings_team_status_suspended()}</SelectItem>
                 </SelectContent>
               </Select>
             </div>
@@ -264,15 +271,15 @@ export default function TeamMemberList({
                 {searchQuery ||
                 roleFilter !== "all" ||
                 statusFilter !== "all"
-                  ? t("team.noMatch")
-                  : t("team.noMembers")}
+                  ? m.settings_team_noMatch()
+                  : m.settings_team_noMembers()}
               </EmptyTitle>
               <EmptyDescription>
                 {searchQuery ||
                 roleFilter !== "all" ||
                 statusFilter !== "all"
-                  ? t("team.tryAdjustFilters")
-                  : t("team.inviteMembers")}
+                  ? m.settings_team_tryAdjustFilters()
+                  : m.settings_team_inviteMembers()}
               </EmptyDescription>
             </EmptyHeader>
           </Empty>
@@ -302,7 +309,7 @@ export default function TeamMemberList({
                         </span>
                         {isCurrentUser && (
                           <Badge className="text-xs" variant="secondary">
-                            {t("team.you")}
+                            {m.settings_team_you()}
                           </Badge>
                         )}
                         <Badge
@@ -310,23 +317,23 @@ export default function TeamMemberList({
                           variant={getRoleBadgeVariant(member.role)}
                         >
                           <RoleIcon className="mr-1 size-3" />
-                          {getRoleLabel(member.role, t)}
+                          {getRoleLabel(member.role)}
                         </Badge>
                         {member.status === "invited" && (
                           <Badge className="text-xs" variant="outline">
-                            {t("team.status.invited")}
+                            {m.settings_team_status_invited()}
                           </Badge>
                         )}
                         {member.status === "suspended" && (
                           <Badge className="text-xs" variant="destructive">
-                            {t("team.status.suspended")}
+                            {m.settings_team_status_suspended()}
                           </Badge>
                         )}
                       </div>
                       <p className="flex flex-wrap items-center gap-x-2 text-muted-foreground text-sm">
                         <span>{member.email}</span>
                         <span className="text-xs">
-                          {t("team.joinedAt")}{" "}
+                          {m.settings_team_joinedAt()}{" "}
                           {formatDate(member.joinedAt, timezone, "MMM d, yyyy")}
                         </span>
                       </p>
@@ -335,8 +342,8 @@ export default function TeamMemberList({
                           <>
                             <span aria-hidden="true">•</span>
                             <span>
-                              {t("team.lastActiveAt")}{" "}
-                              {formatLastActive(member.lastActive, timezone, t)}
+                              {m.settings_team_lastActiveAt()}{" "}
+                              {formatLastActive(member.lastActive, timezone)}
                             </span>
                           </>
                         )}
@@ -345,15 +352,11 @@ export default function TeamMemberList({
                             <span aria-hidden="true">•</span>
                             <span>
                               {formatNumber(member.aiUsage.tokens)}{" "}
-                              {t("team.tokens", {
-                                count: formatNumber(member.aiUsage.tokens),
-                              })}
+                              {m.team_tokens({ count: formatNumber(member.aiUsage.tokens),  })}
                             </span>
                             <span aria-hidden="true">•</span>
                             <span>
-                              {t("team.sessions", {
-                                count: member.aiUsage.sessions,
-                              })}
+                              {m.settings_team_sessions({ count: member.aiUsage.sessions })}
                             </span>
                           </>
                         )}
@@ -363,7 +366,7 @@ export default function TeamMemberList({
                       <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                           <Button
-                            aria-label={t("team.moreActions")}
+                            aria-label={m.settings_team_moreActions()}
                             size="icon"
                             type="button"
                             variant="ghost"
@@ -390,7 +393,7 @@ export default function TeamMemberList({
                               }
                             >
                               <Shield className="size-4" />
-                              {t("team.promoteToAdmin")}
+                              {m.settings_team_promoteToAdmin()}
                             </DropdownMenuItem>
                           )}
                           {member.role === "admin" && onDemote && (
@@ -403,7 +406,7 @@ export default function TeamMemberList({
                               }
                             >
                               <UserCheck className="size-4" />
-                              {t("team.demoteToMember")}
+                              {m.settings_team_demoteToMember()}
                             </DropdownMenuItem>
                           )}
                           {member.status === "invited" && onResendInvite && (
@@ -416,7 +419,7 @@ export default function TeamMemberList({
                               }
                             >
                               <Mail className="size-4" />
-                              {t("team.resendInvite")}
+                              {m.settings_team_resendInvite()}
                             </DropdownMenuItem>
                           )}
                           {member.role !== "viewer" && member.role !== "guest" && (
@@ -434,7 +437,7 @@ export default function TeamMemberList({
                                 variant="destructive"
                               >
                                 <Trash2 className="size-4" />
-                                {t("team.removeMember")}
+                                {m.settings_team_removeMember()}
                               </DropdownMenuItem>
                             </>
                           )}

package/src/components/shadcn-space/blocks/pricing-01/pricing.tsx

@@ -15,175 +15,173 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
-
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { Separator } from "@/components/ui/separator";
-import { cn } from "@/lib/utils";
-import { ArrowUpRight, Check } from "lucide-react";
-import { m } from "motion/react";
-import { useTranslation } from "react-i18next";
-
-type PricingPlan = {
-  plan_bg_color: string;
-  plan_name: string;
-  plan_descp: string;
-  plan_price: number;
-  plan_feature: string[];
-};
-
-const pricingData: PricingPlan[] = [
-  {
-    plan_bg_color: "bg-blue-500/10",
-    plan_name: "Free",
-    plan_descp: "",
-    plan_price: 0,
-    plan_feature: [
-      "Design Updates",
-      "Mid-level Designer",
-      "SEO Optimization",
-      "Monthly Analytics",
-      "2x Calls Per Month",
-      "License free Assets",
-    ],
-  },
-  {
-    plan_bg_color: "bg-teal-400/20",
-    plan_name: "Pro",
-    plan_descp: "2x the speed. Great for an MVP, Web App or complex problem",
-    plan_price: 3800,
-    plan_feature: [
-      "Everything on Starter",
-      "Developer Updates",
-      "Digital Marketing",
-      "Weekly Analytics",
-      "8x Calls Per Month",
-      "Premium Assets",
-    ],
-  },
-];
-
-const Pricing = () => {
-  const { t } = useTranslation("billing")
-  const cardVariants = {
-    hidden: {
-      opacity: 0,
-      y: 80,
-    },
-    visible: (index: number) => ({
-      opacity: 1,
-      y: 0,
-      transition: {
-        delay: index * 0.2,
-        duration: 0.6,
-      },
-    }),
-  };
-
-  return (
-    <section className="bg-background py-10 xl:py-0">
-      <div className="max-w-7xl mx-auto px-4 lg:px-8 xl:px-16 lg:py-20 sm:py-16 py-8">
-        <div className="flex flex-col gap-8 md:gap-12 justify-center items-center w-full">
-          {/* Heading */}
-          <div className="flex flex-col gap-4 justify-center items-center animate-in fade-in slide-in-from-top-8 duration-700 ease-in-out">
-            {/* Badge */}
-            <Badge
-              variant={"outline"}
-              className="py-1 px-3 text-sm font-normal leading-5 w-fit h-7"
-            >
-              Pricing
-            </Badge>
-            {/* Heading */}
-            <div className="max-w-3xs sm:max-w-md mx-auto text-center">
-              <h2 className="text-foreground text-3xl sm:text-5xl font-medium">
-                Pick the plan that fits your start-up
-              </h2>
-            </div>
-          </div>
-          {/* Pricing Plans */}
-          <div className="flex flex-col lg:flex-row items-center justify-center grow gap-6 w-full">
-            {pricingData?.map((items: PricingPlan, index: number) => (
-              <m.div
-                key={index}
-                variants={cardVariants}
-                initial="hidden"
-                whileInView="visible"
-                viewport={{ once: true }}
-                custom={index}
-                className="w-full sm:w-fit"
-              >
-                <Card
-                  className={cn(
-                    items.plan_bg_color,
-                    "p-8 sm:p-10 rounded-2xl ring-0 w-full sm:w-fit",
-                  )}
-                  key={index}
-                >
-                  <CardContent className="flex flex-col sm:flex-row gap-6 md:gap-10 items-start self-stretch px-0 h-full w-full">
-                    <div className="flex flex-col items-start justify-between self-stretch gap-6">
-                      <div className="flex flex-col gap-3">
-                        <Badge className="py-1 px-3 text-sm font-normal leading-5 w-fit h-7">
-                          {items.plan_name}
-                        </Badge>
-                        <p className="text-sm font-normal text-muted-foreground max-w-56">
-                          {items.plan_descp || t("pricing.freeDesc")}
-                        </p>
-                      </div>
-                      <div className="flex flex-col gap-4">
-                        <p className="text-4xl sm:text-5xl font-semibold text-card-foreground flex items-end">
-                          ¥{items.plan_price}
-                          <span className="text-base font-normal text-muted-foreground">
-                            /month
-                          </span>
-                        </p>
-                        <Button className="relative bg-white hover:bg-white hover:text-black dark:hover:text-black text-black text-sm font-medium rounded-full h-12 p-1 ps-6 pe-14 group transition-all duration-500 hover:ps-14 hover:pe-6 w-fit overflow-hidden cursor-pointer">
-                          <span className="relative z-10 transition-all duration-500">
-                            { items.plan_name === "Free" ? t("pricing.startFree") : t("pricing.viewPro") }
-                          </span>
-                          <div className="absolute right-1 w-10 h-10 bg-black text-white rounded-full flex items-center justify-center transition-all duration-500 group-hover:right-[calc(100%-44px)] group-hover:rotate-45">
-                            <ArrowUpRight size={16} />
-                          </div>
-                        </Button>
-                      </div>
-                    </div>
-                    <Separator
-                      orientation="vertical"
-                      className="hidden sm:block"
-                    />
-                    <Separator
-                      orientation="horizontal"
-                      className="sm:hidden block"
-                    />
-                    <div className="flex flex-col items-start gap-3 grow">
-                      <p className="text-card-foreground text-base sm:text-xl font-normal sm:font-medium">
-                        Features
-                      </p>
-                      <ul className="flex flex-col items-start self-stretch gap-3">
-                        {items.plan_feature?.map(
-                          (feature: string, index: number) => {
-                            return (
-                              <li
-                                key={index}
-                                className="flex items-center gap-3 text-card-foreground text-base font-normal tracking-normal"
-                              >
-                                <Check size={16} aria-hidden="true" />
-                                {feature}
-                              </li>
-                            );
-                          },
-                        )}
-                      </ul>
-                    </div>
-                  </CardContent>
-                </Card>
-              </m.div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Pricing;
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { ArrowUpRight, Check } from "lucide-react";
+import { m } from "motion/react";
+import { m as msg } from "@/paraglide/messages.js";
+
+type PricingPlan = {
+  plan_bg_color: string;
+  plan_name: string;
+  plan_descp: string;
+  plan_price: number;
+  plan_feature: string[];
+};
+
+const pricingData: PricingPlan[] = [
+  {
+    plan_bg_color: "bg-blue-500/10",
+    plan_name: "Free",
+    plan_descp: "",
+    plan_price: 0,
+    plan_feature: [
+      "Design Updates",
+      "Mid-level Designer",
+      "SEO Optimization",
+      "Monthly Analytics",
+      "2x Calls Per Month",
+      "License free Assets",
+    ],
+  },
+  {
+    plan_bg_color: "bg-teal-400/20",
+    plan_name: "Pro",
+    plan_descp: "2x the speed. Great for an MVP, Web App or complex problem",
+    plan_price: 3800,
+    plan_feature: [
+      "Everything on Starter",
+      "Developer Updates",
+      "Digital Marketing",
+      "Weekly Analytics",
+      "8x Calls Per Month",
+      "Premium Assets",
+    ],
+  },
+];
+
+const Pricing = () => {
+  const cardVariants = {
+    hidden: {
+      opacity: 0,
+      y: 80,
+    },
+    visible: (index: number) => ({
+      opacity: 1,
+      y: 0,
+      transition: {
+        delay: index * 0.2,
+        duration: 0.6,
+      },
+    }),
+  };
+
+  return (
+    <section className="bg-background py-10 xl:py-0">
+      <div className="max-w-7xl mx-auto px-4 lg:px-8 xl:px-16 lg:py-20 sm:py-16 py-8">
+        <div className="flex flex-col gap-8 md:gap-12 justify-center items-center w-full">
+          {/* Heading */}
+          <div className="flex flex-col gap-4 justify-center items-center animate-in fade-in slide-in-from-top-8 duration-700 ease-in-out">
+            {/* Badge */}
+            <Badge
+              variant={"outline"}
+              className="py-1 px-3 text-sm font-normal leading-5 w-fit h-7"
+            >
+              Pricing
+            </Badge>
+            {/* Heading */}
+            <div className="max-w-3xs sm:max-w-md mx-auto text-center">
+              <h2 className="text-foreground text-3xl sm:text-5xl font-medium">
+                Pick the plan that fits your start-up
+              </h2>
+            </div>
+          </div>
+          {/* Pricing Plans */}
+          <div className="flex flex-col lg:flex-row items-center justify-center grow gap-6 w-full">
+            {pricingData?.map((items: PricingPlan, index: number) => (
+              <m.div
+                key={index}
+                variants={cardVariants}
+                initial="hidden"
+                whileInView="visible"
+                viewport={{ once: true }}
+                custom={index}
+                className="w-full sm:w-fit"
+              >
+                <Card
+                  className={cn(
+                    items.plan_bg_color,
+                    "p-8 sm:p-10 rounded-2xl ring-0 w-full sm:w-fit",
+                  )}
+                  key={index}
+                >
+                  <CardContent className="flex flex-col sm:flex-row gap-6 md:gap-10 items-start self-stretch px-0 h-full w-full">
+                    <div className="flex flex-col items-start justify-between self-stretch gap-6">
+                      <div className="flex flex-col gap-3">
+                        <Badge className="py-1 px-3 text-sm font-normal leading-5 w-fit h-7">
+                          {items.plan_name}
+                        </Badge>
+                        <p className="text-sm font-normal text-muted-foreground max-w-56">
+                          {items.plan_descp || msg.billing_pricing_freeDesc()}
+                        </p>
+                      </div>
+                      <div className="flex flex-col gap-4">
+                        <p className="text-4xl sm:text-5xl font-semibold text-card-foreground flex items-end">
+                          ¥{items.plan_price}
+                          <span className="text-base font-normal text-muted-foreground">
+                            /month
+                          </span>
+                        </p>
+                        <Button className="relative bg-white hover:bg-white hover:text-black dark:hover:text-black text-black text-sm font-medium rounded-full h-12 p-1 ps-6 pe-14 group transition-all duration-500 hover:ps-14 hover:pe-6 w-fit overflow-hidden cursor-pointer">
+                          <span className="relative z-10 transition-all duration-500">
+                            { items.plan_name === "Free" ? msg.billing_pricing_startFree() : msg.billing_pricing_viewPro() }
+                          </span>
+                          <div className="absolute right-1 w-10 h-10 bg-black text-white rounded-full flex items-center justify-center transition-all duration-500 group-hover:right-[calc(100%-44px)] group-hover:rotate-45">
+                            <ArrowUpRight size={16} />
+                          </div>
+                        </Button>
+                      </div>
+                    </div>
+                    <Separator
+                      orientation="vertical"
+                      className="hidden sm:block"
+                    />
+                    <Separator
+                      orientation="horizontal"
+                      className="sm:hidden block"
+                    />
+                    <div className="flex flex-col items-start gap-3 grow">
+                      <p className="text-card-foreground text-base sm:text-xl font-normal sm:font-medium">
+                        Features
+                      </p>
+                      <ul className="flex flex-col items-start self-stretch gap-3">
+                        {items.plan_feature?.map(
+                          (feature: string, index: number) => {
+                            return (
+                              <li
+                                key={index}
+                                className="flex items-center gap-3 text-card-foreground text-base font-normal tracking-normal"
+                              >
+                                <Check size={16} aria-hidden="true" />
+                                {feature}
+                              </li>
+                            );
+                          },
+                        )}
+                      </ul>
+                    </div>
+                  </CardContent>
+                </Card>
+              </m.div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Pricing;