rouggy
03e71bfdf2
The watch list was a tab, and an operator working FT8 lives on the decodes one: a station they had asked to be told about turned up on a screen they were not looking at. The same answer is now docked in the widget strip, above the tabs, reduced to what is worth acting on — on the air and still needed, one row per band and mode, with the cluster's own NEW DXCC / NEW BAND / NEW SLOT badge and a click that tunes. Off by default. The "active and needed" answer costs a debounced query per visible slot, so it is written once (lib/watchlistSpots) and the tab uses it too. Auto-call: - It answers a new prefix, county, state, square or park. Those markers are orthogonal to the entity, they ranked as nothing-needed, and the engine sat through a never-worked WPX prefix calling CQ. New rung at the foot of the ladder, gated by the chase switches the badges use — which meant making those switches portable, since the backend cannot read localStorage. - It calls THROUGH a pileup. Giving up the moment the DX answered somebody else is precisely how a queue is not worked; the call and miss counters already bound the effort, and a station in mid-exchange is still never chosen as a new target. The PSK Reporter panel now follows the station auto-call is waiting for: the analysis takes a history query and a period or two to fill, so starting it when the DX comes free is starting it too late. Callbook lookup: a compound callsign with a page of its OWN keeps that page's location. QRZ files HP/WE9G under exactly that form, with the Panama square the station is operating from, and the rule that drops a home address from a portable call was throwing it away. The record's own country tells an operation's page from a home page. Changelog: entries may open with [NEW], drawn as a pill in the What's new dialog — a release is mostly fixes and the two or three genuinely new things should not have to be found by reading all of it.
356 lines
21 KiB
TypeScript
356 lines
21 KiB
TypeScript
// Watchlist — the DXHunter concept as an OpsLog tab.
|
||
//
|
||
// One card per watched callsign (or prefix), the live spots that match it
|
||
// underneath, and the two questions an operator actually asks answered on every
|
||
// line: is this slot still NEEDED, and what would it be worth (the same NEW
|
||
// DXCC / band / mode / slot badges the cluster shows, resolved from the same
|
||
// index). A CONTEST entry is judged against the current UTC day — at midnight
|
||
// everything reads "work today" again; the boundary lives in the backend query,
|
||
// so there is nothing to reset.
|
||
//
|
||
// The design is DXHunter's — the layout, the badges, the wording — repainted in
|
||
// the app's theme tokens rather than its hard-coded slate/pink.
|
||
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||
import { Eye, Plus, Trash2, Bell, BellOff, Trophy, Search, Check, AlertTriangle } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Checkbox } from '@/components/ui/checkbox';
|
||
import { cn } from '@/lib/utils';
|
||
import { useI18n } from '@/lib/i18n';
|
||
import {
|
||
WatchlistEntries, WatchlistAdd, WatchlistRemove, WatchlistSetNotify,
|
||
WatchlistSetContest, WatchlistWorkedSlots,
|
||
GetWatchlistContestPattern, SetWatchlistContestPattern, OpenExternalURL,
|
||
} from '../../wailsjs/go/main/App';
|
||
import { EventsOn } from '../../wailsjs/runtime/runtime';
|
||
import type { ClusterSpot, SpotStatusEntry } from '@/components/ClusterGrid';
|
||
import { inferSpotMode, spotStatusKey } from '@/lib/spot';
|
||
import { useWatchlistSpots, matchesEntry, newBadge, type WLEntry } from '@/lib/watchlistSpots';
|
||
|
||
interface Props {
|
||
spots: ClusterSpot[];
|
||
spotStatus: Record<string, SpotStatusEntry>;
|
||
onSpotSelect?: (s: ClusterSpot) => void;
|
||
onSpotClick?: (s: ClusterSpot) => void;
|
||
}
|
||
|
||
export function WatchlistTab({ spots, spotStatus, onSpotSelect, onSpotClick }: Props) {
|
||
const { t } = useI18n();
|
||
const [entries, setEntries] = useState<WLEntry[]>([]);
|
||
const [addCall, setAddCall] = useState('');
|
||
const [addContest, setAddContest] = useState(false);
|
||
const [search, setSearch] = useState('');
|
||
// The filters survive leaving the tab: the component unmounts on every tab
|
||
// switch, and filters that reset each time are filters nobody trusts.
|
||
const [neededOnly, setNeededOnlyRaw] = useState(() => localStorage.getItem('opslog.wlNeededOnly') === '1');
|
||
const [activeOnly, setActiveOnlyRaw] = useState(() => localStorage.getItem('opslog.wlActiveOnly') === '1');
|
||
const [family, setFamilyRaw] = useState<'all' | 'normal' | 'contest'>(() => {
|
||
const v = localStorage.getItem('opslog.wlFamily');
|
||
return v === 'normal' || v === 'contest' ? v : 'all';
|
||
});
|
||
const setNeededOnly = (f: (v: boolean) => boolean) => setNeededOnlyRaw((v) => { const nv = f(v); try { localStorage.setItem('opslog.wlNeededOnly', nv ? '1' : '0'); } catch {} return nv; });
|
||
const setActiveOnly = (f: (v: boolean) => boolean) => setActiveOnlyRaw((v) => { const nv = f(v); try { localStorage.setItem('opslog.wlActiveOnly', nv ? '1' : '0'); } catch {} return nv; });
|
||
const setFamily = (v: 'all' | 'normal' | 'contest') => { setFamilyRaw(v); try { localStorage.setItem('opslog.wlFamily', v); } catch {} };
|
||
// Mode filter — DXHunter's "All Modes" select. DIGI matches the digital class
|
||
// (FT8, FT4, a generic DATA spot…), the named modes match exactly.
|
||
const [modeFilter, setModeFilterRaw] = useState(() => localStorage.getItem('opslog.wlMode') || 'ALL');
|
||
const setModeFilter = (v: string) => { setModeFilterRaw(v); try { localStorage.setItem('opslog.wlMode', v); } catch {} };
|
||
const modeMatches = (s2: ClusterSpot): boolean => {
|
||
if (modeFilter === 'ALL') return true;
|
||
const m = (inferSpotMode(s2.comment ?? '', s2.freq_hz) || '').toUpperCase();
|
||
if (modeFilter === 'DIGI') return !['', 'CW', 'SSB', 'USB', 'LSB', 'FM', 'AM'].includes(m);
|
||
if (modeFilter === 'SSB') return m === 'SSB' || m === 'USB' || m === 'LSB';
|
||
return m === modeFilter;
|
||
};
|
||
const [error, setError] = useState('');
|
||
// A quiet confirmation under the toolbar; both messages clear themselves —
|
||
// a stale "added" from ten minutes ago reads as a fresh one.
|
||
const [notice, setNotice] = useState('');
|
||
const noticeTimer = useRef<number | undefined>(undefined);
|
||
const flash = (msg: string, isError: boolean) => {
|
||
if (noticeTimer.current) window.clearTimeout(noticeTimer.current);
|
||
setError(isError ? msg : '');
|
||
setNotice(isError ? '' : msg);
|
||
noticeTimer.current = window.setTimeout(() => { setError(''); setNotice(''); }, 4000) as unknown as number;
|
||
};
|
||
|
||
|
||
const refresh = useCallback(async () => {
|
||
try { setEntries(((await WatchlistEntries()) ?? []) as any as WLEntry[]); }
|
||
catch (e: any) { setError(String(e?.message ?? e)); }
|
||
}, []);
|
||
// Refreshed on mount, when the backend auto-adds (event), and on a slow tick
|
||
// so last-seen and the spot counters stay honest while the tab sits open.
|
||
useEffect(() => {
|
||
void refresh();
|
||
const off = EventsOn('watchlist:changed', () => { void refresh(); });
|
||
const id = window.setInterval(() => { void refresh(); }, 30_000);
|
||
return () => { off(); window.clearInterval(id); };
|
||
}, [refresh]);
|
||
// The auto-contest pattern (DXHunter's contest_prefix): spots whose call
|
||
// contains it are added as contest entries by the backend.
|
||
const [pattern, setPattern] = useState('');
|
||
useEffect(() => { GetWatchlistContestPattern().then((p: string) => setPattern(p ?? '')).catch(() => {}); }, []);
|
||
|
||
// Live spots per entry — prefix-matched, newest first, deduped per band+mode
|
||
// (one line per slot; the freshest spot represents it).
|
||
// Which entries are on the air, and which of their slots are still needed.
|
||
// One definition, shared with the docked watch-list widget — the answer
|
||
// involves a debounced query per visible slot, and two copies of it would be
|
||
// two bursts of the same question and two ideas of what "needed" means.
|
||
const { spotsFor, workedFor, settled, onAir, worked } = useWatchlistSpots(entries, spots);
|
||
|
||
const add = async () => {
|
||
const c = addCall.trim().toUpperCase();
|
||
if (!c) return;
|
||
try {
|
||
await WatchlistAdd(c, addContest);
|
||
setAddCall('');
|
||
// The confirmation is the app-level notice (App.tsx, on watchlist:changed)
|
||
// — saying it twice, once per place a call can be added from, was noise.
|
||
await refresh();
|
||
} catch (e: any) { flash(String(e?.message ?? e), true); }
|
||
};
|
||
|
||
// One click, like the bell and the trophy beside it: removing a watchlist
|
||
// entry is cheap to undo (type it again), so it does not earn a confirmation
|
||
// the other two buttons do not have.
|
||
const remove = async (call: string) => {
|
||
try { await WatchlistRemove(call); await refresh(); }
|
||
catch (e: any) { flash(String(e?.message ?? e), true); }
|
||
};
|
||
|
||
const isOnAir = onAir;
|
||
|
||
const shown = entries.filter((e) => {
|
||
if (family === 'normal' && e.isContest) return false;
|
||
if (family === 'contest' && !e.isContest) return false;
|
||
if (search && !e.callsign.includes(search.trim().toUpperCase())) return false;
|
||
const list = (spotsFor.get(e.callsign) ?? []).filter(modeMatches).filter((s2) => settled(e, s2));
|
||
if (activeOnly && list.length === 0) return false;
|
||
if (neededOnly && !list.some((s2) => !workedFor(e, s2))) return false;
|
||
return true;
|
||
});
|
||
|
||
const counters = useMemo(() => {
|
||
let active = 0, needed = 0;
|
||
for (const e of entries) {
|
||
const list = (spotsFor.get(e.callsign) ?? []).filter(modeMatches).filter((s2) => settled(e, s2));
|
||
if (list.length > 0) active++;
|
||
if (list.some((s2) => !workedFor(e, s2))) needed++;
|
||
}
|
||
return { total: entries.length, active, needed };
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [entries, spotsFor, worked, modeFilter]);
|
||
|
||
// The cluster's own badge for a spot, read from the shared status index.
|
||
const dxccBadge = (s: ClusterSpot): { label: string; color: string } | null => {
|
||
const st = spotStatus[spotStatusKey(s.dx_call, s.band ?? '', s.comment ?? '', s.freq_hz)];
|
||
const b = newBadge(st?.status);
|
||
return b ? { label: t(b.key), color: b.colour } : null;
|
||
};
|
||
|
||
// Three decimals, and no trailing zeros beyond them: 7.056 rather than
|
||
// 7.0560, 14.0745 rather than 14.074500. DXHunter's own rule, and the one an
|
||
// operator reads a cluster line with.
|
||
const fmtMHz = (hz: number) => {
|
||
const [int, dec] = (hz / 1e6).toFixed(6).split('.');
|
||
return int + '.' + dec.slice(0, 3) + dec.slice(3).replace(/0+$/, '');
|
||
};
|
||
|
||
const chip = (color: string, text: string, extra?: string) => (
|
||
<span className={cn('px-1.5 py-0.5 rounded text-[11px] font-semibold border', extra)}
|
||
style={{ color, borderColor: `color-mix(in srgb, ${color} 40%, transparent)`, background: `color-mix(in srgb, ${color} 12%, transparent)` }}>
|
||
{text}
|
||
</span>
|
||
);
|
||
|
||
return (
|
||
// Capped and centred: a card is a reading surface, and callsign-to-badge
|
||
// lines stretched across a 34-inch window are not readable, they are long.
|
||
<div className="flex flex-col min-h-0 flex-1 gap-2 p-2 w-full max-w-5xl mx-auto">
|
||
{/* Header: the counters alone, centred — they are the tab's headline.
|
||
Everything one INTERACTS with lives on the second row. */}
|
||
<div className="flex items-center justify-center gap-2.5 text-xs text-muted-foreground">
|
||
<Eye className="size-4 text-primary shrink-0" />
|
||
<span className="flex items-center gap-1.5">{t('wl.cTotal')}
|
||
<b className="px-2 py-0.5 rounded bg-muted text-foreground">{counters.total}</b></span>
|
||
<span className="opacity-40">|</span>
|
||
<span className="flex items-center gap-1.5">{t('wl.cActive')}
|
||
<b className="px-2 py-0.5 rounded text-info border border-info/30 bg-info/10">{counters.active}</b></span>
|
||
<span className="opacity-40">|</span>
|
||
<span className="flex items-center gap-1.5">{t('wl.cNeeded')}
|
||
<b className={cn('px-2 py-0.5 rounded border', counters.needed > 0
|
||
? 'text-warning border-warning/40 bg-warning/10'
|
||
: 'text-muted-foreground border-border bg-muted/40')}>{counters.needed}</b></span>
|
||
</div>
|
||
{/* toolbar */}
|
||
<div className="flex items-start justify-between gap-x-3 gap-y-1.5 flex-wrap">
|
||
<div className="flex items-center gap-2 shrink-0">
|
||
<Input className="h-8 w-40 font-mono placeholder:font-sans placeholder:normal-case" placeholder={t('wl.addPh')} value={addCall}
|
||
onChange={(e) => setAddCall(e.target.value.toUpperCase())}
|
||
onKeyDown={(e) => { if (e.key === 'Enter') void add(); }} />
|
||
<label className="flex items-center gap-1.5 text-xs cursor-pointer" title={t('wl.contestHint')}>
|
||
<Checkbox checked={addContest} onCheckedChange={(c) => setAddContest(!!c)} />
|
||
<Trophy className="size-3.5 text-warning" /> {t('wl.addAsContest')}
|
||
</label>
|
||
<Button size="sm" className="h-8" onClick={() => void add()} disabled={!addCall.trim()}>
|
||
<Plus className="size-3.5" /> {t('wl.add')}
|
||
</Button>
|
||
<Input className="h-8 w-28 font-mono placeholder:font-sans placeholder:normal-case" placeholder={t('wl.patternPh')}
|
||
title={t('wl.patternHint')}
|
||
value={pattern}
|
||
onChange={(e) => setPattern(e.target.value.toUpperCase())}
|
||
onBlur={() => { void SetWatchlistContestPattern(pattern.trim()); }} />
|
||
</div>
|
||
<div className="flex items-center gap-2 shrink-0">
|
||
<div className="relative">
|
||
<Search className="size-3.5 absolute left-2 top-1/2 -translate-y-1/2 text-muted-foreground" />
|
||
<Input className="h-8 w-28 pl-7 text-sm" placeholder={t('wl.searchPh')} value={search}
|
||
onChange={(e) => setSearch(e.target.value)} />
|
||
</div>
|
||
{/* families kept together, told apart — per review of the DXHunter port,
|
||
no global contest mode: each entry carries its own rule. */}
|
||
<div className="inline-flex rounded-md border border-border overflow-hidden text-xs">
|
||
{([['all', t('wl.famAll')], ['normal', t('wl.famNormal')], ['contest', t('wl.famContest')]] as const).map(([k, label]) => (
|
||
<button key={k} type="button" onClick={() => setFamily(k)}
|
||
className={cn('px-2 py-1 border-l border-border first:border-l-0',
|
||
family === k ? 'bg-accent font-medium' : 'text-muted-foreground hover:bg-accent/50')}>
|
||
{label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<select value={modeFilter} onChange={(e) => setModeFilter(e.target.value)}
|
||
title={t('wl.modeFilter')}
|
||
className="h-7 px-1.5 rounded-md border border-border bg-background text-xs text-foreground">
|
||
{['ALL', 'CW', 'SSB', 'FT8', 'FT4', 'RTTY', 'DIGI'].map((m) => (
|
||
<option key={m} value={m}>{m === 'ALL' ? t('wl.allModes') : m}</option>
|
||
))}
|
||
</select>
|
||
<button type="button" onClick={() => setActiveOnly((v) => !v)}
|
||
className={cn('px-2 py-1 rounded-md border text-xs', activeOnly ? 'bg-accent border-border font-medium' : 'border-border text-muted-foreground hover:bg-accent/50')}>
|
||
{t('wl.activeOnly')}
|
||
</button>
|
||
<button type="button" onClick={() => setNeededOnly((v) => !v)}
|
||
className={cn('px-2 py-1 rounded-md border text-xs', neededOnly ? 'bg-accent border-border font-medium' : 'border-border text-muted-foreground hover:bg-accent/50')}>
|
||
{t('wl.neededOnly')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{error && <div className="text-xs text-danger px-1">{error}</div>}
|
||
{notice && <div className="text-xs text-success px-1">{notice}</div>}
|
||
|
||
{/* cards */}
|
||
<div className="flex-1 min-h-0 overflow-y-auto space-y-2 pr-1">
|
||
{shown.length === 0 ? (
|
||
<div className="text-sm text-muted-foreground text-center pt-16 max-w-md mx-auto leading-relaxed">
|
||
{entries.length === 0 ? t('wl.empty') : t('wl.noneMatch')}
|
||
</div>
|
||
) : shown.map((e) => {
|
||
const all = (spotsFor.get(e.callsign) ?? []).filter(modeMatches).filter((s2) => settled(e, s2));
|
||
const needed = all.filter((s) => !workedFor(e, s)).length;
|
||
// Needed-only hides the worked LINES as well as the all-worked cards:
|
||
// a filter that says needed and still lists five green Worked rows is
|
||
// answering a different question than the one asked.
|
||
const list = neededOnly ? all.filter((s) => !workedFor(e, s)) : all;
|
||
return (
|
||
<div key={e.callsign}
|
||
className={cn('rounded border bg-card/70 p-3 transition-colors hover:bg-accent/20',
|
||
needed > 0 ? 'border-warning/40' : 'border-border/70',
|
||
e.isContest && 'border-l-4 border-l-warning')}>
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
{/* Proportional, not monospaced: DXHunter sets this one in the
|
||
interface font and the difference is the first thing an
|
||
operator notices with the two windows side by side. There is
|
||
nothing to align here — it is a heading, not a column. */}
|
||
<span className="text-lg font-bold" style={{ color: '#f472b6' }}>{e.callsign}</span>
|
||
{isOnAir(e) && chip('var(--danger)', t('wl.onAir'), 'animate-pulse')}
|
||
{e.isContest && (
|
||
<span className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-semibold bg-warning-muted text-warning-muted-foreground border border-warning-border"
|
||
title={t('wl.contestHint')}>
|
||
<Trophy className="size-3" /> {t('wl.contest')}
|
||
</span>
|
||
)}
|
||
{e.isExpedition && chip('var(--chart-5)', '⚡ ' + t('wl.expedition'))}
|
||
{e.clubLogTotalQSOs > 0 && <span className="text-[11px] text-muted-foreground">{e.clubLogTotalQSOs.toLocaleString()} QSOs{e.clubLogQSOs24h > 0 ? ` · ${e.clubLogQSOs24h}/24h` : ''}</span>}
|
||
{e.clubLogHasOQRS && chip('var(--success)', 'OQRS')}
|
||
{e.clubLogLiveStream && (
|
||
<a href="#" onClick={(ev) => { ev.preventDefault(); void OpenExternalURL(`https://clublog.org/livestream/${e.callsign.replace('*', '')}`); }}
|
||
className="px-1.5 py-0.5 rounded text-[11px] font-semibold border text-info border-info/40 bg-info/10 hover:bg-info/20">Live</a>
|
||
)}
|
||
{list.length > 0 && (needed > 0
|
||
? chip('var(--warning)', e.isContest ? t('wl.nToday', { n: needed }) : t('wl.nNeeded', { n: needed }))
|
||
: chip('var(--success)', e.isContest ? t('wl.workedToday') : t('wl.allWorked')))}
|
||
{e.lastSeenStr && e.lastSeenStr !== 'Never' && (
|
||
<span className="text-[11px] text-muted-foreground">• {e.lastSeenStr}</span>
|
||
)}
|
||
{e.spotCount > 0 && (
|
||
<span className="text-[11px] text-muted-foreground/70">• {t('wl.totalSpots', { n: e.spotCount })}</span>
|
||
)}
|
||
<div className="flex-1" />
|
||
<button type="button" title={t('wl.toggleContest')}
|
||
onClick={() => void WatchlistSetContest(e.callsign, !e.isContest).then(refresh)}
|
||
className={cn('p-1 rounded hover:bg-muted', e.isContest ? 'text-warning' : 'text-muted-foreground/40')}>
|
||
<Trophy className="size-3.5" />
|
||
</button>
|
||
<button type="button" title={e.notify ? t('wl.notifyOff') : t('wl.notifyOn')}
|
||
onClick={() => void WatchlistSetNotify(e.callsign, !e.notify).then(refresh)}
|
||
className={cn('p-1 rounded hover:bg-muted', e.notify ? 'text-warning' : 'text-muted-foreground/40')}>
|
||
{e.notify ? <Bell className="size-3.5" /> : <BellOff className="size-3.5" />}
|
||
</button>
|
||
<button type="button" title={t('wl.remove')}
|
||
onClick={() => void remove(e.callsign)}
|
||
className="p-1 rounded hover:bg-muted text-muted-foreground/40 hover:text-danger">
|
||
<Trash2 className="size-3.5" />
|
||
</button>
|
||
</div>
|
||
|
||
{list.length > 0 ? (
|
||
<div className="mt-2 space-y-1 max-h-52 overflow-y-auto">
|
||
{list.slice(0, 12).map((s, i) => {
|
||
const done = workedFor(e, s);
|
||
const badge = dxccBadge(s);
|
||
const mode = inferSpotMode(s.comment ?? '', s.freq_hz);
|
||
return (
|
||
<button key={i} type="button"
|
||
onClick={() => onSpotSelect?.(s)}
|
||
onDoubleClick={() => onSpotClick?.(s)}
|
||
title={t('wl.spotTip')}
|
||
className={cn('w-full flex items-center gap-2 px-2 py-1.5 rounded text-[11px] bg-muted/25 hover:bg-muted/70 transition-colors text-left',
|
||
!done && 'border-l-2 border-warning')}>
|
||
{/* Worked or wanted, said with a symbol at the head of
|
||
the line as well as with the stripe down its side —
|
||
the same two marks DXHunter uses, and the one an eye
|
||
finds first when a card holds ten rows. */}
|
||
{done
|
||
? <Check className="size-4 shrink-0 text-success" />
|
||
: <AlertTriangle className="size-4 shrink-0 text-warning" />}
|
||
{/* Fixed columns: an elastic country made band/mode/freq start wherever the name ended — every row its own ruler. */}
|
||
<span className="font-bold text-info shrink-0 w-24 truncate">{s.dx_call}</span>
|
||
<span className="text-muted-foreground truncate shrink-0 w-44">{(s as any).country ?? ''}</span>
|
||
<span className="px-1.5 rounded bg-muted shrink-0 w-11 text-center">{s.band}</span>
|
||
<span className="px-1.5 rounded shrink-0 w-11 text-center" style={mode ? { color: 'var(--chart-5)', background: 'color-mix(in srgb, var(--chart-5) 12%, transparent)' } : undefined}>{mode || ' '}</span>
|
||
<span className="font-mono text-muted-foreground shrink-0 w-16 text-right">{fmtMHz(s.freq_hz)}</span>
|
||
{badge && chip(badge.color, badge.label)}
|
||
<div className="flex-1" />
|
||
{done
|
||
? chip('var(--success)', e.isContest ? t('wl.todayOk') : t('wl.worked'))
|
||
: chip('var(--warning)', e.isContest ? t('wl.workToday') : t('wl.needed'))}
|
||
<span className="text-muted-foreground/70 shrink-0">{s.time_utc ?? ''}</span>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
) : (
|
||
<div className="mt-2 text-[11px] text-muted-foreground text-center py-1.5 bg-muted/30 rounded">
|
||
{t('wl.noSpots')}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|