refactor: add animations ✨

app/(dashboard)/devices/[deviceId]/page.tsx

@@ -27,11 +27,16 @@ export default async function DeviceDetails({
     <div>
       <div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-4">
         <div className="flex flex-col justify-between items-start">
-          <h3 className="text-2xl text-sarLinkOrange font-bold">
+          <h3 className="text-2xl text-sarLinkOrange motion-preset-slide-down-md font-bold">
             {device?.name}
           </h3>
-          <Badge variant={"secondary"}>{device?.mac}</Badge>
+          <Badge
-          <p className="text-muted-foreground text-sm mt-2">
+            className="motion-preset-slide-down-md motion-delay-75"
+            variant={"secondary"}
+          >
+            {device?.mac}
+          </Badge>
+          <p className="text-muted-foreground text-sm mt-2 motion-preset-slide-down-md motion-delay-100">
             Device active until{" "}
             {new Date(device?.expiry_date || "").toLocaleDateString("en-US", {
               month: "short",
@@ -40,7 +45,7 @@ export default async function DeviceDetails({
             })}
           </p>
         </div>
-        <div className="flex items-center gap-2 flex-col">
+        <div className="flex items-center gap-2 flex-col motion-preset-fade">
           {device?.expiry_date && new Date() < new Date(device.expiry_date) && (
             <p className="text-base font-semibold font-mono w-full text-center px-2 p-1 rounded-md bg-green-500/10 text-green-900 dark:text-green-400">
               ACTIVE

components/clickable-row.tsx

@@ -12,10 +12,12 @@ export default function ClickableRow({
   device,
   parentalControl,
   admin = false,
+  idx,
 }: {
   device: Device;
   parentalControl?: boolean;
   admin?: boolean;
+  idx?: number;
 }) {
   const [devices, setDeviceCart] = useAtom(deviceCartAtom);
 
@@ -26,6 +28,7 @@ export default function ClickableRow({
         (parentalControl === false && device.blocked) || device.is_active
           ? "cursor-not-allowed hover:bg-accent-foreground/10"
           : "cursor-pointer hover:bg-muted-foreground/10",
+        `motion-preset-fade-md motion-delay-${(idx || 1) * 75}ms`,
       )}
       onClick={() => {
         if (device.blocked) return;

components/device-card.tsx

@@ -41,7 +41,7 @@ export default function DeviceCard({
     >
       <div
         className={cn(
-					"flex text-sm justify-between items-center my-2 p-4 border rounded-md",
+          "flex text-sm justify-between items-center my-2 p-4 border rounded-md motion-preset-fade-md",
           isChecked ? "bg-accent" : "",
           device.is_active
             ? "cursor-not-allowed text-green-600 hover:bg-accent-foreground/10"

components/devices-table.tsx

@@ -79,12 +79,13 @@ export async function DevicesTable({
                 </TableRow>
               </TableHeader>
               <TableBody className="overflow-scroll">
-								{data?.map((device) => (
+                {data?.map((device, idx) => (
                   <ClickableRow
                     admin={isAdmin}
                     key={device.id}
                     device={device}
                     parentalControl={parentalControl}
+                    idx={idx + 1}
                   />
                 ))}
               </TableBody>

components/devices-to-pay.tsx

@@ -126,6 +126,7 @@ export default function DevicesToPay({
                           type="submit"
                           variant={"secondary"}
                           size={"lg"}
+                          className="w-full"
                         >
                           {isPending
                             ? "Processing payment..."
@@ -145,7 +146,7 @@ export default function DevicesToPay({
                         disabled={isPending || disabled}
                         type="submit"
                         size={"lg"}
-                        className="mb-4"
+                        className="mb-4 w-full"
                       >
                         {isPending ? "Processing payment..." : "I have paid"}
                         {isPending ? (
@@ -162,10 +163,8 @@ export default function DevicesToPay({
           </TableCaption>
           <TableBody className="">
             <TableRow>
-              <TableCell className="motion-preset-slide-left-sm">
+              <TableCell>Payment created</TableCell>
-                Payment created
+              <TableCell className="text-right motion-preset-slide-up-sm">
-              </TableCell>
-              <TableCell className="text-right motion-preset-slide-right-sm">
                 {new Date(payment?.created_at ?? "").toLocaleDateString(
                   "en-US",
                   {
@@ -180,31 +179,22 @@ export default function DevicesToPay({
               </TableCell>
             </TableRow>
             <TableRow>
-              <TableCell className="motion-preset-slide-left-sm motion-delay-75">
+              <TableCell>Total Devices</TableCell>
-                Total Devices
+              <TableCell className="text-right text-xl motion-preset-slide-up-sm motion-delay-75">
-              </TableCell>
-              <TableCell className="text-right text-xl motion-preset-slide-right-sm motion-delay-75">
                 {devices?.length}
               </TableCell>
             </TableRow>
             <TableRow>
-              <TableCell className="motion-preset-slide-left-sm motion-delay-100">
+              <TableCell>Duration</TableCell>
-                Duration
+              <TableCell className="text-right text-xl motion-preset-slide-up-sm motion-delay-100">
-              </TableCell>
-              <TableCell className="text-right text-xl motion-preset-slide-right-sm motion-delay-100">
                 {payment?.number_of_months} Months
               </TableCell>
             </TableRow>
           </TableBody>
           <TableFooter>
             <TableRow className="">
-              <TableCell
+              <TableCell colSpan={1}>Total Due</TableCell>
-                className="motion-preset-slide-left-sm motion-delay-150"
+              <TableCell className="text-right text-3xl font-bold motion-preset-slide-up-sm motion-delay-150">
-                colSpan={1}
-              >
-                Total Due
-              </TableCell>
-              <TableCell className="text-right text-3xl font-bold motion-preset-slide-right-sm motion-delay-150">
                 {payment?.amount?.toFixed(2)}
               </TableCell>
             </TableRow>

components/payments-table.tsx

@@ -68,7 +68,7 @@ export async function PaymentsTable({
               </TableHeader>
               <TableBody className="overflow-scroll">
                 {payments?.data?.map((payment) => (
-									<TableRow key={payment.id}>
+                  <TableRow className="motion-preset-fade-md" key={payment.id}>
                     <TableCell>
                       <div
                         className={cn(
@@ -197,7 +197,7 @@ export function MobilePaymentDetails({
   return (
     <div
       className={cn(
-				"flex flex-col items-start border rounded p-2 my-2",
+        "flex flex-col items-start border rounded p-2 my-2 motion-preset-fade-md",
         payment?.paid
           ? "bg-green-500/10 border-dashed border-green-500"
           : payment?.is_expired

components/topups-table.tsx

@@ -71,7 +71,7 @@ export async function TopupsTable({
                     <TableCell>
                       <div
                         className={cn(
-													"flex flex-col items-start border rounded p-2",
+                          "flex flex-col items-start border rounded p-2 motion-preset-fade-md",
                           topup?.paid
                             ? "bg-green-500/10 border-dashed border-green-500"
                             : topup?.is_expired
@@ -165,9 +165,11 @@ function MobileTopupDetails({ topup }: { topup: Topup }) {
   return (
     <div
       className={cn(
-				"flex flex-col items-start border rounded p-2 my-2",
+        "flex flex-col items-start border rounded p-2 my-2 motion-preset-fade-md",
         topup?.paid
-					? "bg-green-500/10 border-dashed border-green=500"
+          ? "bg-green-500/10 border-dashed border-green-500"
+          : topup?.is_expired
+            ? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
             : "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
       )}
     >

components/ui/app-sidebar.tsx

@@ -204,7 +204,7 @@ export async function AppSidebar({
                             <Link className="text-md" href={item.link}>
                               {item.icon}
                               <span
-																className={`opacity-70 motion-preset-slide-left-md ml-2`}
+                                className={`opacity-70 motion-preset-fade motion-duration-300 ml-2`}
                               >
                                 {item.title}
                               </span>

components/wallet-transactions-table.tsx

@@ -66,7 +66,7 @@ export async function WalletTransactionsTable({
         </div>
       ) : (
         <div>
-          <div className="flex gap-4 mb-4 w-full">
+          <div className="flex gap-4 mb-4 w-full motion-preset-fade-md">
             <div className="bg-red-300 ring-4 ring-red-500/20 w-full sm:w-fit dark:bg-red-950 dark:text-red-400 text-red-900 p-2 px-4 rounded-md mb-2">
               <h5 className="text-lg font-semibold uppercase font-barlow">
                 Total Debit
@@ -95,7 +95,7 @@ export async function WalletTransactionsTable({
                 {transactions?.data?.map((trx) => (
                   <TableRow
                     className={cn(
-                      "items-start border rounded p-2",
+                      "items-start border rounded p-2 motion-preset-slide-down-sm",
                       trx?.transaction_type === "TOPUP"
                         ? "credit-bg"
                         : "debit-bg",

components/welcome-banner.tsx

@@ -29,7 +29,7 @@ export function WelcomeBanner({ firstName, lastName }: WelcomeBannerProps) {
           exit={{ opacity: 0 }}
         >
           Welcome,{" "}
-					<p className="font-semibold motion-preset-slide-down inline-block motion-delay-200">
+          <p className="font-semibold motion-preset-fade inline-block motion-delay-200">
             {firstName} {lastName}
           </p>
         </motion.div>