Spaces:
Runtime error
Runtime error
| import { AbsoluteFill } from "remotion"; | |
| import type { QuoteCardProps } from "../schema"; | |
| import { theme } from "../theme"; | |
| import { Starfield } from "./Starfield"; | |
| export function QuoteCard({ quote, author, publication, brand }: QuoteCardProps) { | |
| const accent = brand.accent ?? theme.blue; | |
| return ( | |
| <AbsoluteFill> | |
| <Starfield count={90} accent={accent} /> | |
| <AbsoluteFill style={{ padding: 110, justifyContent: "center" }}> | |
| <div style={{ width: 80, height: 4, background: accent, boxShadow: `0 0 20px ${accent}`, marginBottom: 48 }} /> | |
| <p style={{ fontFamily: theme.display, fontSize: quote.length > 200 ? 48 : 62, lineHeight: 1.25, color: theme.white }}> | |
| {quote} | |
| </p> | |
| <p style={{ fontFamily: theme.mono, fontSize: 28, marginTop: 48, color: "rgba(255,255,255,0.72)" }}> | |
| {author} | |
| {publication ? ` · ${publication}` : ""} | |
| </p> | |
| </AbsoluteFill> | |
| {brand.logoUrl && ( | |
| <img src={brand.logoUrl} style={{ position: "absolute", right: 60, bottom: 60, width: 72, height: 72 }} /> | |
| )} | |
| </AbsoluteFill> | |
| ); | |
| } | |