chore: add prettier formatting

components/states/empty-state.tsx

@@ -2,10 +2,20 @@ import type { LucideIcon } from "lucide-react";
 import { CircleCheckBig } from "lucide-react";
 import { Card } from "@/components/ui/card";
 
-export function EmptyState({ title, description, icon: Icon = CircleCheckBig }: { title: string; description: string; icon?: LucideIcon }) {
+export function EmptyState({
+  title,
+  description,
+  icon: Icon = CircleCheckBig,
+}: {
+  title: string;
+  description: string;
+  icon?: LucideIcon;
+}) {
   return (
     <Card className="flex min-h-52 flex-col items-center justify-center p-8 text-center">
-      <div className="mb-4 rounded-control bg-accent/10 p-3 text-accent"><Icon className="size-6" /></div>
+      <div className="mb-4 rounded-control bg-accent/10 p-3 text-accent">
+        <Icon className="size-6" />
+      </div>
       <h2 className="text-lg font-semibold">{title}</h2>
       <p className="mt-2 max-w-md text-sm leading-6 text-muted">{description}</p>
     </Card>

components/states/error-state.tsx

@@ -5,14 +5,27 @@ import { Button } from "@/components/ui/button";
 import { Card } from "@/components/ui/card";
 import { useI18n } from "@/lib/i18n";
 
-export function ErrorState({ title, description, onRetry }: { title?: string; description?: string; onRetry: () => void }) {
+export function ErrorState({
+  title,
+  description,
+  onRetry,
+}: {
+  title?: string;
+  description?: string;
+  onRetry: () => void;
+}) {
   const { t } = useI18n();
   return (
     <Card className="flex min-h-52 flex-col items-center justify-center p-8 text-center">
-      <div className="mb-4 rounded-control bg-warning/10 p-3 text-warning"><TriangleAlert className="size-6" /></div>
+      <div className="mb-4 rounded-control bg-warning/10 p-3 text-warning">
+        <TriangleAlert className="size-6" />
+      </div>
       <h2 className="text-lg font-semibold">{title ?? t("error.title")}</h2>
       <p className="mb-5 mt-2 max-w-md text-sm leading-6 text-muted">{description ?? t("error.description")}</p>
-      <Button variant="glass" onClick={onRetry}><RefreshCw className="size-4" />{t("common.retry")}</Button>
+      <Button variant="glass" onClick={onRetry}>
+        <RefreshCw className="size-4" />
+        {t("common.retry")}
+      </Button>
     </Card>
   );
 }

components/states/loading-skeleton.tsx

@@ -5,7 +5,12 @@ import { useI18n } from "@/lib/i18n";
 
 export function LoadingSkeleton({ className = "" }: { className?: string }) {
   const { t } = useI18n();
-  return <div className={cn("animate-pulse rounded-panel bg-surface-muted/70", className)} aria-label={t("common.loading")} />;
+  return (
+    <div
+      className={cn("animate-pulse rounded-panel bg-surface-muted/70", className)}
+      aria-label={t("common.loading")}
+    />
+  );
 }
 
 export function PageLoadingSkeleton() {
@@ -13,7 +18,9 @@ export function PageLoadingSkeleton() {
     <div className="space-y-5" aria-busy="true">
       <LoadingSkeleton className="h-[25rem]" />
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {Array.from({ length: 4 }, (_, index) => <LoadingSkeleton className="h-36" key={index} />)}
+        {Array.from({ length: 4 }, (_, index) => (
+          <LoadingSkeleton className="h-36" key={index} />
+        ))}
       </div>
     </div>
   );