Program - Vertical

Below is an example that allows you to render your custom Program component using Plaby's style components.

import {
  ProgramBox,
  ProgramContent,
  ProgramFlex,
  ProgramStack,
  ProgramTitle,
  ProgramText,
  ProgramImage,
  Program,
  ProgramItem
  useProgram,
} from "planby";


const CustomItem = (({ isVerticalMode, program, ...rest }: ProgramItem) => {
  const {
    isRTL,
    styles,
    formatTime,
    set12HoursTimeFormat,
    getRTLSinceTime,
    getRTLTillTime,
    isLive,
    isMinWidth,
  } = useProgram({
    isVerticalMode,
    program,
    ...rest,
  });

  const { data } = program;
  const { image, title, since, till } = data;

  const sinceTime = formatTime(
    getRTLSinceTime(since),
    set12HoursTimeFormat()
  ).toLowerCase();

  const tillTime = formatTime(
    getRTLTillTime(till),
    set12HoursTimeFormat()
  ).toLowerCase();

  return (
    <ProgramBox width={styles.width} style={styles.position}>
      <ProgramContent
        isVerticalMode={isVerticalMode}
        width={styles.width}
        isLive={isLive}
      >
        <ProgramFlex isVerticalMode={isVerticalMode}>
          {isLive && isMinWidth && (
            <ProgramImage
              isVerticalMode={isVerticalMode}
              src={image}
              alt="Preview"
            />
          )}
          <ProgramStack >
            <ProgramTitle>{title}</ProgramTitle>
            <ProgramText>
              {sinceTime} - {tillTime}
            </ProgramText>
          </ProgramStack>
        </ProgramFlex>
      </ProgramContent>
    </ProgramBox>
  );
};