feat(about): replace text references to workout.lol with WorkoutLol component for consistency and improved styling (#32)

Author: Snouzy

content/about/en.mdx

@@ -4,13 +4,13 @@ import Link from "next/link";
 
 ## Why Workout.cool?
 
-Workout.cool was born out of the desire to offer a reliable, modern, and actively maintained workout platform, after the original project **workout.lol** was abandoned.
+Workout.cool was born out of the desire to offer a reliable, modern, and actively maintained workout platform, after the original project <WorkoutLol variant="muted" /> was abandoned.
 
 ## The Story
 
 Workout.cool is the result of a community-driven adventure.
 
-I was the **first open source contributor** to the `workout.lol` project.
+I was the **first open source contributor** to the <WorkoutLol variant="muted" /> project.
 
 This means I saw the project *come to life*, *grow*, then get **sold** and ultimately **abandoned** by its new owner.
 

content/about/fr.mdx

@@ -4,13 +4,13 @@ import Link from "next/link";
 
 ## Pourquoi Workout.cool ?
 
-Workout.cool est né de la volonté de proposer une plateforme d'entraînement fiable, moderne et maintenue, après l'abandon du projet **workout.lol**.
+Workout.cool est né de la volonté de proposer une plateforme d'entraînement fiable, moderne et maintenue, après l'abandon du projet <WorkoutLol variant="muted" />.
 
 ## L'histoire
 
 Workout.cool est le fruit d'une aventure communautaire.
 
-J'ai été le **premier contributeur open source** du projet `workout.lol`.
+J'ai été le **premier contributeur open source** du projet <WorkoutLol variant="muted" />.
 
 De ce fait, j'ai vu ce projet *naître*, *grandir*, puis être **vendu** et finalement **abandonné** par son nouveau propriétaire.
 

src/components/ui/workout-lol.tsx

@@ -0,0 +1,41 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/shared/lib/utils";
+
+const workoutLolVariants = cva(
+  "inline-flex items-center gap-1 rounded-md px-2 py-0.5 text-sm font-mono font-semibold transition-colors duration-200",
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-red-50 text-red-600 ring-1 ring-inset ring-red-200",
+          "dark:bg-red-950/30 dark:text-red-400 dark:ring-red-900/30",
+          "hover:bg-red-100 dark:hover:bg-red-950/50",
+        ],
+        muted: [
+          "bg-slate-100 text-slate-600 ring-1 ring-inset ring-slate-200",
+          "dark:bg-slate-900/50 dark:text-slate-400 dark:ring-slate-800",
+          "hover:bg-slate-200 dark:hover:bg-slate-900/70",
+        ],
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+interface WorkoutLolProps extends VariantProps<typeof workoutLolVariants> {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const WorkoutLol = ({ className, variant, children }: WorkoutLolProps) => {
+  return <span className={cn(workoutLolVariants({ variant }), className)}>{children || "workout.lol"}</span>;
+};
+
+export const WorkoutLolMuted = ({ className, children }: Omit<WorkoutLolProps, "variant">) => (
+  <WorkoutLol className={className} variant="muted">
+    {children}
+  </WorkoutLol>
+);

src/shared/lib/mdx/load-mdx.ts

@@ -3,6 +3,8 @@ import { readFile } from "fs/promises";
 
 import { compileMDX } from "next-mdx-remote/rsc";
 
+import { WorkoutLol } from "@/components/ui/workout-lol";
+
 export async function getLocalizedMdx(
   pageSlug: string, // ex: "privacy-policy"
   locale: string, // ex: "fr" or "en"
@@ -16,6 +18,9 @@ export async function getLocalizedMdx(
     options: {
       parseFrontmatter: true,
     },
+    components: {
+      WorkoutLol,
+    },
   });
 
   return content;

src/shared/lib/workout-session/use-workout-session.service.ts

@@ -73,16 +73,16 @@ export const useWorkoutSessionService = () => {
     return workoutSessionLocal.add(session);
   };
 
-  const update = async (id: string, data: Partial<WorkoutSession>) => {
+  const update = async (_id: string, _data: Partial<WorkoutSession>) => {
     // if (userId) {
-    //   // TODO: Créer une action updateWorkoutSessionAction
+    //   // TODO: create updateWorkoutSessionAction
     //   const result = await updateWorkoutSessionAction({ id, data });
     //   if (result.serverError) throw new Error(result.serverError);
     // }
     // return workoutSessionLocal.update(id, data);
   };
 
-  const complete = async (id: string) => {
+  const complete = async (_id: string) => {
     // const data = {
     //   status: "completed" as const,
     //   endedAt: new Date().toISOString(),