foundry-component-library 0.0.0 → 0.0.2

package/lib/components/single/Content/TwoColumns/Right.tsx

@@ -0,0 +1,79 @@
+import styles from "../styles.module.scss";
+import Video from "../Video";
+import { ColumnOption, NextImage } from "../../../../types";
+
+const Right = ({
+  section,
+  Image,
+}: {
+  section: ColumnOption;
+  Image: NextImage;
+}) => {
+  if (!section) return null;
+
+  return (
+    <div className={styles.columnContent}>
+      {/* case */}
+      {section.fieldGroupName === "Case_Case_Content_Twocolumns_Right_Text" && (
+        <div
+          className={`${styles.text} ${styles.textRight}`}
+          dangerouslySetInnerHTML={{ __html: section.text }}
+        />
+      )}
+      {section.fieldGroupName === "Case_Case_Content_Twocolumns_Right_Image" &&
+        section.image && (
+          <>
+            <Image
+              className={styles.image}
+              src={section.image.sourceUrl}
+              alt={section.caption ? section.caption : "foundry digital agency"}
+              layout="intrinsic"
+              width={600}
+              height={600}
+            />
+            {section.caption && (
+              <div className={styles.caption}>{section.caption}</div>
+            )}
+          </>
+        )}
+      {section.fieldGroupName ===
+        "Case_Case_Content_Twocolumns_Right_Video" && (
+        <Video section={section} />
+      )}
+
+      {/* post */}
+      {section.fieldGroupName ===
+        "Post_Customfieldsposts_Content_Twocolumns_Right_Text" && (
+        <div
+          className={`${styles.text} ${styles.textRight}`}
+          dangerouslySetInnerHTML={{ __html: section.text }}
+        />
+      )}
+      {section.fieldGroupName ===
+        "Post_Customfieldsposts_Content_Twocolumns_Right_Image" &&
+      section.image ? (
+        <>
+          {section.image.sourceUrl && (
+            <Image
+              className={styles.image}
+              src={section.image.sourceUrl}
+              alt={section.caption ? section.caption : "foundry digital agency"}
+              layout="intrinsic"
+              width={600}
+              height={600}
+            />
+          )}
+          {section.caption && (
+            <div className={styles.caption}>{section.caption}</div>
+          )}
+        </>
+      ) : null}
+      {section.fieldGroupName ===
+        "Post_Customfieldsposts_Content_Twocolumns_Right_Video" && (
+        <Video section={section} />
+      )}
+    </div>
+  );
+};
+
+export default Right;

package/lib/components/single/Content/TwoColumns/index.tsx

@@ -0,0 +1,32 @@
+import styles from "../styles.module.scss";
+import Container from "../../../Container";
+import { NextImage, type TwoColumns } from "../../../../types";
+import Left from "./Left";
+import Right from "./Right";
+
+function TwoColumns({
+  section,
+  Image,
+}: {
+  section: TwoColumns;
+  Image: NextImage;
+}) {
+  return (
+    <section className={styles.section}>
+      <Container>
+        <div className={styles.twoColumns}>
+          <div className={styles.column}>
+            {section.left && <Left section={section.left[0]} Image={Image} />}
+          </div>
+          <div className={styles.column}>
+            {section.right && (
+              <Right section={section.right[0]} Image={Image} />
+            )}
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}
+
+export default TwoColumns;

package/lib/components/single/Content/Video.tsx

@@ -0,0 +1,88 @@
+"use client";
+import { useState, useRef, useEffect } from "react";
+import ReactPlayer from "react-player/lazy";
+import styles from "./styles.module.scss";
+import { useOnScreen } from "../../../hooks/useOnScreen";
+import { type Video } from "../../../types";
+
+function Video({ section }: { section: Video }) {
+  const sectionRef = useRef(null);
+  const onScreen = useOnScreen(sectionRef, "1000px");
+  const [playing, setPlaying] = useState(false);
+  const [videoLoaded, setVideoLoaded] = useState(false);
+  const [hasWindow, setHasWindow] = useState(false);
+
+  const handleClick = () => {
+    if (playing) {
+      setPlaying(false);
+    } else {
+      setPlaying(true);
+    }
+  };
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      setHasWindow(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!videoLoaded && onScreen) {
+      setVideoLoaded(true);
+    }
+  }, [videoLoaded, onScreen]);
+
+  useEffect(() => {
+    if (section?.autoplay) {
+      setPlaying(true);
+    }
+  }, [videoLoaded]);
+
+  if (!section || !section.video) return null;
+
+  return (
+    <div className={styles.wrapper} ref={sectionRef}>
+      <div
+        className={`${styles.video} ${playing ? styles.playing : ""}`}
+        onClick={handleClick}
+        data-ratio={section.ratio}
+        style={{
+          backgroundImage: section.poster
+            ? `url(${section.poster.sourceUrl})`
+            : "none",
+          paddingTop: section.ratio ? section.ratio : "56.25%",
+        }}
+      >
+        <div>
+          {hasWindow && (
+            <ReactPlayer
+              className={styles.player}
+              playing={playing}
+              url={videoLoaded ? `${section.video}?dnt=1` : ""}
+              playsinline
+              width="100%"
+              height="100%"
+              onEnded={() => {
+                setPlaying(false);
+              }}
+              loop={section.autoplay}
+              muted={!!section.autoplay}
+              controls={!section.autoplay}
+            />
+          )}
+          {section.autoplay && (
+            <div
+              className={`${styles.overlay} ${playing ? styles.playing : ""}`}
+              onClick={handleClick}
+            />
+          )}
+        </div>
+      </div>
+      {section.caption && (
+        <div className={styles.caption}>{section.caption}</div>
+      )}
+    </div>
+  );
+}
+
+export default Video;

