feat: Built the Oracle Tab1 (#14)
#13 Built the complete Oracle Tab with all the functionalities. Co-authored-by: Sayan Datta <sayan@Sayans-MacBook-Air.local> Reviewed-on: #14
This commit was merged in pull request #14.
This commit is contained in:
@@ -20,7 +20,7 @@ import { Canvas } from '@react-three/fiber';
|
||||
import { Bounds, Html, OrbitControls, useGLTF } from '@react-three/drei';
|
||||
import * as THREE from 'three';
|
||||
import { useStore } from '@/store/useStore';
|
||||
import { formatCurrency } from '@/lib/utils';
|
||||
import { useCurrency } from '@/store/useCurrencyStore';
|
||||
import type { Unit } from '@/types';
|
||||
|
||||
// Penthouse preview images — one per unit (u1–u8) for card thumbnails
|
||||
@@ -227,6 +227,7 @@ function PropertyDetailModal({
|
||||
}) {
|
||||
const details = UNIT_DETAILS[unit.id] ?? DEFAULT_DETAILS;
|
||||
const preview = UNIT_PREVIEWS[unit.id] ?? UNIT_PREVIEWS['u1'];
|
||||
const { formatAmount } = useCurrency();
|
||||
|
||||
const statusColors: Record<string, string> = {
|
||||
available: 'text-emerald-300 border-emerald-400/30 bg-emerald-500/10',
|
||||
@@ -282,8 +283,8 @@ function PropertyDetailModal({
|
||||
{/* Overlay price */}
|
||||
<div className="absolute bottom-4 left-5">
|
||||
<p className="text-xs text-zinc-400">Starting from</p>
|
||||
<p className="text-3xl font-bold tracking-tight text-white">{formatCurrency(unit.price)}</p>
|
||||
<p className="text-xs text-zinc-400">{formatCurrency(pricePerSqm)} / m²</p>
|
||||
<p className="text-3xl font-bold tracking-tight text-white">{formatAmount(unit.price)}</p>
|
||||
<p className="text-xs text-zinc-400">{formatAmount(pricePerSqm)} / m²</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -371,8 +372,8 @@ function PropertyDetailModal({
|
||||
{/* Pricing card */}
|
||||
<div className="rounded-2xl border border-white/10 bg-white/5 p-4">
|
||||
<p className="mb-3 text-xs uppercase tracking-widest text-zinc-500">Pricing</p>
|
||||
<p className="text-2xl font-bold text-zinc-100">{formatCurrency(unit.price)}</p>
|
||||
<p className="mt-0.5 text-xs text-zinc-500">{formatCurrency(pricePerSqm)} per m²</p>
|
||||
<p className="text-2xl font-bold text-zinc-100">{formatAmount(unit.price)}</p>
|
||||
<p className="mt-0.5 text-xs text-zinc-500">{formatAmount(pricePerSqm)} per m²</p>
|
||||
<div className="my-3 border-t border-white/10" />
|
||||
<div className="space-y-1.5 text-sm">
|
||||
<div className="flex justify-between">
|
||||
@@ -441,6 +442,7 @@ function UnitCard({
|
||||
}) {
|
||||
const preview = UNIT_PREVIEWS[unit.id] ?? UNIT_PREVIEWS['u1'];
|
||||
const [hovered, setHovered] = useState(false);
|
||||
const { formatAmount } = useCurrency();
|
||||
|
||||
// Status accent color for glow
|
||||
const statusGlow =
|
||||
@@ -524,7 +526,7 @@ function UnitCard({
|
||||
{/* Price */}
|
||||
<div className="mb-3">
|
||||
<p className="stat-label mb-0.5">Starting from</p>
|
||||
<p className="text-xl font-bold leading-none tracking-tight text-white">{formatCurrency(unit.price)}</p>
|
||||
<p className="text-xl font-bold leading-none tracking-tight text-white">{formatAmount(unit.price)}</p>
|
||||
</div>
|
||||
|
||||
{/* Divider */}
|
||||
@@ -731,6 +733,7 @@ function StudioWindow({
|
||||
}
|
||||
|
||||
function RightMapPane({ units }: { units: Unit[] }) {
|
||||
const { formatAmount } = useCurrency();
|
||||
return (
|
||||
<div className="relative h-full min-h-[36rem] overflow-hidden rounded-2xl border border-white/10 bg-zinc-900/70">
|
||||
<iframe title="Dubai Map" src={MAP_EMBED_URL} className="h-full w-full border-0" loading="lazy" referrerPolicy="no-referrer-when-downgrade" />
|
||||
@@ -741,7 +744,7 @@ function RightMapPane({ units }: { units: Unit[] }) {
|
||||
<div className="absolute bottom-3 left-3 right-3 grid grid-cols-2 gap-2 rounded-xl border border-white/15 bg-zinc-900/75 p-2 backdrop-blur-xl">
|
||||
{units.slice(0, 4).map((unit) => (
|
||||
<div key={unit.id} className="rounded-lg border border-white/10 bg-white/5 px-2 py-1 text-xs text-zinc-200">
|
||||
{unit.unitNumber} - {formatCurrency(unit.price)}
|
||||
{unit.unitNumber} - {formatAmount(unit.price)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -762,6 +765,7 @@ function UnitRow({
|
||||
onOpen3D: (u: Unit) => void;
|
||||
onOpenBlueprint: (u: Unit) => void;
|
||||
}) {
|
||||
const { formatAmount } = useCurrency();
|
||||
return (
|
||||
<motion.div
|
||||
className="flex items-center gap-4 px-4 py-3 rounded-xl cursor-pointer transition-colors"
|
||||
@@ -795,7 +799,7 @@ function UnitRow({
|
||||
<p className="text-xs" style={{ color: 'hsl(var(--muted-fg))' }}>{unit.view}</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-sm font-bold text-white">{formatCurrency(unit.price)}</p>
|
||||
<p className="text-sm font-bold text-white">{formatAmount(unit.price)}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user