Enhance UserGridClient and BarList components by adding distance sorting and out-of-range handling. Update MOCK_BARS with distance values for improved functionality.

Author: Supavasinan

app/bar/[id]/UserGridClient.tsx

@@ -7,6 +7,7 @@ import { MapPin, Music, Users } from "lucide-react";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
+import { cn } from "@/lib/utils";
 
 
 interface UserGridClientProps {
@@ -22,6 +23,9 @@ export default function UserGridClient({ bar }: UserGridClientProps) {
   const [sortBy, setSortBy] = useState<"newest" | "oldest" | "alphabetical">("newest");
   const [loading, setLoading] = useState(true);
 
+  // Determine if bar is out of range
+  const isOutOfRange = parseFloat((bar.distance || '').replace(/[^\d.]/g, '')) > 1;
+
   useEffect(() => {
     // Simulate loading data
     setLoading(true);
@@ -188,21 +192,29 @@ export default function UserGridClient({ bar }: UserGridClientProps) {
       </div>
 
       {/* User List */}
-      <div className="flex-1 h-full px-0 pt-4 pb-8 overflow-y-auto">
-        <div className="flex flex-col gap-4 max-w-lg mx-auto">
+      <div className={"flex-1 h-full px-0 pt-4 pb-8 overflow-y-auto"}>
+        <div className={cn(
+          "flex flex-col gap-4 max-w-lg mx-auto",
+          isOutOfRange && "pointer-events-none"
+        )}>
           {filteredUsers.map((user) => (
             <div
               key={user.id}
-              className="bg-card rounded-xl shadow border border-border flex items-center px-4 py-3 gap-3 cursor-pointer hover:bg-muted/60 transition"
-              onClick={() => router.push(`/profile/${user.id}`)}
+              className={cn(
+                "bg-card rounded-xl shadow border border-border flex items-center px-4 py-3 gap-3 transition",
+                !isOutOfRange && "cursor-pointer hover:bg-muted/60"
+              )}
+              onClick={() => {
+                if (!isOutOfRange) router.push(`/profile/${user.id}`);
+              }}
             >
               {/* Profile Image */}
               <Image
                 src={user.avatar || "/default-avatar.png"}
                 alt={user.username}
                 width={56}
                 height={56}
-                className="rounded-full object-cover border-2 border-theme-pink flex-shrink-0 w-12 h-12"
+                className={cn("rounded-full object-cover border-2 border-theme-pink flex-shrink-0 w-12 h-12", isOutOfRange && "blur-sm")}
               />
               {/* User Info */}
               <div className="flex-1 min-w-0">

components/bars/bar-list.tsx

@@ -36,6 +36,13 @@ export function BarList() {
         return a.isOpen ? -1 : 1;
       }
 
+      // Then sort by distance (ascending)
+      const aDist = parseFloat((a.distance || '').replace(/[^\d.]/g, '')) || 9999;
+      const bDist = parseFloat((b.distance || '').replace(/[^\d.]/g, '')) || 9999;
+      if (aDist !== bDist) {
+        return aDist - bDist;
+      }
+
       // Then sort by number of people (descending)
       const aUsers = activeUsersMap[a.id] || 0;
       const bUsers = activeUsersMap[b.id] || 0;

lib/constants.ts

@@ -31,6 +31,7 @@ export const MOCK_BARS: Bar[] = [
     rating: 4.5,
     location: "เอกมัย, กรุงเทพฯ",
     category: "club",
+    distance: "0.3 กม.",
     features: ["Modern Sound System", "LED & Laser Show", "EDM DJs"],
     genre: "EDM",
     todaysBand: "YOUNG T",
@@ -47,6 +48,7 @@ export const MOCK_BARS: Bar[] = [
     category: "club",
     features: ["Festival Vibe", "Multiple Zones", "High Ceiling"],
     genre: "EDM",
+    distance: "1 กม.",
     todaysBand: "DJ SODA",
     isOpen: true,
     coordinates: { lat: 13.735, lng: 100.586 }
@@ -63,6 +65,7 @@ export const MOCK_BARS: Bar[] = [
     genre: "แจ๊ส",
     todaysBand: "-",
     isOpen: true,
+    distance: "5 กม.",
     coordinates: { lat: 13.723, lng: 100.514 }
   }
 ];