Homepage sections

Complete widgetClient component@pandaidx/widgets 1.14.1

Anatomy

Every piece of Homepage sections as it nests in code. A root holds the data and state; its parts and hooks only work inside it.

<PandaProvider>Mounted once in app/layout.tsx

<FeaturedCollections />complete widget

The homepage "Discover Signature Collections" section of the Panda websites: the collections the owner put on the homepage, then the saved…

<AreaLibraries />complete widget

The area libraries of the Panda websites homepage (dashboard → Libraries, placement Homepage), each in its own theme: classic area cards…

<FeaturedNewDevelopments />complete widget

The featured new developments of the Panda websites homepage: cards with the photo slider (logo on hover, dots, "View photos"), name, video…

<LatestStories />complete widget

The homepage stories section of the Panda websites: "Featured Stories" (or "Latest Stories" when none is featured), the first story large…

</PandaProvider>

Installation

npm install <tarball or @pandaidx/widgets>

Terminal

npm install https://github.com/pandaidx/panda-widgets/releases/download/v1.14.1/pandaidx-widgets-1.14.1.tgz

2
import "@pandaidx/widgets/styles.css" in app/layout.tsx
3
Wrap the site in <PandaProvider publicKey apiUrl preset theme> (app/layout.tsx)
4
In each page (Server Component) call the widget's server loader, then render the widget with its data
5
Allow the images: next.config images.remotePatterns [{ protocol: "https", hostname: "**" }] (listing and blog photos come from several CDNs)

Usage

FeaturedCollections

<FeaturedCollections data={await fetchFeaturedCollections({ publicKey, apiUrl })} />

API reference

FeaturedCollections

The homepage "Discover Signature Collections" section of the Panda websites: the collections the owner put on the homepage, then the saved searches assigned to it (dashboard), as rounded cards with a photo collage, price / beds / size ranges, the owner badge and the share dialog. Data-driven: empty data renders nothing.

Import from @pandaidx/widgets/client · renders inside PandaProvider

Prop	Type	Default	Description
data*	object	—	`{ collections, savedSearches, owner, siteUrl }` (null renders nothing).
title	string	"Discover Signature Collections"	Section heading.
subtitle	string	"The most exclusive listings for you"	Copy under the heading.
showCollections	boolean	true	Shows the collections.
showSavedSearches	boolean	true	Shows the saved searches.
limit	number	—	Max cards (collections first).
showOwner	boolean	true	Owner avatar + name on every card.
showShare	boolean	true	Share button on every card.
divider	boolean	true	Divider under the section, like websites.
classNames	object	—	Classes appended to `section`, `grid`, `card`.
preset	"default" \| "template1"	—	Preset for this widget only (defaults to the provider preset).
variant	"default" \| "template1"	—	Deprecated alias of `preset`.
theme	object	—	Token overrides for this widget only, merged over the provider theme (same shape as `PandaProvider.theme`).

AreaLibraries

The area libraries of the Panda websites homepage (dashboard → Libraries, placement Homepage), each in its own theme: classic area cards (four status links, or live counters + week trends when the plan includes market data), the dark two tiles that reveal the status buttons on hover / first tap, or the dark two-column squares, plus "Show all" to the library page. Links are the API area search paths (/for-sale/<area> …).

Import from @pandaidx/widgets/client · renders inside PandaProvider

Prop	Type	Default	Description
data*	object	—	`{ libraries, enableData }` (null renders nothing).
libraryTheme	"auto" \| "classic" \| "two" \| "modernTwoColumns"	"auto"	Design of every library; `auto` uses each library's dashboard theme.
limit	number	—	Max areas per library (the API sends up to 9).
showData	boolean	—	Market counters and week trends (default `data.enableData`, the plan flag).
showViewAll	boolean	true	"Show all" link / tile to the library page.
divider	boolean	true	Divider under classic libraries.
classNames	object	—	Classes appended to `section`, `title`, `grid`, `card`, `button`.
preset	"default" \| "template1"	—	Preset for this widget only (defaults to the provider preset).
variant	"default" \| "template1"	—	Deprecated alias of `preset`.
theme	object	—	Token overrides for this widget only, merged over the provider theme (same shape as `PandaProvider.theme`).

FeaturedNewDevelopments

The featured new developments of the Panda websites homepage: cards with the photo slider (logo on hover, dots, "View photos"), name, video and share buttons, address, price range and HOA, and "View all" to the directory.

Import from @pandaidx/widgets/client · renders inside PandaProvider

Prop	Type	Default	Description
data*	object	—	`{ newDevelopments, siteUrl }` (null or empty renders nothing).
title	string	"New Developments"	Section heading.
subtitle	string	—	Copy under the heading (default the websites copy).
limit	number	—	Max cards shown.
columns	1 \| 2 \| 3	2	Cards per row from `sm` up.
viewAllHref	string	"/new-developments"	"View all" link (empty hides it).
divider	boolean	true	Divider above the section, like websites.
classNames	object	—	Classes appended to `section`, `grid`, `card`, `button`.
preset	"default" \| "template1"	—	Preset for this widget only (defaults to the provider preset).
variant	"default" \| "template1"	—	Deprecated alias of `preset`.
theme	object	—	Token overrides for this widget only, merged over the provider theme (same shape as `PandaProvider.theme`).

LatestStories

The homepage stories section of the Panda websites: "Featured Stories" (or "Latest Stories" when none is featured), the first story large with its author, the next six in a 1/2/3-column grid with relative dates and read time (the panda BlogList story cards), and "Show all posts".

Import from @pandaidx/widgets/client · renders inside PandaProvider

Prop	Type	Default	Description
data*	object	—	`{ posts, featured, owner }` (null or empty renders nothing).
title	string	—	Heading (default Featured Stories / Latest Stories).
subtitle	string	—	Copy under the heading (default the websites copy).
limit	number	7	Stories shown: the first large + the rest in the grid.
hrefs	object	{"article":"/story/{slug}","category":"/stories/category/{slug}","author":"/profile"}	Host routes (`{slug}` placeholder) of the article, category and author (site owner) pages.
viewAllHref	string	"/stories"	"Show all posts" link (empty hides it).
divider	boolean	true	Divider above the section, like websites.
classNames	object	—	Classes appended to `section`, `grid`, `card`, `button`.
preset	"default" \| "template1"	—	Preset for this widget only (defaults to the provider preset).
variant	"default" \| "template1"	—	Deprecated alias of `preset`.
theme	object	—	Token overrides for this widget only, merged over the provider theme (same shape as `PandaProvider.theme`).

Server data

Loaders run in a Server Component and come from @pandaidx/widgets/server. Typed data is for a page you design yourself, rendered inside the root.

fetchFeaturedCollections()widget loader

GET /v1/featured-listings (homepage collections with their first cards and collage photos, homepage saved searches) + GET /v1/site (owner badge, share origin). Returns FeaturedCollectionsData | null → data

fetchAreaLibraries()widget loader

GET /v1/areas?placement= (libraries with theme, title, subtitle, page path and areas with photo, status paths and live stats) + the plan's market data flag (GET /v1/site). Returns AreaLibrariesData | null → data

fetchFeaturedNewDevelopments()widget loader

GET /v1/new-developments?placement=featured (the owner's featured projects) + the share origin (GET /v1/site). Returns FeaturedNewDevelopmentsData | null → data

fetchLatestStories()widget loader

GET /v1/blog?featured=1&pageSize= (featured posts first, else the latest) + the owner as author fallback (GET /v1/site). Returns LatestStoriesData | null → data