package/lib/components/single/Content/index.tsx

@@ -0,0 +1,107 @@
+import FullWidthImage from "./FullWidthImage";
+import CenterColumn from "./CenterColumn";
+import TwoColumns from "./TwoColumns";
+import Video from "./Video";
+import Container from "../../Container";
+import styles from "./styles.module.scss";
+import { NextImage, Content } from "../../../types";
+
+function PostContent({
+  content,
+  Image,
+}: {
+  content: Content;
+  Image: NextImage;
+}) {
+  if (!content) return null;
+
+  return (
+    <div className={styles.wrapper}>
+      {content.map((section, i) => {
+        if (section.fieldGroupName === "Case_Case_Content_FullWidthImage") {
+          return (
+            <FullWidthImage
+              key={section.fieldGroupName + i}
+              section={section}
+              Image={Image}
+            />
+          );
+        }
+        if (section.fieldGroupName === "Case_Case_Content_CenterColumn") {
+          return (
+            <CenterColumn key={section.fieldGroupName + i} section={section} />
+          );
+        }
+        if (section.fieldGroupName === "Case_Case_Content_Twocolumns") {
+          return (
+            <TwoColumns
+              key={section.fieldGroupName + i}
+              section={section}
+              Image={Image}
+            />
+          );
+        }
+        if (section.fieldGroupName === "Case_Case_Content_Video") {
+          return (
+            <section
+              className={styles.section}
+              key={section.fieldGroupName + i}
+            >
+              <Container>
+                <Video section={section} />
+              </Container>
+            </section>
+          );
+        }
+
+        if (
+          section.fieldGroupName ===
+          "Post_Customfieldsposts_Content_FullWidthImage"
+        ) {
+          return (
+            <FullWidthImage
+              key={section.fieldGroupName + i}
+              section={section}
+              Image={Image}
+            />
+          );
+        }
+        if (
+          section.fieldGroupName ===
+          "Post_Customfieldsposts_Content_CenterColumn"
+        ) {
+          return (
+            <CenterColumn key={section.fieldGroupName + i} section={section} />
+          );
+        }
+        if (
+          section.fieldGroupName === "Post_Customfieldsposts_Content_Twocolumns"
+        ) {
+          return (
+            <TwoColumns
+              key={section.fieldGroupName + i}
+              section={section}
+              Image={Image}
+            />
+          );
+        }
+        if (section.fieldGroupName === "Post_Customfieldsposts_Content_Video") {
+          return (
+            <section
+              className={styles.section}
+              key={section.fieldGroupName + i}
+            >
+              <Container>
+                <Video section={section} />
+              </Container>
+            </section>
+          );
+        }
+
+        return undefined;
+      })}
+    </div>
+  );
+}
+
+export default PostContent;

package/lib/components/single/Content/styles.module.scss

