WelcomeStrip Component

CMS dashboard welcome strip — greeting and optional profile photo. Renders three variants based on first name length and photo presence.

Interactive Preview

Live component with different configuration options. Switch between variants and toggle code view.

Component Examples

Select different variants to see how props affect the component behavior

Example:

Preview

Welcome Jane!

Props

Component accepts the following props for configuration and behavior.

Prop	Type	Required	Default	Description
firstName	string	Required	—	Visitor first name. Drives the "long" branch when length > 8.
profilePhotoUrl	string	Optional	—	Profile photo URL. Empty string and undefined both yield the no-photo variants.

Type Definitions

WelcomeStripProps

Plain props — the component is data-source agnostic. Consumers read firstName / profilePhotoUrl from useHeaderInit().headerData?.user and pass them down.

interface WelcomeStripProps {
  firstName: string
  profilePhotoUrl?: string
}

Usage Examples

Common patterns and implementation examples.

Wired into the dashboard page

import { WelcomeStrip } from '@/components/cms/dashboard'
import { useHeaderInit } from '@/hooks/cms'

export default function CmsDashboard() {
  const { headerData } = useHeaderInit()
  return (
    <WelcomeStrip
      firstName={headerData?.user.firstName ?? ''}
      profilePhotoUrl={headerData?.user.profilePhotoUrl}
    />
  )
}