0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import React from "react"
import { TemplateProps } from "@flayyer/flayyer-types";
import clsx from "clsx";

import "../styles/tailwind.css";
import logo from "../static/logo.svg";

// https://flayyer.io/v2/flayyer/demo/main.jpeg?title=Create+more+engagement
type Variables = { title: string, img?: string };

export default function MainTemplate({ agent, variables }: TemplateProps<Variables>) {
  const { title, img = "https://images.unsplash.com/photo-1601933552240-d6b9e8e01cdc?w=1200" } = variables;
  if (agent.name === FlayyerAgentName.WHATSAPP) {
    return (
      <Layer className="bg-gray-800 p-20">
        <img src={logo} className="w-full h-full" />
      </Layer>
    );
  }
  return (
    <div>
      <Layer>
        <img className="w-full h-full object-cover object-bottom" src={img} />
      </Layer>
      <Layer className="bg-gradient-to-r from-gray-900 opacity-70 mr-96" />
      <Layer className="flex flex-col justify-center items-start px-12 py-12 w-1/2">
        <img src={logo} className="w-24 h-24" />
        <h1 className="text-8xl text-white tracking-tight font-semibold">
          {title}
        </h1>
      </Layer>
    </div>
  );
}

function Layer({ className, ...props }: React.ComponentProps<"div">) {
  return <div {...props} className={clsx("absolute inset-0", className)} />;
}