@@ -0,0 +1,205 @@
+@use "../../variables" as *;
+
+.wrapper {
+  padding-bottom: 180px;
+
+  @media #{$QUERY-sm} {
+    padding-bottom: 90px;
+  }
+}
+
+.section {
+  padding: 80px 0;
+
+  @media #{$QUERY-md} {
+    padding: 60px 0;
+  }
+
+  @media #{$QUERY-sm} {
+    padding: 0 0 30px 0;
+  }
+
+  &:first-child {
+    padding-top: 0;
+  }
+
+  &:last-child {
+    padding-bottom: 0;
+  }
+}
+
+.fullWidthImage {
+  width: 100%;
+
+  @media #{$QUERY-md} {
+    // height: 400px;
+  }
+
+  @media #{$QUERY-sm} {
+    // height: 300px;
+  }
+
+  .image {
+    width: 100%;
+    object-fit: cover;
+
+    & div:first-child {
+      max-width: 100% !important;
+    }
+
+    @media #{$QUERY-sm} {
+      min-height: 160px;
+    }
+  }
+}
+
+.content {
+  width: 620px;
+  max-width: 100%;
+  margin: 0 auto;
+}
+
+.twoColumns {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+
+  @media #{$QUERY-md} {
+    align-items: flex-start;
+  }
+
+  @media #{$QUERY-sm} {
+    display: block;
+  }
+}
+
+.text {
+  width: 510px;
+  max-width: 100%;
+  &.right {
+    margin-left: auto;
+  }
+}
+
+.column {
+  width: 570px;
+  max-width: calc(50% - 20px);
+  display: flex;
+  align-items: center;
+
+  &:first-child {
+    @media #{$QUERY-sm} {
+      margin-bottom: 30px;
+    }
+  }
+
+  @media #{$QUERY-sm} {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .image {
+    width: 100%;
+    object-fit: cover;
+
+    & div:first-child {
+      max-width: 100%;
+    }
+
+    @media #{$QUERY-md} {
+      max-height: 400px;
+    }
+
+    @media #{$QUERY-sm} {
+      max-height: 300px;
+    }
+  }
+}
+
+.columnContent {
+  width: 100%;
+}
+
+.video {
+  max-width: 100%;
+  margin: 0 auto;
+  position: relative;
+  background-color: #eee;
+  background-position: center;
+  background-repeat: no-repeat;
+
+  &.playing {
+    cursor: url("/svg/pause.svg"), auto;
+  }
+
+  &:not(.playing) {
+    cursor: url("/svg/play.svg"), auto;
+  }
+
+  .player {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  iframe,
+  video {
+    width: 100%;
+    height: 100%;
+    display: block;
+    margin: auto;
+  }
+}
+
+.btnMobile {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-size: contain;
+  background-repeat: no-repeat;
+  z-index: 5;
+  display: none;
+  background: transparent;
+  border: none;
+
+  &.playing {
+    background-image: url("/svg/pause.svg");
+  }
+
+  &:not(.playing) {
+    background-image: url("/svg/play.svg");
+  }
+
+  @media #{$QUERY-sm} {
+    display: block;
+  }
+}
+
+.overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 4;
+
+  &.playing {
+    cursor: url("/svg/pause.svg"), auto;
+  }
+
+  &:not(.playing) {
+    cursor: url("/svg/play.svg"), auto;
+  }
+
+  @media #{$QUERY-sm} {
+    display: none;
+  }
+}
+
+.caption {
+  color: $color-gray;
+  margin: 1rem auto;
+}

package/lib/components/single/Other/index.tsx

@@ -0,0 +1,55 @@
+import Container from "../../Container";
+import styles from "./styles.module.scss";
+import Arrow from "../../../assets/svg/caret-right.svg?react";
+import { translate } from "../../../utils";
+import { Case, NextImage, NextLink } from "../../../types";
+
+function Other({
+  cases,
+  Link,
+  Image,
+}: {
+  cases: Case[];
+  Link: NextLink;
+  Image: NextImage;
+}) {
+  if (!cases) return;
+
+  return (
+    <Container>
+      <div className={styles.wrapper}>
+        <div className={styles.top}>
+          <h3 className={styles.heading}>{translate("Other projects")}</h3>
+          <div className={styles.button}>
+            <Link href="/cases">{translate("See all")}</Link>
+          </div>
+        </div>
+        <div className={styles.cases}>
+          {cases.map((item) => (
+            <div key={item.id} className={styles.case}>
+              <Link href={item.uri}>
+                <div className={styles.image}>
+                  {item.case.mainImage && (
+                    <Image
+                      className={styles.image}
+                      src={item.case.mainImage.sourceUrl}
+                      alt={item.title || ""}
+                      width={400}
+                      height={490}
+                    />
+                  )}
+                </div>
+                <div className={styles.texts}>
+                  <div>{item.title}</div>
+                  <Arrow />
+                </div>
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Container>
+  );
+}
+
+export default Other;

package/lib/components/single/Other/styles.module.scss

@@ -0,0 +1,114 @@
+@use "../../variables" as *;
+
+.wrapper {
+  padding: 100px 0 200px;
+
+  @media #{$QUERY-md} {
+    padding: 60px 0 120px;
+  }
+
+  @media #{$QUERY-sm} {
+    padding: 60px 0;
+  }
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 80px;
+
+  @media #{$QUERY-md} {
+    margin-bottom: 50px;
+  }
+
+  @media #{$QUERY-sm} {
+    display: block;
+  }
+}
+
+.heading {
+  font-size: 82px;
+  font-weight: bold;
+  margin-right: 20px;
+
+  @media #{$QUERY-md} {
+    font-size: 42px;
+  }
+
+  @media #{$QUERY-sm} {
+    margin-bottom: 20px;
+  }
+}
+
+.button {
+  background-color: $color-blue;
+  border: solid 1px $color-blue;
+  width: 150px;
+
+  &:hover {
+    background-color: $color-white;
+
+    a {
+      color: $color-blue;
+    }
+  }
+
+  a {
+    text-align: center;
+    display: block;
+    width: 150px;
+    padding: 15px;
+    color: $color-white;
+    text-decoration: none;
+    box-sizing: border-box;
+  }
+}
+
+.cases {
+  display: flex;
+  margin: 0 -10px;
+
+  @media #{$QUERY-sm} {
+    display: block;
+    margin: 0;
+  }
+}
+
+.case {
+  width: calc(33.333% - 20px);
+  margin: 0 10px;
+
+  @media #{$QUERY-sm} {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 50px;
+  }
+
+  a {
+    color: $color-black;
+    text-decoration: none;
+  }
+}
+
+.image {
+  width: 100%;
+  height: 490px;
+  margin-bottom: 10px;
+
+  @media #{$QUERY-md} {
+    height: 300px;
+  }
+
+  .image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.texts {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}