viktor/wrongmove
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style: redesign PropertyCard with better visual hierarchy

Browse source
This commit is contained in:
Viktor Barzin 2026-02-28 16:21:17 +00:00
parent be2f0ef282
commit 812bfece4a
No known key found for this signature in database
GPG key ID: 0EB088298288D958
2 changed files with 132 additions and 165 deletions
Download patch file Download diff file Expand all files Collapse all files

45
frontend/src/components/PropertyCardCompact.tsx
View file

@ -1,4 +1,4 @@
import { Bed, Maximize2 } from 'lucide-react';
import { Bed, MapPin } from 'lucide-react';
import type { PropertyProperties } from '@/types';
interface PropertyCardCompactProps {
@ -20,20 +20,20 @@ export function PropertyCardCompact({
const isExpensive = avgPricePerSqm && property.qmprice > avgPricePerSqm * 1.1;
const priceIndicator = isGoodDeal
? { color: 'text-green-600 bg-green-50', label: 'Good deal' }
? { dotColor: 'bg-[var(--deal-good)]', label: 'Good deal' }
: isExpensive
? { color: 'text-red-600 bg-red-50', label: 'Above avg' }
? { dotColor: 'bg-[var(--deal-above)]', label: 'Above avg' }
: null;
return (
<div
className={`w-[280px] shrink-0 snap-center rounded-lg border bg-background shadow-sm overflow-hidden cursor-pointer transition-all ${
className={`w-[280px] shrink-0 snap-center rounded-lg border bg-card shadow-sm overflow-hidden cursor-pointer transition-shadow hover:shadow-md ${
isActive ? 'ring-2 ring-primary scale-[1.02]' : ''
} ${isHighlighted ? 'ring-2 ring-primary' : ''}`}
onClick={onClick}
>
{/* Thumbnail */}
<div className="h-28 w-full bg-muted">
{/* Thumbnail with 4:3 aspect ratio */}
<div className="aspect-[4/3] w-full bg-muted">
{property.photo_thumbnail && (
<img
src={property.photo_thumbnail}
@ -44,32 +44,37 @@ export function PropertyCardCompact({
</div>
{/* Details */}
<div className="p-3">
<div className="flex items-start justify-between gap-2">
<div className="font-semibold text-base">
<div className="p-3 space-y-1">
{/* Price bold */}
<div className="flex items-center gap-1.5">
<span className="font-bold text-base">
£{property.total_price.toLocaleString()}
{property.listing_type !== 'BUY' && (
<span className="text-muted-foreground font-normal text-sm">/mo</span>
)}
</div>
</span>
{priceIndicator && (
<span className={`text-xs px-1.5 py-0.5 rounded shrink-0 ${priceIndicator.color}`}>
{priceIndicator.label}
</span>
<span className={`w-2 h-2 rounded-full shrink-0 ${priceIndicator.dotColor}`} title={priceIndicator.label} />
)}
</div>
<div className="flex items-center gap-3 mt-1.5 text-sm text-muted-foreground">
{/* Beds and size */}
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<span className="flex items-center gap-1">
<Bed className="h-3.5 w-3.5" />
{property.rooms}
{property.rooms} bed
</span>
<span className="flex items-center gap-1">
<Maximize2 className="h-3.5 w-3.5" />
{property.qm} m²
</span>
<span>£{property.qmprice}/m²</span>
<span>·</span>
<span>{property.qm} m²</span>
</div>
{/* Location */}
{property.city && (
<div className="flex items-center gap-1 text-xs text-muted-foreground truncate">
<MapPin className="h-3 w-3 shrink-0" />
{property.city}
</div>
)}
</div>
</div>
);