Tile
import React, { useRef } from 'react';
import { Row, Col, ImageBadge, Tile, StudyPlanButton } from 'seduo-ui';
const Example = () => (
<Row>
<Col md={6}>
<Tile
href="#"
title="Moric test kurz"
lector="Pavel Moric"
imageSrc="https://dummyimage.com/520x460/9fa4a8/fff.png"
overlay={{ bottomLeft: <ImageBadge theme="dark" text="1h 55min" /> }}
videoRef={useRef(null)}
video={{
src: 'https://lmc-vod.ssl.cdn.cra.cz/0143/9518/cze-hd2-s0U5SoTh.mp4',
type: 'video/mp4',
muted: true,
autoplay: true,
loop: true,
pause: true,
}}
large={true}
/>
</Col>
<Col>
<Tile
href="#"
title="Moric test kurz"
lector="Pavel Moric"
imageSrc="https://dummyimage.com/520x350/9fa4a8/fff.png"
overlay={{ bottomLeft: <ImageBadge theme="dark" text="1h 55min" /> }}
videoRef={useRef(null)}
video={{
src: 'https://lmc-vod.ssl.cdn.cra.cz/0143/9518/cze-hd2-s0U5SoTh.mp4',
type: 'video/mp4',
muted: true,
autoplay: true,
loop: true,
pause: true,
}}
/>
<Tile
href="#"
title="Moric test kurz"
lector="Pavel Moric"
imageSrc="https://dummyimage.com/520x350/9fa4a8/fff.png"
overlay={{ bottomLeft: <ImageBadge theme="dark" text="1h 55min" /> }}
videoRef={useRef(null)}
video={{
src: 'https://lmc-vod.ssl.cdn.cra.cz/0143/9518/cze-hd2-s0U5SoTh.mp4',
type: 'video/mp4',
muted: true,
autoplay: true,
loop: true,
pause: true,
}}
/>
</Col>
</Row>
);
export default Example;
Properties
title: string;
imageSrc: string;
large: boolean;
href?: string;
video?: {
src?: string;
type?: string;
muted?: boolean;
autoplay?: boolean;
loop?: boolean;
pause?: boolean;
};
overlay?: {
topLeft?: React.ReactElement;
topRight?: React.ReactElement;
bottomLeft?: React.ReactElement;
bottomRight?: React.ReactElement;
};
studyPlan?: {
handleAddToStudyPlan: () => void;
handleRemoveFromStudyPlan: () => void;
active: boolean;
className?: string;
title: string;
large?: boolean;
};
isMobile?: boolean;
className?: string;
Various Tiles with Badges
Use if you want to display multiple tiles without video, only one tile with video or if you want each tile to have an independent muted control
import React, { useState } from 'react';
import { ImageBadge, VideoTile } from 'seduo-ui';
const Example = () => {
const [studyPlanActive, setStudyPlanActive] = useState(false);
const handleStudyPlanAction = (action) => {
console.log(action);
setStudyPlanActive(action === 'add');
};
return (
<VideoTile
href="#"
title="Moric test kurz"
lector="Pavel Moric"
imageSrc="https://dummyimage.com/520x350/9fa4a8/fff.png"
overlay={{ bottomLeft: <ImageBadge theme="dark" text="1h 55min" /> }}
video={{
src: 'https://lmc-vod.ssl.cdn.cra.cz/0143/9518/cze-hd2-s0U5SoTh.mp4',
type: 'video/mp4',
}}
studyPlan={{
onAddToStudyPlan: () => handleStudyPlanAction('add'),
onRemoveFromStudyPlan: () => handleStudyPlanAction('remove'),
active: studyPlanActive,
title: studyPlanActive ? 'remove from study plan' : 'add to study plan',
}}
/>
);
};
export default Example;
import React from 'react';
import { ImageBadge, VideoTile } from 'seduo-ui';
const Example = () => (
<VideoTile
title="Program test with log text and multiple course"
lector="Unnamed lector"
imageSrc="https://dummyimage.com/520x350/9fa4a8/fff.png"
video={{
src: 'https://lmc-vod.ssl.cdn.cra.cz/0143/9518/cze-hd2-s0U5SoTh.mp4',
type: 'video/mp4',
}}
overlay={{
bottomLeft: (
<>
<ImageBadge text="4 kurzy" />
<ImageBadge text="1h 55min" />
</>
),
topLeft: <ImageBadge icon="education" text="Vzdělávací program" theme="dark" />,
}}
/>
);
export default Example;
import React from 'react';
import { ImageBadge, Tile } from 'seduo-ui';
const Example = () => (
<Tile
title="Webinar"
lector="Multiple, lector and lector"
imageSrc="https://dummyimage.com/520x350/9fa4a8/fff.png"
overlay={{
bottomLeft: (
<>
<ImageBadge text="2. 2. 2022" />
<ImageBadge text="14:00" />
</>
),
topLeft: <ImageBadge icon="webinar" color="danger" text="Online Webináž" theme="dark" />,
}}
/>
);
export default Example;
VideoTile with Central Volume
Use if you want the sound to be turned on for all tiles in the collection.
import React, { useState } from 'react';
import { Row, Col, ImageBadge, VideoTile } from 'seduo-ui';
const Example = () => {
const [muted, setMuted] = useState(true);
const handleChangeMuted = (newMuteState) => {
setMuted(newMuteState);
};
return (
<Row>
<Col md={6}>
<VideoTile
href="#"
title="Moric test kurz"
lector="Pavel Moric"
imageSrc="https://dummyimage.com/520x350/9fa4a8/fff.png"
overlay={{ bottomLeft: <ImageBadge theme="dark" text="1h 55min" /> }}
video={{
src: 'https://lmc-vod.ssl.cdn.cra.cz/0143/9518/cze-hd2-s0U5SoTh.mp4',
type: 'video/mp4',
muted,
}}
onChangeMute={handleChangeMuted}
/>
</Col>
<Col md={6}>
<VideoTile
title="Program test kurz"
lector="Pavel Moric"
imageSrc="https://dummyimage.com/520x350/9fa4a8/fff.png"
overlay={{
bottomLeft: (
<>
<ImageBadge text="4 kurzy" />
<ImageBadge text="1h 55min" />
</>
),
topLeft: <ImageBadge icon="education" text="Vzdělávací program" theme="dark" />,
}}
video={{
src: 'https://lmc-vod.ssl.cdn.cra.cz/0143/9518/cze-hd2-s0U5SoTh.mp4',
type: 'video/mp4',
muted,
}}
onChangeMute={handleChangeMuted}
/>
</Col>
</Row>
);
};
export default Example;
Properties
// include all Tile properties and
onChangeMute?: (mutedState: boolean) => void;