Content 32

import React, { useState } from "react";
import { Button, type ButtonProps } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { FacebookLogo, Link, LinkedinLogo, XLogo } from "relume-icons";

import { Badge } from "@/components/ui/badge";

type ImageProps = {
  src: string;
  alt?: string;
};

type ContributorProps = {
  name: string;
  titleAndCompany: string;
  logo: ImageProps;
};

export type SocialMediaLinksProps = {
  icon: React.ReactNode;
  url: string;
};

type SubscribeProps = {
  title: string;
  inputPlaceholder?: string;
  button: ButtonProps;
  termsAndConditions: string;
};

type Props = {
  contributors: {
    title: string;
    contributorsList: ContributorProps[];
  };
  subscribe: SubscribeProps;
  socialMediaLinks: SocialMediaLinksProps[];
  children: React.ReactNode;
};

export type Content32Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const Content32 = (props: Content32Props) => {
  const { contributors, subscribe, socialMediaLinks, children } = {
    ...Content32Defaults,
    ...props,
  };

  const [emailInput, setEmailInput] = useState<string>("");

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log({
      emailInput,
    });
  };

  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="grid grid-cols-1 gap-8 lg:grid-cols-[0.5fr_1fr] lg:gap-x-20">
          <div className="order-last lg:order-none">
            <div className="lg:sticky lg:top-20 lg:max-w-xxs">
              <div>
                <h6 className="mb-5 text-medium font-bold md:mb-6">{contributors.title}</h6>
                <div className="space-y-5 md:space-y-6">
                  {contributors.contributorsList.map((contributor, index) => (
                    <div className="flex gap-4" key={index}>
                      <div className="size-12 min-h-12 min-w-12 overflow-hidden rounded-full">
                        <img
                          src={contributor.logo.src}
                          alt={contributor.logo.alt}
                          className="size-full object-cover"
                        />
                      </div>
                      <div className="grow">
                        <p className="font-semibold">{contributor.name}</p>
                        <p className="text-small">{contributor.titleAndCompany}</p>
                      </div>
                    </div>
                  ))}
                </div>
                <div className="my-8 h-px bg-scheme-border" />
                <h6 className="mb-3 text-medium font-bold md:mb-4">{subscribe.title}</h6>
                <form className="mb-4 flex flex-col gap-3 sm:gap-4" onSubmit={handleSubmit}>
                  <Input
                    id="email"
                    type="email"
                    placeholder={subscribe.inputPlaceholder}
                    value={emailInput}
                    onChange={(e) => setEmailInput(e.target.value)}
                  />
                  <Button {...subscribe.button}>{subscribe.button.title}</Button>
                </form>
                <div dangerouslySetInnerHTML={{ __html: subscribe.termsAndConditions }} />
                <div className="my-8 h-px bg-scheme-border" />
                <p className="text-medium font-bold">Share</p>
                <div className="mt-5 flex items-start gap-2 md:mt-6">
                  {socialMediaLinks.map((link, index) => (
                    <Badge key={index} className="rounded-full border-none p-0">
                      <a key={index} href={link.url} className="size-8 rounded-[1.25rem] p-1">
                        {link.icon}
                      </a>
                    </Badge>
                  ))}
                </div>
              </div>
            </div>
          </div>
          <div className="prose-figcaption:border-l-border prose-base prose-headings:font-bold prose-h2:mt-6 prose-h2:mb-4 prose-h2:text-[2.25rem] prose-h2:md:text-[2.75rem] prose-h2:lg:text-[3rem] prose-h3:my-6 prose-h3:text-[2rem] prose-h3:leading-[1.2] prose-h3:md:text-[2.25rem] prose-h3:lg:text-[2.5rem] prose-h4:mt-6 prose-h4:mb-5 prose-h4:text-[1.5rem] prose-h4:md:text-[1.75rem] prose-h4:md:leading-[1.3] prose-h4:lg:text-[2rem] prose-h4:lg:leading-[1.3] prose-h5:mt-5 prose-h5:mb-4 prose-h5:text-[1.25rem] prose-h5:leading-[1.4] prose-h5:md:text-[1.5rem] prose-h6:mt-5 prose-h6:mb-4 prose-h6:text-[1.125rem] prose-h6:leading-[1.4] md:prose-h6:text-[1.25rem] prose-p:m-0 prose-p:mb-4 prose-p:leading-[1.5] prose-blockquote:my-6 prose-blockquote:border-l-[.1875rem] prose-blockquote:border-l-scheme-border prose-blockquote:px-5 prose-blockquote:py-3 prose-blockquote:text-[1.25rem] prose-blockquote:italic prose-figure:my-10 prose-figure:md:my-12 prose-figcaption:mt-2 prose-figcaption:border-l prose-figcaption:pl-2 prose-figcaption:text-[0.875rem] prose-figcaption:opacity-80 prose-strong:font-bold">
            {children}
          </div>
        </div>
      </div>
    </section>
  );
};

