> ## Documentation Index
> Fetch the complete documentation index at: https://docs.daytalog.com/llms.txt
> Use this file to discover all available pages before exploring further.

# teahouse

> Example of a branded email

<Tabs>
  <Tab title="Preview">
    <Frame caption="Example of a branded email" className="mt-3">
      <iframe srcDoc={`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html dir="ltr" lang="en"><head><link rel="preload" as="image" href="https://assets.daytalog.com/example/teahouse.png"/><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/><meta name="x-apple-disable-message-reformatting"/></head><body style="background-color:#0f172a;color:#f8fafc;font-family:-apple-system,BlinkMacSystemFont,&quot;Segoe UI&quot;,Helvetica,Arial,sans-serif,&quot;Apple Color Emoji&quot;,&quot;Segoe UI Emoji&quot;"><!--$--><div style="display:none;overflow:hidden;line-height:1px;opacity:0;max-height:0;max-width:0">Day 01 - 2025-08-15: Backup report<div> ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿ ‌​‍‎‏﻿</div></div><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation" style="max-width:480px;margin:0 auto;padding:24px 16px;margin-bottom:64px"><tbody><tr style="width:100%"><td><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td align="center" data-id="__react-email-column"><img height="50" src="https://assets.daytalog.com/example/teahouse.png" style="display:block;outline:none;border:none;text-decoration:none"/></td></tr></tbody></table><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="0" role="presentation"><tbody><tr><td><h1 style="font-size:18px;font-weight:700;margin:0 0 8px;text-align:center">Day <!-- -->01<!-- --> - <!-- -->20250815</h1><p style="font-size:14px;line-height:24px;margin:0 0 16px;text-align:center;margin-bottom:16px;margin-top:0;margin-left:0;margin-right:0">All files have successfully been processed.</p><table align="center" width="100%" border="0" cellPadding="0" cellSpacing="16" role="presentation"><tbody style="width:100%"><tr style="width:100%"><td data-id="__react-email-column" style="background-color:#0f172a;border-radius:8px;border:2px solid;padding:12px;min-width:110px;text-align:center;border-color:#3b82f6"><p style="font-size:24px;line-height:24px;font-weight:700;margin:0 0 4px;margin-bottom:4px;margin-top:0;margin-left:0;margin-right:0">30.2 GB</p><p style="font-size:10px;line-height:24px;text-transform:uppercase;letter-spacing:1px;margin:0;margin-bottom:0;margin-top:0;margin-left:0;margin-right:0">OCF</p></td><td data-id="__react-email-column" style="background-color:#0f172a;border-radius:8px;border:2px solid;padding:12px;min-width:110px;text-align:center;border-color:#10b981"><p style="font-size:24px;line-height:24px;font-weight:700;margin:0 0 4px;margin-bottom:4px;margin-top:0;margin-left:0;margin-right:0">653 MB</p><p style="font-size:10px;line-height:24px;text-transform:uppercase;letter-spacing:1px;margin:0;margin-bottom:0;margin-top:0;margin-left:0;margin-right:0">PROXY</p></td><td data-id="__react-email-column" style="background-color:#0f172a;border-radius:8px;border:2px solid;padding:12px;min-width:110px;text-align:center;border-color:#7c3aed"><p style="font-size:24px;line-height:24px;font-weight:700;margin:0 0 4px;margin-bottom:4px;margin-top:0;margin-left:0;margin-right:0">140 MB</p><p style="font-size:10px;line-height:24px;text-transform:uppercase;letter-spacing:1px;margin:0;margin-bottom:0;margin-top:0;margin-left:0;margin-right:0">Sound</p></td></tr></tbody></table><p style="font-size:12px;line-height:24px;text-align:center;margin:8px 0 0;margin-bottom:0;margin-top:8px;margin-left:0;margin-right:0"></p><p style="font-size:12px;line-height:24px;text-align:center;margin:8px 0 0;margin-bottom:0;margin-top:8px;margin-left:0;margin-right:0">No tea was spilled during offload</p><p style="font-size:10px;line-height:24px;text-align:center;margin:16px 0 0;margin-bottom:0;margin-top:16px;margin-left:0;margin-right:0">Teahouse Post - 418 Brew Avenue, CA</p></td></tr></tbody></table></td></tr></tbody></table><p style="font-size:12px;line-height:24px;color:#6a737d;text-align:center;margin-top:60px;margin-bottom:16px">Powered by daytalog</p><!--7--><!--/$--></body></html>`} className="w-full h-[400px] rounded-xl" />
    </Frame>
  </Tab>

  <Tab title="Code">
    ```Typescript theme={null}
    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;
    ```
  </Tab>

  <Tab title="Data (.dayta)">
    ```yaml theme={null}
    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

    ```
  </Tab>
</Tabs>
