From 869374db56ff4aabcbf1addbbb2fe1486e111d66 Mon Sep 17 00:00:00 2001
From: devcshort <13677134+devcshort@users.noreply.github.com>
Date: Mon, 4 Nov 2024 15:01:45 -0800
Subject: [PATCH] fix: Center categories and data providers when less than 4

---
 .../home/components/categories-section.tsx    | 16 +++++++++++-----
 src/shared/components/data-providers.tsx      | 19 ++++++++++++++++---
 2 files changed, 27 insertions(+), 8 deletions(-)

diff --git a/src/features/home/components/categories-section.tsx b/src/features/home/components/categories-section.tsx
index 46388ed..6c0eb22 100644
--- a/src/features/home/components/categories-section.tsx
+++ b/src/features/home/components/categories-section.tsx
@@ -5,6 +5,7 @@ import { Separator } from '@/shared/components/ui/separator';
 import { Card, CardContent } from '@/shared/components/ui/card';
 import { useCategories } from '@/shared/hooks/use-categories';
 import { ExternalLink } from 'lucide-react';
+import { cn } from '@/shared/lib/utils';
 
 type Props = {
   index: string;
@@ -102,11 +103,16 @@ export function CategoriesSection() {
       <Separator className="mb-4 mt-4" />
 
       <div
-        className={`grid gap-4 ${
-          categories.length >= 4
-            ? 'grid-cols-1 justify-center sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
-            : 'mx-auto max-w-fit grid-cols-1 sm:grid-cols-2 lg:grid-cols-3'
-        }`}
+        className={cn(
+          categories.length >= 4 &&
+            'grid-cols-1 justify-center sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+          categories.length === 3 &&
+            'mx-auto max-w-fit grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+          categories.length === 2 &&
+            'mx-auto max-w-fit grid-cols-1 sm:grid-cols-2',
+          categories.length === 1 && 'mx-auto max-w-fit grid-cols-1',
+          'grid gap-4',
+        )}
       >
         {categories.map((el: any) => (
           <Category key={el.name} {...el} />
diff --git a/src/shared/components/data-providers.tsx b/src/shared/components/data-providers.tsx
index ca0f73b..8a623f9 100644
--- a/src/shared/components/data-providers.tsx
+++ b/src/shared/components/data-providers.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'next-i18next';
 import { useAppConfig } from '../hooks/use-app-config';
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
 import { Separator } from './ui/separator';
+import { cn } from '../lib/utils';
 
 export function DataProviders() {
   const appConfig = useAppConfig();
@@ -20,15 +21,27 @@ export function DataProviders() {
 
             <Separator className="mb-4" />
 
-            <div className="grid grid-cols-4">
+            <div
+              className={cn(
+                appConfig.providers.length >= 4 &&
+                  'grid-cols-1 justify-center sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+                appConfig.providers.length === 3 &&
+                  'mx-auto max-w-fit grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+                appConfig.providers.length === 2 &&
+                  'mx-auto max-w-fit grid-cols-1 sm:grid-cols-2',
+                appConfig.providers.length === 1 &&
+                  'mx-auto max-w-fit grid-cols-1',
+                'grid gap-4',
+              )}
+            >
               {appConfig.providers.map((el: any) => (
                 <Link
                   key={el.name}
                   href={el.href}
                   target="_blank"
-                  className="group hover:underline"
+                  className="group self-stretch hover:underline"
                 >
-                  <Card className="transition-all group-hover:shadow-sm">
+                  <Card className="h-full transition-all group-hover:shadow-sm">
                     <CardHeader className="transition-all group-hover:translate-x-1">
                       <CardTitle>{el.name}</CardTitle>
                     </CardHeader>