Videos

The websites profile Videos section (/profile#videos): gray band, centered heading and a grid of YouTube thumbnails with titles, each opening the video dialog.

Complete widgetClient component@pandaidx/widgets 1.14.1

Anatomy

Every piece of Videos 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

<VideoGallery />complete widget

The websites profile Videos section (/profile#videos): gray band, centered heading and a grid of YouTube thumbnails with titles, each…

<VideoModal />complete widget

The websites video dialog: a 16:9 player (YouTube, Vimeo, Wistia, MP4) over a dark backdrop, playing while open.

</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

VideoGallery

// app/profile/page.tsx (section)
import { VideoGallery } from "@pandaidx/widgets/client"
import { fetchVideos } from "@pandaidx/widgets/server"

export default async function ProfileVideos() {
  const { videos } = await fetchVideos({ publicKey: process.env.NEXT_PUBLIC_PANDA_PUBLIC_KEY!, apiUrl: process.env.NEXT_PUBLIC_PANDA_API_URL })
  return <VideoGallery videos={videos} title="Videos" />
}

API reference

VideoGallery

The websites profile Videos section (/profile#videos): gray band, centered heading and a grid of YouTube thumbnails with titles, each opening the video dialog. Renders nothing without videos.

Import from @pandaidx/widgets/client

Prop	Type	Default	Description
videos*	array	—	Profile videos (`title`, `url`, `thumbnail`).
title	string	"Videos"	Section heading.
playLabel	string	"Play video"	Text of each tile's play button.
invalidLabel	string	"Invalid Youtube Video URL"	Tile text for a video without a thumbnail.
id	string	"videos"	Section id (in-page anchor).
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`).

VideoModal

The websites video dialog: a 16:9 player (YouTube, Vimeo, Wistia, MP4) over a dark backdrop, playing while open. Wrap any trigger (hero play button, thumbnail) or control it with open.

Import from @pandaidx/widgets/client

Prop	Type	Default	Description
url*	string	—	Video URL (profile/building/new development video, hero `coverVideo`).
children	node	—	Trigger element; default an outline `Play video` button.
label	string	"Play video"	Text of the default trigger button.
title	string	"Video Player"	Accessible (visually hidden) dialog title.
open	boolean	—	Controlled open state (no trigger needed).
onOpenChange	function	—	Called with the next open state.
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.

fetchVideos()widget loader

Profile videos (GET /v1/videos); { videos: [] } when the site has none. Returns WidgetVideosResponse → videos