@stackshift-ui/header 6.0.4 → 6.0.6-beta.0

package/src/header_b.tsx

@@ -0,0 +1,136 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { ButtonProps, HeaderProps } from ".";
+import { Images } from "./types";
+
+export default function Header_B({
+  images,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+}: HeaderProps) {
+  return (
+    <Section className="relative z-10 py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex align="center" direction="col" gap={4} className="lg:flex-row">
+          <Flex align="center" direction="col" className="w-full basis-1/2">
+            <div className="max-w-md mx-auto text-center lg:text-left">
+              <TitleAndDescription title={title} description={description} />
+              <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
+            </div>
+          </Flex>
+          {images && <ImageGallery images={images} />}
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function TitleAndDescription({ title, description }: { title?: string; description?: string }) {
+  return (
+    <React.Fragment>
+      {title && (
+        <Heading fontSize="3xl" className="mb-3">
+          {title}
+        </Heading>
+      )}
+      {description && (
+        <Text muted className="my-6">
+          {description}
+        </Text>
+      )}
+    </React.Fragment>
+  );
+}
+
+function Buttons({
+  primaryButton,
+  secondaryButton,
+}: {
+  primaryButton?: ButtonProps;
+  secondaryButton?: ButtonProps;
+}) {
+  return (
+    <Flex
+      align="center"
+      gap={2}
+      className="flex items-center justify-center lg:justify-start gap-2 flex-col md:flex-row">
+      {primaryButton?.label && (
+        <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
+          {primaryButton?.label}
+        </Button>
+      )}
+      {secondaryButton?.label && (
+        <Button
+          as="link"
+          link={secondaryButton}
+          className="bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-6 py-3"
+          ariaLabel={secondaryButton?.label}>
+          {secondaryButton?.label}
+        </Button>
+      )}
+    </Flex>
+  );
+}
+
+function ImageGallery({ images }: { images: Images[] }) {
+  if (!images) return null;
+
+  return (
+    <div className="w-full px-4 lg:w-1/2">
+      <div className="mb-3 sm:flex lg:mb-4 lg:ml-6">
+        {images?.[0]?.image && (
+          <Image
+            className="relative object-cover mb-3 mr-2 overflow-hidden rounded-xl sm:mb-0 sm:w-1/3 md:rounded-3xl lg:rounded-br-none"
+            sizes="100vw"
+            src={`${images?.[0]?.image}`}
+            width={941}
+            height={734}
+            alt={images?.[0]?.alt ?? "header-image-1"}
+          />
+        )}
+        {images?.[1]?.image && (
+          <Image
+            className="relative object-cover overflow-hidden rounded-xl sm:ml-2 sm:w-2/3 md:rounded-3xl lg:rounded-bl-none"
+            sizes="100vw"
+            src={`${images?.[1]?.image}`}
+            width={1050}
+            height={701}
+            alt={images?.[1]?.alt ?? "header-image-2"}
+          />
+        )}
+      </div>
+      <div className="mb-3 sm:flex lg:mb-4 lg:mr-6">
+        {images?.[2]?.image && (
+          <Image
+            className="object-cover mb-3 mr-2 overflow-hidden rounded-xl sm:w-2/3 md:mb-0 md:rounded-3xl lg:rounded-br-none"
+            sizes="100vw"
+            src={`${images?.[2]?.image}`}
+            width={1050}
+            height={701}
+            alt={images?.[2]?.alt ?? "header-image-3"}
+          />
+        )}
+        {images?.[3]?.image && (
+          <Image
+            className="object-cover overflow-hidden rounded-xl sm:ml-2 sm:w-1/3 md:rounded-3xl lg:rounded-bl-none"
+            sizes="100vw"
+            src={`${images?.[3]?.image}`}
+            width={941}
+            height={734}
+            alt={images?.[3]?.alt ?? "header-image-4"}
+          />
+        )}
+      </div>
+    </div>
+  );
+}
+
+export { Header_B };

package/src/header_c.tsx

@@ -0,0 +1,87 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Section } from "@stackshift-ui/section";
+import { ButtonProps, HeaderProps } from ".";
+
+export default function Header_C({
+  videoLink,
+  title,
+  primaryButton,
+  secondaryButton,
+}: HeaderProps) {
+  // get the video link ID
+  let videoLinkId;
+
+  if (videoLink) {
+    if (videoLink.includes("embed")) {
+      videoLinkId = videoLink.split("/")[4];
+    } else {
+      videoLinkId = videoLink.split("/watch?v=")[1] || videoLink.split("/")[3];
+    }
+  }
+
+  return (
+    <Section className="py-20 md:py-52 bg-background">
+      <Container maxWidth={1280}>
+        <div className="max-w-2xl mx-auto mb-12 text-center md:mb-20">
+          {title && (
+            <Heading fontSize="3xl" className="mb-10">
+              {title}
+            </Heading>
+          )}
+          <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
+        </div>
+        <div className="md:mx-20 lg:mx-60 xl:mx-60">
+          {videoLinkId && <VideoPlayer videoLinkId={videoLinkId} title={title} />}
+        </div>
+      </Container>
+    </Section>
+  );
+}
+
+function VideoPlayer({ videoLinkId, title }: { videoLinkId?: string; title?: string }) {
+  return (
+    <div className="aspect-video">
+      <iframe
+        aria-label="Show Video Frame"
+        className="w-full h-full border-4 rounded-3xl border-primary"
+        src={`https://www.youtube.com/embed/${videoLinkId}`}
+        srcDoc={`<style>*{padding:0;margin:0;overflow:hidden;border-radius:24px}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=${`https://www.youtube.com/embed/${videoLinkId}`}><img src=${`https://i.ytimg.com/vi_webp/${videoLinkId}/maxresdefault.webp`} alt=${title} loading="lazy" /><span>▶</span></a>`}
+        loading="lazy"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+        allowFullScreen
+      />
+    </div>
+  );
+}
+
+function Buttons({
+  primaryButton,
+  secondaryButton,
+}: {
+  primaryButton?: ButtonProps;
+  secondaryButton?: ButtonProps;
+}) {
+  return (
+    <Flex align="center" gap={4} justify="center" className="flex-col lg:flex-row">
+      {primaryButton?.label && (
+        <Button as="link" ariaLabel={primaryButton?.label} link={primaryButton}>
+          {primaryButton?.label}
+        </Button>
+      )}
+      {secondaryButton?.label && (
+        <Button
+          as="link"
+          ariaLabel={secondaryButton?.label}
+          link={secondaryButton}
+          className="bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-3 py-4">
+          {secondaryButton?.label}
+        </Button>
+      )}
+    </Flex>
+  );
+}
+
+export { Header_C };

package/src/header_d.tsx

@@ -0,0 +1,113 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Image } from "@stackshift-ui/image";
+import { Section } from "@stackshift-ui/section";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { ButtonProps, HeaderProps } from ".";
+
+export default function Header_D({
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  mainImage,
+}: HeaderProps): JSX.Element {
+  return (
+    <Section className="py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex align="center" className="flex-col lg:flex-row" gap={4}>
+          <Flex align="center" className="w-full basis-1/2" direction="col">
+            <Container className="mx-auto items-center text-center lg:text-left" maxWidth="md">
+              <TitleAndDescription title={title} description={description} />
+              <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
+            </Container>
+          </Flex>
+          <MainImage mainImage={mainImage} />
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function TitleAndDescription({ title, description }: { title?: string; description?: string }) {
+  return (
+    <React.Fragment>
+      {title ? (
+        <Heading fontSize="3xl" className="mb-3" type="h1">
+          {title}
+        </Heading>
+      ) : null}
+      {description ? (
+        <Text className="my-6" muted>
+          {description}
+        </Text>
+      ) : null}
+    </React.Fragment>
+  );
+}
+
+function Buttons({
+  primaryButton,
+  secondaryButton,
+}: {
+  primaryButton?: ButtonProps;
+  secondaryButton?: ButtonProps;
+}) {
+  return (
+    <Flex
+      align="center"
+      className="flex items-center justify-center lg:justify-start gap-2 flex-col md:flex-row"
+      gap={2}>
+      {primaryButton?.label ? (
+        <Button
+          as="link"
+          link={primaryButton}
+          ariaLabel={primaryButton?.ariaLabel ?? primaryButton?.label}
+          variant="solid"
+          className="bg-primary hover:bg-primary/50 rounded-global px-6 py-3 text-white">
+          {primaryButton.label}
+        </Button>
+      ) : null}
+      {secondaryButton?.label ? (
+        <Button
+          as="link"
+          link={secondaryButton}
+          ariaLabel={secondaryButton.ariaLabel ?? secondaryButton?.label}
+          variant="solid"
+          className="bg-secondary hover:bg-secondary/50 rounded-global px-6 py-3">
+          {secondaryButton.label}
+        </Button>
+      ) : null}
+    </Flex>
+  );
+}
+
+interface MainImageProps {
+  mainImage?: {
+    image?: string | any;
+    alt?: string;
+  };
+}
+
+function MainImage({ mainImage }: MainImageProps) {
+  if (!mainImage?.image) return null;
+
+  return (
+    <div className="w-full h-full">
+      <Image
+        alt={mainImage.alt ?? "header-main-image"}
+        className="rounded-md"
+        height={700}
+        sizes="100vw"
+        src={`${mainImage?.image}`}
+        style={{ objectFit: "contain" }}
+        width={1050}
+      />
+    </div>
+  );
+}
+
+export { Header_D };

package/src/header_e.tsx

@@ -0,0 +1,84 @@
+import { Button } from "@stackshift-ui/button";
+import { Container } from "@stackshift-ui/container";
+import { Flex } from "@stackshift-ui/flex";
+import { Heading } from "@stackshift-ui/heading";
+import { Section } from "@stackshift-ui/section";
+import { SigninSignup_A } from "@stackshift-ui/signin-signup";
+import { Text } from "@stackshift-ui/text";
+import React from "react";
+import { ButtonProps, HeaderProps } from ".";
+
+export default function Header_E({
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  formLinks,
+  form,
+}: HeaderProps) {
+  return (
+    <Section className="relative py-20 bg-background">
+      <Container maxWidth={1280}>
+        <Flex align="center" className="flex-col lg:flex-row" gap={4}>
+          <Flex align="center" direction="col" className="w-full basis-1/2">
+            <div className="max-w-md mx-auto text-center lg:text-left">
+              <TitleAndDescription title={title} description={description} />
+              <Buttons primaryButton={primaryButton} secondaryButton={secondaryButton} />
+            </div>
+          </Flex>
+          <div className="w-full lg:w-1/2">
+            <div className="max-w-sm mx-auto text-center">
+              <SigninSignup_A form={form} formLinks={formLinks} />
+            </div>
+          </div>
+        </Flex>
+      </Container>
+    </Section>
+  );
+}
+
+function TitleAndDescription({ title, description }: { title?: string; description?: string }) {
+  return (
+    <React.Fragment>
+      {title && (
+        <Heading fontSize="3xl" className="mb-3">
+          {title}
+        </Heading>
+      )}
+      {description && (
+        <Text muted className="my-6">
+          {description}
+        </Text>
+      )}
+    </React.Fragment>
+  );
+}
+
+function Buttons({
+  primaryButton,
+  secondaryButton,
+}: {
+  primaryButton?: ButtonProps;
+  secondaryButton?: ButtonProps;
+}) {
+  return (
+    <Flex align="center" gap={2} className="flex-col md:flex-row justify-center lg:justify-start">
+      {primaryButton?.label && (
+        <Button as="link" link={primaryButton} ariaLabel={primaryButton?.label}>
+          {primaryButton?.label}
+        </Button>
+      )}
+      {secondaryButton?.label && (
+        <Button
+          as="link"
+          link={secondaryButton}
+          className="bg-secondary hover:bg-secondary/50 inline-block rounded-global font-bold transition duration-200 px-6 py-3"
+          ariaLabel={secondaryButton?.label}>
+          {secondaryButton?.label}
+        </Button>
+      )}
+    </Flex>
+  );
+}
+
+export { Header_E };

package/src/index.ts

@@ -0,0 +1,9 @@
+"use client";
+
+// component exports
+export * from "./header";
+export * from "./header_a";
+export * from "./header_b";
+export * from "./header_c";
+export * from "./header_d";
+export * from "./header_e";