Add Chart component #77

src/components/Card/DistrictCard.js

@@ -1,3 +1,5 @@
+import styles from './DistrictCard.module.css';
+
 const renderExternalDistrictData = (data) => {
     const renderValue = (key, value) => {
         // Handle null or undefined values
@@ -8,7 +10,7 @@ const renderExternalDistrictData = (data) => {
         // Handle arrays and objects separately
         if (Array.isArray(value)) {
             return (
-                <ul>
+                <ul className={styles.cardList}>
                     {value.map((item, index) => (
                         <li key={index}>
                             {typeof item === 'object' ? JSON.stringify(item) : item.toString()}
@@ -24,15 +26,15 @@ const renderExternalDistrictData = (data) => {
     };
 
     return (
-        <div>
+        <div className={styles.card}>
             {/* Check if data exists */}
             {data ? (
                 <>
                     {/* Display district name if available */}
-                    {data.name && <h3>{data.name}</h3>}
+                    {data.name && <h3 className={styles.cardHeader}>{data.name}</h3>}
 
                     {/* Display key-value pairs, handling objects with JSON.stringify */}
-                    <ul>
+                    <ul className={styles.cardList}>
                         {Object.entries(data).map(([key, value]) => (
                             <li key={key}>
                                 <strong>{key}:</strong> {renderValue(key, value)}
@@ -46,7 +48,6 @@ const renderExternalDistrictData = (data) => {
         </div>
     );
 };
-
 const DistrictCard = ({ district }) => {
     const renderValue = (key, value) => {
         // Handle null or undefined values
@@ -57,7 +58,7 @@ const DistrictCard = ({ district }) => {
         // Handle arrays and objects separately
         if (Array.isArray(value)) {
             return (
-                <ul>
+                <ul className={styles.cardList}>
                     {value.map((item, index) => (
                         <li key={index}>
                             {typeof item === 'object' ? JSON.stringify(item) : item.toString()}
@@ -79,16 +80,16 @@ const DistrictCard = ({ district }) => {
     // Default rendering for other district data
     else {
         return (
-            <div className="card">
+            <div className={styles.card}>
                 <div className="card-body">
                     {/* Check if district object exists */}
                     {district ? (
                         <>
                             {/* Display district name if available */}
-                            {district.name && <h3>{district.name}</h3>}
+                            {district.name && <h3 className={styles.cardHeader}>{district.name}</h3>}
 
                             {/* Display key-value pairs, handling objects and arrays gracefully */}
-                            <ul>
+                            <ul className={styles.cardList}>
                                 {Object.entries(district).map(([key, value]) => (
                                     <li key={key}>
                                         <strong>{key}:</strong> {renderValue(key, value)}
@@ -106,3 +107,4 @@ const DistrictCard = ({ district }) => {
 };
 
 export default DistrictCard;
+

src/components/Card/DistrictCard.module.css

@@ -0,0 +1,83 @@
+.card {
+    background-color: var(--secondary);
+    margin-bottom: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 0.42rem;
+    max-width: 320px;
+}
+
+.card h3 {
+    font-size: 1.4rem;
+    font-weight: bold;
+    color: var(--primary);
+    margin-bottom: 10px;
+}
+
+  .card-header {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #2c3e50;
+    margin-bottom: 10px;
+  }
+
+  .card-section {
+    margin-bottom: 20px;
+  }
+
+  .card-section h4 {
+    font-size: 1.25rem;
+    color: #34495e;
+    margin-bottom: 10px;
+  }
+
+  .card-list {
+    list-style: none;
+    padding: 0;
+  }
+
+  .card-list li {
+    margin-bottom: 8px;
+  }
+
+  .card-list li strong {
+    color: #2980b9;
+  }
+
+  .chart-section {
+    margin-top: 20px;
+  }
+
+  .chart-section h5 {
+    font-size: 1.2rem;
+    color: #8e44ad;
+    margin-bottom: 10px;
+  }
+
+  .chart-data {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+  }
+
+  .chart-item {
+    flex: 1;
+    min-width: 200px;
+    background-color: #ecf0f1;
+    padding: 10px;
+    border-radius: 4px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+
+  .chart-item strong {
+    display: block;
+    margin-bottom: 5px;
+    color: #27ae60;
+  }
+
+  .update-info {
+    font-size: 0.9rem;
+    color: #7f8c8d;
+    margin-top: 15px;
+    text-align: right;
+  }
+