+ {Array.from({ length: 48 }).map((_, i) => (
+
+ ))}
+
+ ) : activeTab === "blips" ? (
+ <>
+ + Showing {blips.length} of{" "} + {metadata?.total ?? blips.length} blips +
+
+ {blips.map((blip) => (
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+ {blip.id}
+
+ ))}
+
+ {colors.map((color) => (
+
+ )}
+
+
+
+ ))}
+
+
+ {color.name}
+ {color.id} · {color.hex}
+ CREATE_CHECKPOINT.}
+ badge={metadata ? `${metadata.total.toLocaleString()} types` : undefined}
+ controls={
+
+
+ }
+ >
+ {isPending ? (
+
+ {(["", "standard", "type-44-46"] as const).map((s) => (
+
+ ))}
+
+
+ {Array.from({ length: 30 }).map((_, i) => (
+
+ ))}
+
+ ) : (
+ <>
+ + Showing {checkpoints.length} of{" "} + {metadata?.total ?? checkpoints.length} checkpoints +
+
+ {checkpoints.map((cp, i) => (
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+ {cp.id}
+ {cp.label && {cp.label}}
+
+ ))}
+
+ {Array.from({ length: 15 }).map((_, i) => (
+
+ ))}
+
+ ) : (
+ <>
+ + Showing {files.length} of{" "} + {metadata?.total ?? files.length} data file types +
+
+
+
+
+
+ | Key | +File Type | +Root Element | +Mounter | +
|---|---|---|---|
| {f.key} | +{f.fileType} | +{f.rootElement} | +{f.mounter} | +
+ {Array.from({ length: 12 }).map((_, i) => (
+
+ ))}
+
+ ) : (
+ <>
+ + Showing {events.length} of{" "} + {metadata?.total ?? events.length} events +
+
+ {events.map((ev) => (
+
+
+
+ ))}
+ {ev.name}
+ {ev.description && (
+ {ev.description}
+ )} +SET_MULTIPLAYER_HANGER_COLOUR and related natives.}
+ badge={total ? `${total.toLocaleString()} components` : undefined}
+ controls={
+
+ {Array.from({ length: 15 }).map((_, i) => (
+
+ ))}
+
+ ) : (
+
+
+
+
+
+ )}
+ | ID | +Component Name | +
|---|---|
| {comp.id} | +{comp.name} | +
HUD_COLOUR_* constants.}
+ badge={metadata ? `${metadata.total.toLocaleString()} colors` : undefined}
+ controls={
+
+ setView(v as "swatches" | "table")}
+ />
+
+ }
+ >
+ {isPending ? (
+ view === "swatches" ? (
+
+ {Array.from({ length: 40 }).map((_, i) => (
+
+ ))}
+
+ ) : (
+ {Array.from({ length: 15 }).map((_, i) => )}
+ )
+ ) : view === "swatches" ? (
+ <>
+
+ {colors.map((c) => (
+
+
+
+ {c.index}
+
+ ))}
+
+
+
+
+
+ | Idx | +Name | +Swatch | +Hex | +RGBA | +
|---|---|---|---|---|
| {c.index} | +{c.name} | ++ | {c.hex} | +{c.r}, {c.g}, {c.b}, {c.a} | +
DRAW_MARKER (IDs 0–43).}
+ badge={total ? `${total} marker types` : undefined}
+ controls={
+
+ {Array.from({ length: 44 }).map((_, i) => (
+
+ ))}
+
+ ) : (
+
+ {markers.map((marker) => (
+
+ )}
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+ ))}
+
+
+ {marker.id}
+ {marker.name && (
+ {marker.name}
+ )}
+ GTA_EVENT_IDS enum entries with sequential IDs for network event handling.}
+ badge={metadata ? `${metadata.total.toLocaleString()} events` : undefined}
+ controls={
+
+ {Array.from({ length: 20 }).map((_, i) => )}
+
+ ) : (
+ <>
+ + Showing {events.length} of{" "} + {metadata?.total ?? events.length} events +
+
+
+
+
+
+ | ID | +Event Name | +
|---|---|
| {ev.id} | +{ev.name} | +
+ {/* Ambient background */}
+
+ );
+}
\ No newline at end of file
diff --git a/app/game-references/ped-models/page.tsx b/app/game-references/ped-models/page.tsx
new file mode 100644
index 0000000..132b3fa
--- /dev/null
+++ b/app/game-references/ped-models/page.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import { useState } from "react";
+import { useFetch } from "@core/useFetch";
+import { API_URL } from "@/packages/utils/src/constants/link";
+import { Users } from "lucide-react";
+import { GameReferencePageShell, ReferenceSearch, ReferencePagination, ReferenceFilterChips } from "../_components/page-shell";
+
+interface PedModel { name: string; category: string; props: number; components: number; imageUrl: string }
+interface ApiResponse {
+ success: boolean; count: number; data: PedModel[];
+ metadata: { total: number; limit: number; offset: number; hasMore: boolean; categories: string[] };
+}
+
+const LIMIT = 50;
+
+export default function PedModelsPage() {
+ const [search, setSearch] = useState("");
+ const [inputValue, setInputValue] = useState("");
+ const [category, setCategory] = useState("");
+ const [offset, setOffset] = useState(0);
+
+ const url = `${API_URL}/api/game-references/ped-models?search=${encodeURIComponent(search)}&category=${encodeURIComponent(category)}&limit=${LIMIT}&offset=${offset}`;
+ const { data, isPending } = useFetch
+
+
+
+
+
+
+ {/* Hero */}
+
+
+
+ {/* Grid */}
+
+
+
+
+
+
+
+
+ + FiveM{" "} + + Reference Data + +
+ ++ Searchable reference tables for GTA V and FiveM internals — blips, + markers, ped models, weapon models, HUD colours, zones, and more. + Everything you need for scripting, mapped and indexed. +
+ + {/* Stats row */} +
+
+
+
+ {totalEntries !== undefined && (
+
+
+
+
+ {totalEntries.toLocaleString()}+
+ {" "}
+ total entries
+
+
+ )}
+
+
+
+ {REFERENCES.map(({ slug, label, description, icon: Icon, color, iconColor, tag }) => {
+ const count = counts[tag];
+ return (
+
+ {/* Icon */}
+
+
+
+
+ {/* Text */}
+
+
+
+ {/* Footer */}
+
+
+ + {label} +
+ {count !== undefined && ( + + {count.toLocaleString()} + + )} ++ {description} +
+
+ Explore
+
+
+ );
+ })}
+ GET_HASH_KEY or REQUEST_MODEL.}
+ badge={metadata ? `${metadata.total.toLocaleString()} models` : undefined}
+ controls={
+
+
+ }
+ >
+ {isPending ? (
+
+ {Array.from({ length: LIMIT }).map((_, i) => (
+
+ ))}
+
+ ) : (
+ <>
+ + Showing {peds.length} of{" "} + {metadata?.total ?? peds.length} peds + {category && <> in "{category}"} +
+
+ {peds.map((ped) => (
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+ ))}
+
+
+ {ped.name}
+ {ped.props}p · {ped.components}c
+ ePickupHashes enum entries with numeric hash values. Use with CREATE_PICKUP_ROTATE and related natives.}
+ badge={metadata ? `${metadata.total.toLocaleString()} pickups` : undefined}
+ controls={
+
+ {Array.from({ length: 20 }).map((_, i) => )}
+
+ ) : (
+ <>
+ + Showing {pickups.length} of{" "} + {metadata?.total ?? pickups.length} pickup hashes +
+
+
+
+
+
+ | Pickup Name | +Hash Value | +
|---|---|
| {p.name} | +{p.hash} | +
+ {Array.from({ length: 9 }).map((_, i) => )}
+
+ ) : (
+ <>
+ + Showing {weapons.length} of{" "} + {metadata?.total ?? weapons.length} weapons + {group && <> in "{group}"} +
+
+ {weapons.map((weapon) => {
+ const key = weapon.hash || weapon.name;
+ const isExpanded = expanded === key;
+ const hasDetails = weapon.description || weapon.components?.length > 0 || weapon.tints?.length > 0;
+ return (
+
+
+
+ );
+ })}
+
+ {weapon.imageUrl && (
+ /* eslint-disable-next-line @next/next/no-img-element */
+ 
+ )}
+
+ {hasDetails && (
+
+
+ {weapon.name}
+ {weapon.hash}
+
+ {weapon.group && (
+ {weapon.group}
+ )}
+ {weapon.dlc && weapon.dlc !== "base" && (
+ {weapon.dlc}
+ )}
+
+
+
+ {isExpanded && (
+
+ )}
+
+ {weapon.modelHashKey && (
+
+ )}
+ Model Hash Key:
+ )}
+ {weapon.description && (
+ {weapon.modelHashKey}{weapon.description}
+ )} + {weapon.components?.length > 0 && ( +
+
+ )}
+ {weapon.tints?.length > 0 && (
+ Components ({weapon.components.length})
+
+ {weapon.components.map((c) =>
+ {c})}
+
+
+ )}
+ Tints ({weapon.tints.length})
+
+ {weapon.tints.map((t) => {t})}
+
+ GET_NAME_OF_ZONE and related natives.}
+ badge={metadata ? `${metadata.total.toLocaleString()} zones` : undefined}
+ controls={
+
+ {Array.from({ length: 15 }).map((_, i) => )}
+
+ ) : (
+ <>
+ + Showing {zones.length} of{" "} + {metadata?.total ?? zones.length} zones +
+
+
+
+
+
+ | Zone ID | +Name | +Description | +
|---|---|---|
| {zone.zoneNameId} | +{zone.zoneName} | +{zone.description} | +
-
),
},
- icon: Fixie
++ Game References +
+ {/* Panel Header */}
+
+
+
+ {/* Editor */}
+
+
+ Ctrl+Enter to validate
+
+