Layout

TopPage

Storybook

The TopPage component is responsible for organizing and displaying key elements at the top of a page. It includes the page title, breadcrumbs for easy navigation, and a "last updated" date. Additionally, it can show action buttons with labels, icons, and click handlers for quick actions. It also supports a customizable icon button for additional actions and navigation tabs for section switching. This component helps in creating a clean, accessible, and user-friendly interface.

Import

1import { TopPage } from 'dd360-ds'

1import TopPage from 'dd360-ds/TopPage'

Usage

1import { TopPage } from "dd360-ds"
2
3<TopPage title={{label:'TopPage Component'}}/>
4

Description

With the prop Description allows you to display a brief text below the title on the TopPage component. It accepts a string value and is useful for providing additional context or information related to the page.

1import { TopPage } from "dd360-ds"
2
3  <TopPage
4    title={{label:'TopPage Component'}} description="TopPage Component Description" />
5

OptionsBreadcrumbs

With the prop OptionsBreadcrumbs allows allows you to configure the breadcrumb navigation for the TopPage component. It accepts an object with an options array, where each breadcrumb can include a name (the display text) and a to function (which defines the redirect behavior when clicked). Additionally, this prop offers more customization options like separator and isLoading for more control over the breadcrumb rendering. You can check the full list of available options in the API Reference.

1import { TopPage } from "dd360-ds"
2
3  <TopPage
4    title={{label:'TopPage Component'}} 
5    optionsBreadcrumns={
6    {options:[
7    {name:'Home',to:()=>console.log('redirect to Home')},
8    {name:'Dashboard',to:()=>console.log('redirect to Dashboard')}
9    ]}
10    }/>
11

LastUpdate

With the prop LastUpdate allows you to display the last update date on the TopPage component. It accepts an object with a translation value ('en' or 'es') to format the date accordingly, and a date value as a Date object. This helps provide users with clear information about the last update status.

1import { TopPage } from "dd360-ds"
2
3  <TopPage
4    title={{label:'TopPage Component'}} lastUpdate={{tranlation:'en',date:new Date()}} />
5

CallToActionsButtons

With the prop CallToActionsButtons allows you to display a list of action buttons on the TopPage component. Each button accepts a label (string) to define the button text, an onClick (function) to handle the button action, and a variant (string) to customize the button style. You can further customize the buttons. You can check the full list of available options in the API Reference.

1import { TopPage } from "dd360-ds" 
2
3  <TopPage
4    title={{label:'TopPage Component'}} 
5    callToActionsButtons={{
6      label: 'Save Changes',
7      onClick: () => console.log('Save changes action'),
8      variant: 'primary' ,
9    }} />
10

ActionIcon

With the prop ActionIcon, you can display a list of action icons on the TopPage component. Each icon accepts a titleIcon (ReactNode) to define the icon to display, an onClick (function) to handle the action when clicked, and an isSelected (boolean) to control the active state of the icon. You can further customize the icons and their behavior. You can check the full list of available options in the API Reference.

1import { TopPage } from "dd360-ds" 
2import DynamicHeroIcon from 'dd360-ds/DynamicHeroIcon'
3
4  <TopPage
5    title={{label:'TopPage Component'}} 
6    actionIcon={[{
7     itleIcon: <DynamicHeroIcon icon="TagIcon" className="w-5 h-5" />,
8    onClick: () => console.log('prev state'),
9    isSelected: false
10    }]}/>
11

Tabs

With the prop Tabs, you can display a list of tabs on the TopPage component. The tabs prop accepts a value (number) to define the currently selected tab, a setValue (function) to handle tab selection changes, and an items array where each item includes a label (string) to define the tab name and content (ReactNode) to display the corresponding content. You can check the full list of available options in the API Reference.

1import { TopPage } from "dd360-ds" 
2
3  <TopPage
4    title={{label:'TopPage Component'}} 
5    tabs={{
6    value: 0,
7    setValue: (value) => console.log('Tab changed to', value),
8    items: [
9      { label: 'Tab 1', content: <div>Content for Tab 1</div> },
10      { label: 'Tab 2', content: <div>Content for Tab 2</div>, disabled:true }
11    ]
12    }}/>
13

ClassNameHeader

With the prop ClassNameHeader, you can customize the styling of the header in the TopPage component using a custom CSS class. This allows you to apply background colors, padding, margins, and other styling properties to match the design of your application.

1import { TopPage } from "dd360-ds" 
2
3  <TopPage
4    title={{label:'TopPage Component'}} 
5    classNameHeader='bg-indigo-200'
6 />
7

API Reference