95 lines
2.8 KiB
TypeScript
95 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { useI18n } from "@/lib/i18n";
|
|
import {
|
|
clearRecentDestinations,
|
|
loadRecentDestinations,
|
|
type RecentDestination,
|
|
} from "@/lib/recentDestinations";
|
|
import { meetupCityHref } from "@/lib/meetupLinks";
|
|
|
|
interface Props {
|
|
compact?: boolean;
|
|
}
|
|
|
|
export default function RecentlyViewed({ compact = false }: Props) {
|
|
const { t } = useI18n();
|
|
const [items, setItems] = useState<RecentDestination[]>([]);
|
|
|
|
useEffect(() => {
|
|
setItems(loadRecentDestinations());
|
|
}, []);
|
|
|
|
if (items.length === 0) return null;
|
|
|
|
return (
|
|
<section className={`recently-viewed${compact ? " compact" : ""}`} aria-label={t.recent.title}>
|
|
<div className={compact ? undefined : "container"}>
|
|
<div className="recently-viewed-head">
|
|
<div>
|
|
<span className="section-tag">{t.recent.tag}</span>
|
|
<h2>{t.recent.title}</h2>
|
|
{!compact && <p className="section-desc">{t.recent.subtitle}</p>}
|
|
</div>
|
|
<div className="recently-viewed-actions">
|
|
{!compact && (
|
|
<Link href="/compare" className="btn btn-ghost btn-sm">
|
|
{t.nav.compare}
|
|
</Link>
|
|
)}
|
|
<button
|
|
type="button"
|
|
className="btn btn-ghost btn-sm"
|
|
onClick={() => {
|
|
clearRecentDestinations();
|
|
setItems([]);
|
|
}}
|
|
>
|
|
{t.common.clear}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="recently-viewed-grid">
|
|
{items.map((d) => (
|
|
<Link key={d.slug} href={`/destinations/${d.slug}`} className="recently-viewed-card">
|
|
<span className="recently-viewed-emoji" aria-hidden>
|
|
{d.emoji}
|
|
</span>
|
|
<div>
|
|
<strong>
|
|
{d.name}
|
|
<span className="recently-viewed-country">, {d.country}</span>
|
|
</strong>
|
|
<p>
|
|
¥{d.cost.toLocaleString()}/mo · ⭐ {d.rating}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
{items.length >= 2 && (
|
|
<div className="recently-viewed-compare">
|
|
<Link
|
|
href={`/compare?cities=${items
|
|
.slice(0, 4)
|
|
.map((d) => d.slug)
|
|
.join(",")}`}
|
|
className="btn btn-primary btn-sm"
|
|
>
|
|
{t.recent.compareRecent}
|
|
</Link>
|
|
<Link href={meetupCityHref(items[0].name)} className="btn btn-sm">
|
|
{t.common.cityMeetups}
|
|
</Link>
|
|
<Link href="/plan" className="btn btn-ghost btn-sm">
|
|
{t.strip.openPlan}
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|