leverage css to control layout

Author: 0xa3k5

website/src/supportedNetworks/components/NetworkDetailsPage.tsx

@@ -1,3 +1,4 @@
+import { Card, TimeIcon } from '@/components'
 import { useI18n } from '@/i18n'
 
 import { isEVMNetwork, type Network, type NetworkData, type ProcessedNetwork, supportsTokenAPI } from '../utils'
@@ -8,7 +9,6 @@ import {
   evmWithTokenAPICards,
   nonEvmNoTokenAPICards,
   nonEvmWithTokenAPICards,
-  ResourceCardsLayout,
 } from './ResourceCards'
 
 type NetworkDetailsPageProps = {
@@ -58,12 +58,24 @@ function NetworkDetailsPage({ network }: NetworkDetailsPageProps) {
   const { t } = useI18n()
   const isEVM = isEVMNetwork(network)
   const features = getNetworkFeatures(network)
-  const resourceCards = getResourceCardsConfig(isEVM, features)
+  const cards = getResourceCardsConfig(isEVM, features)
 
   return (
     <>
-      <h3 className="text-h18 mt-0">{t('index.supportedNetworks.guides')}</h3>
-      <ResourceCardsLayout {...resourceCards} />
+      <h3 className="text-h18">{t('index.supportedNetworks.guides')}</h3>
+      <div className="grid grid-cols-6 gap-4">
+        {cards.map((card) => (
+          <Card
+            key={t(card.titleKey as any)}
+            href={card.href}
+            title={t(card.titleKey as any)}
+            description={t(card.descriptionKey as any)}
+            slotAboveTitle={<TimeIcon variant="reading" minutes={card.minutes} />}
+            className="col-span-full [&:nth-child(-n+3)]:lg:col-span-2 [&:nth-child(-n+3)]:lg:min-h-64 [&:nth-child(n+4)]:lg:col-span-3"
+            icon={card.icon}
+          />
+        ))}
+      </div>
     </>
   )
 }