59 lines
3.1 KiB
TypeScript
59 lines
3.1 KiB
TypeScript
// @ts-nocheck
|
|
import React, { useState, useEffect } from 'react';
|
|
import { getDirectusClient } from '@/lib/directus/client';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Badge } from '@/components/ui/badge';
|
|
|
|
interface Props {
|
|
initialClusters?: any[];
|
|
}
|
|
|
|
export default function GeoManager({ initialClusters = [] }: Props) {
|
|
const [clusters, setClusters] = useState(initialClusters);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{clusters.map((cluster) => (
|
|
<Card key={cluster.id} className="bg-slate-800 border-slate-700">
|
|
<CardHeader className="pb-2">
|
|
<CardTitle className="text-white flex justify-between items-start">
|
|
<span>{cluster.data?.cluster_name || cluster.cluster_key}</span>
|
|
</CardTitle>
|
|
<code className="text-xs text-green-400 bg-slate-900 px-2 py-1 rounded inline-block">
|
|
{cluster.cluster_key}
|
|
</code>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<div className="text-xs text-slate-500 mb-2">Target Cities</div>
|
|
<div className="space-y-2">
|
|
{(cluster.data?.cities || []).map((city, i) => (
|
|
<div key={i} className="flex items-center justify-between text-sm bg-slate-900 p-2 rounded border border-slate-800">
|
|
<span className="text-slate-200">
|
|
{city.city}, {city.state}
|
|
</span>
|
|
{city.neighborhood && (
|
|
<Badge variant="outline" className="text-xs text-blue-400 border-blue-900 bg-blue-900/20">
|
|
{city.neighborhood}
|
|
</Badge>
|
|
)}
|
|
{city.zip_focus && (
|
|
<Badge variant="outline" className="text-xs text-purple-400 border-purple-900 bg-purple-900/20">
|
|
{city.zip_focus}
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|