REFACTOR/skeleton and error added in card obj

src/app/dashboard/_allExercisesTimeline/allExercisesGrid.tsx

@@ -10,7 +10,7 @@ import { SortableGrid } from "./sortableGrid";
 import { pluralize } from "@/lib/utils";
 import { useDashboardSearchParams } from "../_components/useDashboardSearchParams";
 import { GridLayout } from "@/components/ui/gridLayout";
-import { Card, CardErrorFallback } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
 import { ExerciseOverviewCard } from "@/components/cards/exerciseOverviewCard";
 import { ExercisesRadarCard } from "@/components/cards/exercisesRadarCard";
 import { UserRandomFactsCard } from "@/components/cards/userRandomFactsCard";
@@ -69,14 +69,14 @@ export const AllExercisesGrid = () => {
         gridItems={exercises.map((exercise) => ({
           id: exercise.id,
           component: (
-            <ErrorBoundary FallbackComponent={CardErrorFallback}>
+            <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
               <ExerciseOverviewCard exercise={exercise} />
             </ErrorBoundary>
           ),
         }))}
       />
 
-      <ErrorBoundary FallbackComponent={CardErrorFallback}>
+      <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
         <ExercisesRadarCard
           data={exercises.map((exercise) => ({
             exerciseName: exercise.name,
@@ -85,7 +85,7 @@ export const AllExercisesGrid = () => {
         />
       </ErrorBoundary>
 
-      <ErrorBoundary FallbackComponent={CardErrorFallback}>
+      <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
         <UserRandomFactsCard data={prepareUserRandomFactsData(exercises)} />
       </ErrorBoundary>
     </GridLayout>

src/app/dashboard/_monthlyExercisesTimelines/monthlyExercisesTimelines.tsx

@@ -4,7 +4,7 @@ import { Badge } from "@/components/ui/badge";
 import { dateAsYearMonthDayFormat } from "@/lib/date";
 import type { RouterOutputs } from "@/trpc/react";
 import { GridLayout, GridSkeleton } from "@/components/ui/gridLayout";
-import { CardErrorFallback } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
 import { Timeline, TimelineErrorFallback } from "@/components/ui/timeline";
 import { ErrorBoundary } from "react-error-boundary";
 import { QueryErrorResetBoundary } from "@tanstack/react-query";
@@ -56,7 +56,7 @@ const Content = () => {
             <GridLayout>
               {group.exercises.map((exercise) => (
                 <ErrorBoundary
-                  FallbackComponent={CardErrorFallback}
+                  FallbackComponent={Card.ErrorFallback}
                   key={exercise.id}
                 >
                   <ExerciseMonthlyOverviewCard
@@ -66,7 +66,7 @@ const Content = () => {
                 </ErrorBoundary>
               ))}
 
-              <ErrorBoundary FallbackComponent={CardErrorFallback}>
+              <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
                 <ExercisesRadarCard
                   data={group.exercises.map((exercise) => ({
                     exerciseName: exercise.name,
@@ -75,13 +75,13 @@ const Content = () => {
                 />
               </ErrorBoundary>
 
-              <ErrorBoundary FallbackComponent={CardErrorFallback}>
+              <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
                 <ExerciseHeatmapCard
                   data={prepareHeatmapData(group.exercises)}
                 />
               </ErrorBoundary>
 
-              <ErrorBoundary FallbackComponent={CardErrorFallback}>
+              <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
                 <UserRandomFactsCard
                   data={prepareUserRandomFactsData(group.exercises)}
                 />

src/app/exercises/[id]/_components/card.tsx

@@ -48,17 +48,7 @@ const ErrorMessage = (props: ComponentPropsWithoutRef<"code">) => {
   return <code {...props} className="flex max-h-full overflow-auto" />;
 };
 
-export const Card = {
-  Root,
-  Header,
-  Body,
-  Title,
-  Footer,
-  ErrorMessage,
-};
-
-//TODO: move this to the card obj
-export const CardSkeleton = () => {
+const SkeletonFallback = () => {
   return (
     <Skeleton className="backdrop-blur-md">
       <Card.Root>
@@ -69,7 +59,7 @@ export const CardSkeleton = () => {
   );
 };
 
-export const CardErrorFallback = (props: FallbackProps) => {
+const ErrorFallback = (props: FallbackProps) => {
   const errorMessage =
     props.error instanceof Error
       ? props.error.message
@@ -89,3 +79,14 @@ export const CardErrorFallback = (props: FallbackProps) => {
     </Card.Root>
   );
 };
+
+export const Card = {
+  Root,
+  Header,
+  Body,
+  Title,
+  Footer,
+  ErrorMessage,
+  SkeletonFallback,
+  ErrorFallback,
+};

src/app/exercises/[id]/content.tsx

@@ -8,7 +8,7 @@ import {
 import { ExercisePageContextProvider } from "./_components/exercisePageContext";
 import { QueryErrorResetBoundary } from "@tanstack/react-query";
 import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
-import { CardErrorFallback, CardSkeleton } from "./_components/card";
+import { Card } from "./_components/card";
 import { useExercisePageParams } from "./_components/useExercisePageParams";
 import { ExerciseDataGraphCard } from "./_exerciseDataGraph/exerciseDataGraphCard";
 import { ExerciseDataTableCard } from "./_exerciseDataTable/exerciseDataTableCard";
@@ -25,11 +25,11 @@ export const Content = () => {
           >
             <Suspense fallback={<ContentSkeleton />}>
               <PageContext>
-                <ErrorBoundary FallbackComponent={CardErrorFallback}>
+                <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
                   <ExerciseDataGraphCard />
                 </ErrorBoundary>
 
-                <ErrorBoundary FallbackComponent={CardErrorFallback}>
+                <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
                   <ExerciseDataTableCard />
                 </ErrorBoundary>
               </PageContext>
@@ -45,23 +45,23 @@ const ContentContainer = (props: ComponentPropsWithoutRef<"div">) => {
   return (
     <div
       {...props}
-      className="mx-auto flex max-w-[calc(var(--exercise-card-height)*4+20px*3)] flex-col gap-10  pb-5 pt-0 sm:px-5"
+      className="mx-auto flex max-w-[calc(var(--exercise-card-height)*4+20px*3)] flex-col gap-10 pb-5 pt-0 sm:px-5"
     />
   );
 };
 
 const ContentErrorFallback = (props: FallbackProps) => (
   <>
-    <CardErrorFallback {...props} />
-    <CardErrorFallback {...props} />
+    <Card.ErrorFallback {...props} />
+    <Card.ErrorFallback {...props} />
   </>
 );
 
 const ContentSkeleton = () => {
   return (
     <>
-      <CardSkeleton />
-      <CardSkeleton />
+      <Card.SkeletonFallback />
+      <Card.SkeletonFallback />
     </>
   );
 };

src/app/teams/[id]/_teamMembersExercises/teamMembersExercises.tsx

@@ -6,7 +6,7 @@ import { QueryErrorResetBoundary } from "@tanstack/react-query";
 import { ErrorBoundary } from "react-error-boundary";
 import { useTeam } from "../_components/useTeam";
 import { GridLayout, GridSkeleton } from "@/components/ui/gridLayout";
-import { CardErrorFallback } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
 import { useTeamPageParams } from "../_components/useTeamPageParams";
 import { Suspense } from "react";
 import { prepareUserRandomFactsData } from "@/lib/math";
@@ -50,14 +50,14 @@ const Content = () => {
             <GridLayout>
               {userToTeam.user.exercises.map((exercise) => (
                 <ErrorBoundary
-                  FallbackComponent={CardErrorFallback}
+                  FallbackComponent={Card.ErrorFallback}
                   key={exercise.id}
                 >
                   <ExerciseOverviewTeamCard exercise={exercise} />
                 </ErrorBoundary>
               ))}
 
-              <ErrorBoundary FallbackComponent={CardErrorFallback}>
+              <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
                 <ExercisesRadarCard
                   data={userToTeam.user.exercises.map((exercise) => ({
                     exerciseName: exercise.name,
@@ -66,7 +66,7 @@ const Content = () => {
                 />
               </ErrorBoundary>
 
-              <ErrorBoundary FallbackComponent={CardErrorFallback}>
+              <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
                 <UserRandomFactsCard
                   data={prepareUserRandomFactsData(userToTeam.user.exercises)}
                 />

src/app/teams/[id]/_teamMetedata/teamMetadata.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { CardErrorFallback, CardSkeleton } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
 import { GridLayout } from "@/components/ui/gridLayout";
 import { Badge } from "@/components/ui/badge";
 import { Timeline, TimelineErrorFallback } from "@/components/ui/timeline";
@@ -37,20 +37,20 @@ export const TeamMetadata = () => {
 const Content = () => {
   return (
     <GridLayout>
-      <ErrorBoundary FallbackComponent={CardErrorFallback}>
-        <Suspense fallback={<CardSkeleton />}>
+      <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
+        <Suspense fallback={<Card.SkeletonFallback />}>
           <TeamName />
         </Suspense>
       </ErrorBoundary>
 
-      <ErrorBoundary FallbackComponent={CardErrorFallback}>
-        <Suspense fallback={<CardSkeleton />}>
+      <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
+        <Suspense fallback={<Card.SkeletonFallback />}>
           <TeamMembers />
         </Suspense>
       </ErrorBoundary>
 
-      <ErrorBoundary FallbackComponent={CardErrorFallback}>
-        <Suspense fallback={<CardSkeleton />}>
+      <ErrorBoundary FallbackComponent={Card.ErrorFallback}>
+        <Suspense fallback={<Card.SkeletonFallback />}>
           <RandomFacts />
         </Suspense>
       </ErrorBoundary>

src/components/ui/card.tsx

@@ -66,16 +66,7 @@ const Root = forwardRef<HTMLDivElement, ComponentProps<"div">>((props, ref) => {
 });
 Root.displayName = "Card";
 
-export const Card = {
-  Root,
-  Header,
-  ActionContainer,
-  ActionButton,
-  Title,
-  Anchor,
-};
-
-export const CardErrorFallback = (props: FallbackProps) => {
+export const ErrorFallback = (props: FallbackProps) => {
   const errorMessage =
     props.error instanceof Error
       ? props.error.message
@@ -99,10 +90,21 @@ export const CardErrorFallback = (props: FallbackProps) => {
   );
 };
 
-export const CardSkeleton = () => {
+const SkeletonFallback = () => {
   return (
     <Skeleton className="h-exercise-card rounded-md border border-border bg-primary backdrop-blur-md">
       <Card.Header />
     </Skeleton>
   );
 };
+
+export const Card = {
+  Root,
+  Header,
+  ActionContainer,
+  ActionButton,
+  Title,
+  Anchor,
+  SkeletonFallback,
+  ErrorFallback,
+};