- Preview
- Code
- Data (.dayta)
Example of a branded email
Copy
import {
Html,
Head,
Preview,
Body,
Container,
Section,
Row,
Column,
Heading,
Text,
Img,
} from '@react-email/components';
import { useDaytalog } from 'daytalog';
const Teahouse: React.FC = () => {
const { log, message } = useDaytalog();
const logo = 'https://assets.daytalog.com/example/teahouse.png';
const note = 'No tea was spilled during offload';
const address = 'Teahouse Post - 418 Brew Avenue, CA';
return (
<Html>
<Head />
<Preview>
Day {log.day(2)} - {log.date()}: Backup report
</Preview>
<Body style={main}>
<Container style={container}>
<Row>
<Column align='center'>
<Img src={logo} height={50} />
</Column>
</Row>
<Section>
<Heading style={title}>
Day {log.day(2)} - {log.date('yyyymmdd')}
</Heading>
<Text style={subtitle}>All files have successfully been processed.</Text>
<Row cellSpacing={16}>
<Column style={{ ...statBox, borderColor: '#3b82f6' }}>
<Text style={statValue}>{log.ocf.size().length ? log.ocf.size() : '-'}</Text>
<Text style={statLabel}>OCF</Text>
</Column>
<Column style={{ ...statBox, borderColor: '#10b981' }}>
<Text style={statValue}>{log.proxy.size().length ? log.proxy.size() : '-'}</Text>
<Text style={statLabel}>PROXY</Text>
</Column>
<Column style={{ ...statBox, borderColor: '#7c3aed' }}>
<Text style={statValue}>{log.sound.size().length ? log.sound.size() : '-'}</Text>
<Text style={statLabel}>Sound</Text>
</Column>
</Row>
<Text style={noteStyle}>{message}</Text>
<Text style={noteStyle}>{note}</Text>
<Text style={footer}>{address}</Text>
</Section>
</Container>
</Body>
</Html>
);
};
const main: React.CSSProperties = {
backgroundColor: '#0f172a',
color: '#f8fafc',
fontFamily:
'-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"',
};
const container: React.CSSProperties = {
maxWidth: '480px',
margin: '0 auto',
padding: '24px 16px',
marginBottom: '64px',
};
const title: React.CSSProperties = {
fontSize: '18px',
fontWeight: '700',
margin: '0 0 8px',
textAlign: 'center',
};
const subtitle: React.CSSProperties = {
fontSize: '14px',
margin: '0 0 16px',
textAlign: 'center',
};
const statBox: React.CSSProperties = {
backgroundColor: '#0f172a',
borderRadius: '8px',
border: '2px solid',
padding: '12px',
minWidth: '110px',
textAlign: 'center',
};
const statValue: React.CSSProperties = {
fontSize: '24px',
fontWeight: '700',
margin: '0 0 4px',
};
const statLabel: React.CSSProperties = {
fontSize: '10px',
textTransform: 'uppercase',
letterSpacing: '1px',
margin: 0,
};
const noteStyle: React.CSSProperties = {
fontSize: '12px',
textAlign: 'center',
margin: '8px 0 0',
};
const footer: React.CSSProperties = {
fontSize: '10px',
textAlign: 'center',
margin: '16px 0 0',
};
export default Teahouse;
Copy
day: 1
date: 2025-08-15
ocf:
clips:
- clip: A001C001
size: 7572467904
copies:
- volume: Raid
hash: 4607f64fcae33728
- volume: Master_01
hash: 4607f64fcae33728
- volume: Backup_01
hash: 4607f64fcae33728
tc_start: 10:13:25:08
tc_end: 10:14:01:13
duration: 00:00:36:05
camera_model: CinemaCamera
reel: A001
fps: 25
sensor_fps: 25
lens: 40 mm
shutter: 180
resolution: 4608x3164
codec: ProRes 4444
gamma: LOG-C
ei: 800
wb: 5300
tint: "+0.0"
lut: commercial.cube
- clip: A001C002
size: 8642912484
copies:
- volume: Raid
hash: b90261cadf8aab43
- volume: Master_01
hash: b90261cadf8aab43
- volume: Backup_01
hash: b90261cadf8aab43
tc_start: 10:15:18:07
tc_end: 10:15:59:04
duration: 00:00:40:22
camera_model: CinemaCamera
reel: A001
fps: 25
sensor_fps: 25
lens: 40 mm
shutter: 180
resolution: 4608x3164
codec: ProRes 4444
gamma: LOG-C
ei: 800
wb: 5300
tint: "+0.0"
lut: commercial.cube
- clip: A001C003
size: 13965590828
copies:
- volume: Raid
hash: d21f12407d0ca819
- volume: Master_01
hash: d21f12407d0ca819
- volume: Backup_01
hash: d21f12407d0ca819
tc_start: 10:16:28:14
tc_end: 10:17:35:14
duration: 00:01:07:00
camera_model: CinemaCamera
reel: A001
fps: 25
sensor_fps: 25
lens: 40 mm
shutter: 180
resolution: 4608x3164
codec: ProRes 4444
gamma: LOG-C
ei: 800
wb: 5300
tint: "+0.0"
lut: commercial.cube
sound:
clips:
- clip: Clip001
size: 43926156
copies:
- volume: Raid
hash: b69d17d38b5fcb32
- volume: Master_01
hash: b69d17d38b5fcb32
- volume: Backup_01
hash: b69d17d38b5fcb32
tc_start: 10:13:07:00
tc_end: 10:14:08:00
- clip: Clip002
size: 38886174
copies:
- volume: Raid
hash: 2157d011ed699744
- volume: Master_01
hash: 2157d011ed699744
- volume: Backup_01
hash: 2157d011ed699744
tc_start: 10:15:09:00
tc_end: 10:16:03:00
- clip: Clip003
size: 57606144
copies:
- volume: Raid
hash: 8f520e1bed7eec41
- volume: Master_01
hash: 8f520e1bed7eec41
- volume: Backup_01
hash: 8f520e1bed7eec41
tc_start: 10:16:18:00
tc_end: 10:17:38:00
proxy:
clips:
- clip: A001C001
size: 159900258
format: MOV
codec: prores
resolution: 1920x1080
- clip: A001C002
size: 186713854
format: MOV
codec: prores
resolution: 1920x1080
- clip: A001C003
size: 305947102
format: MOV
codec: prores
resolution: 1920x1080
version: 1