An EventPreview
is used to display an event in a list of events, e.g., on an
overview page, or as header of an event page.
In this example we render speakers with Names
:
<EventPreviewevent={{tag: 'Webinar',title: (<Heading as="h1" mb={3}>Vestibulum proin eu mi nulla ac enim in tempor turpis</Heading>),date: 'October 14, 1983, 1:30 PM EDT (60 minutes)',speakers: <Names values={['Willow Rangall', 'Suzy Cahan']} mb={3} />,href: '/events/vestibulum-proin-eu',registrationLink: '/register',}}m={2}/>
In this example we render speakers with Avatars
and add
a description:
Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum. In hac habitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis, diam erat fermentum justo, nec condimentum neque sapien placerat ante. Nulla justo.
<EventPreviewevent={{tag: 'Webinar',title: (<Heading as="h1" mb={3}>Vestibulum proin eu mi nulla ac enim in tempor turpis</Heading>),date: 'October 14, 1983, 1:30 PM EDT (90 minutes)',speakers: (<Avatarsvalues={[{id: 'a6b4babd-6b11-4b81-8ac0-73cefb040cb7',avatar: (<Imagealt="Portrait of Willow Rangall"sx={{ borderRadius: '50%', height: 64, width: 64 }}src="/avatar0.png"/>),name: (<Heading as="div" sx={{ fontSize: 2, textAlign: 'start' }}>Willow Rangall (Moderator)</Heading>),href: '/profiles/willow-rangall',},{id: '561285d3-4eed-473c-baba-6b3564f4e6a7',avatar: (<Imagealt="Portrait of Suzy Cahan"sx={{ borderRadius: '50%', height: 64, width: 64 }}src="/avatar1.png"/>),name: (<Heading as="div" sx={{ fontSize: 2, textAlign: 'start' }}>Suzy Cahan</Heading>),href: '/profiles/suzy-cahan',},{id: '453d9d8a-b1e6-4cac-9fdd-b6c354fa3262',avatar: (<Imagealt="Portrait of Sandra Abramovici"sx={{ borderRadius: '50%', height: 64, width: 64 }}src="/avatar2.png"/>),name: (<Heading as="div" sx={{ fontSize: 2, textAlign: 'start' }}>Sandra Abramovici</Heading>),href: '/profiles/sandra-abramovici',},]}align="start"mb={3}/>),description: (<Text as="p" variant="text.default" mb={3}>Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sedinterdum venenatis, turpis enim blandit mi, in porttitor pede justo eumassa. Donec dapibus. Duis at velit eu est congue elementum. In hachabitasse platea dictumst. Morbi vestibulum, velit id pretium iaculis,diam erat fermentum justo, nec condimentum neque sapien placerat ante.Nulla justo.</Text>),registrationLink: '/register',}}m={2}/>
This is an example of an event without speakers:
<EventPreviewevent={{tag: 'Webinar',title: (<Heading as="h1" mb={3}>Vestibulum proin eu mi nulla ac enim in tempor turpis</Heading>),date: '14–15 Oct 1983, 12:00–13:30 EDT',href: '/events/vestibulum-proin-eu',registrationLink: '/register',}}m={2}/>
EventPreview
supports space props and
color props from
Styled System.
Name | Type | Default | Required | Description |
---|---|---|---|---|
event | Object | ✓ | See below. |
Name | Type | Default | Required | Description |
---|---|---|---|---|
tag | String | Tag that is dispalyed at the top. | ||
title | Node | ✓ | Component that renders a title (composition pattern). | |
speakers | Node | Component that renders speakers (composition pattern). | ||
date | String | ✓ | Formatted event date. | |
description | Node | Component that renders a description (composition pattern). | ||
href | String | Link to event page. Triggers rendering of details button when present. | ||
registrationLink | String | Link to registration page. Triggers rendering of registration button. |
title
, speakers
and description
are React components that give you
flexibility in how to render an EventPreview
without making its component API
too complicated. But this flexibility comes with the responsiblity to manage
margins. Generally, you should use bottom margins only and no top margins:
title
may not have a top margin, only a bottom margin. The bottom margin
spaces it from what follows, either speakers
or the date.speakers
may not have a top margin, only a bottom margin. The bottom margin
spaces it from the date.description
may not have a top margin, only a bottom margin. The bottom
margin should be zero if it is not followed by a button.You can customize EventPreview
by defining the following variants in your
theme:
Key | Description |
---|---|
event-preview.badge | Customize optional tag. |
event-preview.buttons.event | Customize optional event button. |
event-preview.buttons.registration | Customize optional registration button. |
In this example we define above variants in a ThemeProvider
to customize the
look of the tag and buttons (you would normally do this in your theme):
<ThemeProvidertheme={{buttons: {default: {fontSize: 2,fontWeight: 'bold',borderRadius: 0,},},'event-preview': {badge: {borderRadius: 0,bg: 'secondary',},buttons: {event: {variant: 'buttons.default',bg: 'secondary',},registration: {variant: 'buttons.default',boxShadow: '0 0 0 2px inset',color: 'secondary',bg: 'inherit',},},},}}><EventPreviewevent={{tag: 'Webinar',title: (<Heading as="h1" mb={3}>Vestibulum proin eu mi nulla ac enim in tempor turpis</Heading>),date: 'October 14, 1983, 1:30 PM EDT (60 minutes)',speakers: <Names values={['Willow Rangall', 'Suzy Cahan']} mb={3} />,href: '/events/vestibulum-proin-eu',registrationLink: '/register',}}m={2}/></ThemeProvider>
The following URLs can be used for visual regression testing:
Names
(themed with @undataforum/preset
)Avatars
(themed with @undataforum/preset
)@undataforum/preset
)