export const Content32Defaults: Props = {
  children: (
    <React.Fragment>
      <h3>Introduction</h3>
      <p>
        Mi tincidunt elit, id quisque ligula ac diam, amet. Vel etiam suspendisse morbi eleifend
        faucibus eget vestibulum felis. Dictum quis montes, sit sit. Tellus aliquam enim urna,
        etiam. Mauris posuere vulputate arcu amet, vitae nisi, tellus tincidunt. At feugiat sapien
        varius id.
      </p>
      <p>
        Eget quis mi enim, leo lacinia pharetra, semper. Eget in volutpat mollis at volutpat lectus
        velit, sed auctor. Porttitor fames arcu quis fusce augue enim. Quis at habitant diam at.
        Suscipit tristique risus, at donec. In turpis vel et quam imperdiet. Ipsum molestie aliquet
        sodales id est ac volutpat.
      </p>
      <figure>
        <img
          assetName="asset-1"
          src="https://d22po4pjz3o32e.cloudfront.net/placeholder-image-landscape.svg"
          alt="Relume placeholder image"
        />
        <figcaption>Image caption goes here</figcaption>
      </figure>
      <h6>
        Dolor enim eu tortor urna sed duis nulla. Aliquam vestibulum, nulla odio nisl vitae. In
        aliquet pellentesque aenean hac vestibulum turpis mi bibendum diam. Tempor integer aliquam
        in vitae malesuada fringilla.
      </h6>
      <p>
        Elit nisi in eleifend sed nisi. Pulvinar at orci, proin imperdiet commodo consectetur
        convallis risus. Sed condimentum enim dignissim adipiscing faucibus consequat, urna. Viverra
        purus et erat auctor aliquam. Risus, volutpat vulputate posuere purus sit congue convallis
        aliquet. Arcu id augue ut feugiat donec porttitor neque. Mauris, neque ultricies eu
        vestibulum, bibendum quam lorem id. Dolor lacus, eget nunc lectus in tellus, pharetra,
        porttitor.
      </p>
      <blockquote>
        "Ipsum sit mattis nulla quam nulla. Gravida id gravida ac enim mauris id. Non pellentesque
        congue eget consectetur turpis. Sapien, dictum molestie sem tempor. Diam elit, orci,
        tincidunt aenean tempus."
      </blockquote>
      <p>
        Tristique odio senectus nam posuere ornare leo metus, ultricies. Blandit duis ultricies
        vulputate morbi feugiat cras placerat elit. Aliquam tellus lorem sed ac. Montes, sed mattis
        pellentesque suscipit accumsan. Cursus viverra aenean magna risus elementum faucibus
        molestie pellentesque. Arcu ultricies sed mauris vestibulum.
      </p>
      <h4>Conclusion</h4>
      <p>
        Morbi sed imperdiet in ipsum, adipiscing elit dui lectus. Tellus id scelerisque est
        ultricies ultricies. Duis est sit sed leo nisl, blandit elit sagittis. Quisque tristique
        consequat quam sed. Nisl at scelerisque amet nulla purus habitasse.
      </p>
      <p>
        Nunc sed faucibus bibendum feugiat sed interdum. Ipsum egestas condimentum mi massa. In
        tincidunt pharetra consectetur sed duis facilisis metus. Etiam egestas in nec sed et. Quis
        lobortis at sit dictum eget nibh tortor commodo cursus.
      </p>
      <p>
        Odio felis sagittis, morbi feugiat tortor vitae feugiat fusce aliquet. Nam elementum urna
        nisi aliquet erat dolor enim. Ornare id morbi eget ipsum. Aliquam senectus neque ut id eget
        consectetur dictum. Donec posuere pharetra odio consequat scelerisque et, nunc tortor.Nulla
        adipiscing erat a erat. Condimentum lorem posuere gravida enim posuere cursus diam.
      </p>
    </React.Fragment>
  ),
  socialMediaLinks: [
    { url: "#", icon: <Link className="size-6 text-scheme-text" /> },
    { url: "#", icon: <LinkedinLogo className="size-6 text-scheme-text" /> },
    { url: "#", icon: <XLogo className="size-6 p-0.5 text-scheme-text" /> },
    { url: "#", icon: <FacebookLogo className="size-6 text-scheme-text" /> },
  ],
  contributors: {
    title: "Contributors",
    contributorsList: [
      {
        name: "Full name",
        titleAndCompany: "Job title, Company name",
        logo: {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Logo",
        },
      },
      {
        name: "Full name",
        titleAndCompany: "Job title, Company name",
        logo: {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Logo",
        },
      },
      {
        name: "Full name",
        titleAndCompany: "Job title, Company name",
        logo: {
          src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
          alt: "Logo",
        },
      },
    ],
  },
  subscribe: {
    title: "Subscribe to newsletter",
    inputPlaceholder: "Enter your email",
    button: { title: "Subscribe", size: "sm" },
    termsAndConditions: `
      <p class='text-tiny'>
        By subscribing you agree to with our 
        <a href='#' class='underline'>Privacy Policy</a>.
      </p>
      `,
  },
};