fix: Center categories and data providers when less than 4

211-Connect · Nov 4, 2024 · 869374d · 869374d
1 parent 122cb22
commit 869374d
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git 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
@@ -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>