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:
2026-04-11 19:35:45 +05:30
parent 8e1ffe0e43
commit f78655debc
54 changed files with 10651 additions and 818 deletions

View File

@@ -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 (u1u8) 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>