Merge pull request #180 from Lemoncode/feature/#169-add-media-queries-for-provinces

style: update styles for desktop and add optional classname prop to the Card component

Author: manudous

front/src/common/components/card.component.tsx

@@ -2,12 +2,19 @@ import React from "react";
 
 interface Props {
   children?: React.ReactNode;
+  className?: string;
 }
 
 export const Card: React.FC<Props> = (props: Props) => {
-  const { children } = props;
+  const { children, className } = props;
   return (
-    <div className="bg-base-100 m-8 flex flex-col gap-6 rounded-2xl p-4">
+    <div
+      className={
+        className
+          ? className
+          : "bg-base-100 m-8 flex flex-col gap-6 rounded-2xl p-4"
+      }
+    >
       {children}
     </div>
   );

front/src/pods/embalse-provincia-list/embalse-provincia-list.component.tsx

@@ -5,18 +5,20 @@ import Link from "next/link";
 
 export const EmbalseProvinciaList: React.FC = () => {
   return (
-    <Card>
-      <h2>Embalses por provincias</h2>
-      <div className="flex flex-col gap-4">
-        {PROVINCIAS.map(({ id, name }) => (
-          <Link
-            key={id}
-            href={`/embalse-provincia/${id}`}
-            className="link-accessible"
-          >
-            {name}
-          </Link>
-        ))}
+    <Card className="mx-auto w-full pt-6 pr-4 pb-6 pl-4 md:max-w-[900px] md:p-8">
+      <div className="bg-base-100 rounded-2xl p-6">
+        <h2>Embalses por provincias</h2>
+        <div className="grid grid-cols-1 gap-4 p-6 sm:grid-cols-2 md:grid-cols-3">
+          {PROVINCIAS.map(({ id, name }) => (
+            <Link
+              key={id}
+              href={`/embalse-provincia/${id}`}
+              className="link-accessible"
+            >
+              {name}
+            </Link>
+          ))}
+        </div>
       </div>
     </Card>
   );