+
{/* Check if data exists */}
{data ? (
<>
{/* Display district name if available */}
- {data.name &&
{data.name}
}
+ {data.name &&
{data.name}
}
{/* Display key-value pairs, handling objects with JSON.stringify */}
-
+
{Object.entries(data).map(([key, value]) => (
-
{key}: {renderValue(key, value)}
@@ -46,7 +48,6 @@ const renderExternalDistrictData = (data) => {
);
};
-
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 (
-
+
{value.map((item, index) => (
-
{typeof item === 'object' ? JSON.stringify(item) : item.toString()}
@@ -79,16 +80,16 @@ const DistrictCard = ({ district }) => {
// Default rendering for other district data
else {
return (
-
+
{/* Check if district object exists */}
{district ? (
<>
{/* Display district name if available */}
- {district.name &&
{district.name}
}
+ {district.name &&
{district.name}
}
{/* Display key-value pairs, handling objects and arrays gracefully */}
-
+
{Object.entries(district).map(([key, value]) => (
-
{key}: {renderValue(key, value)}
@@ -106,3 +107,4 @@ const DistrictCard = ({ district }) => {
};
export default DistrictCard;
+
diff --git a/src/components/Card/DistrictCard.module.css b/src/components/Card/DistrictCard.module.css
new file mode 100644
index 0000000..4a48a54
--- /dev/null
+++ b/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;
+ }
+
\ No newline at end of file