Merge branch 'main' of https://github.com/subvisual/content-sub into …

…rs/improve-content-editing

src/app/_components/Authors/AuthorPills/index.tsx

@@ -0,0 +1,72 @@
+import styles from "@/app/_components/Authors/AuthorPills/styles.module.css";
+import FeaturedImage from "@/app/_components/FeaturedImage";
+import React from "react";
+import { LinkedInIcon, TwitterIcon } from "@/app/_icons/socialIcons";
+import Link from "next/link";
+
+export function AuthorPill({ large = false, author }) {
+  const { name, featuredImage, linkedIn, x } = author;
+  return (
+    <Link href={`${process.env.NEXT_PUBLIC_SERVER_URL}/authors/${author.slug}`}>
+      <div className={styles.authorPill}>
+        <div className={styles.authorImage}>
+          {featuredImage && <FeaturedImage src={featuredImage.url} />}
+        </div>
+        {name}
+      </div>
+
+      {large && (
+        <div className={styles.socials}>
+          {linkedIn && (
+            <a href={linkedIn}>
+              <LinkedInIcon />
+            </a>
+          )}
+          {x && (
+            <a href={x}>
+              <TwitterIcon />
+            </a>
+          )}
+        </div>
+      )}
+    </Link>
+  );
+}
+
+export function TwoAuthorPill({ authors }) {
+
+  const authorOne = authors[0];
+  const authorTwo = authors[1];
+
+  return (
+    <div className={styles.twoAuthorPill}>
+      <div className={`${styles.authorImage} ${styles.authorOne}`}>
+        <FeaturedImage src={authorOne.featuredImage.url} />
+      </div>
+      <div className={`${styles.authorImage} ${styles.authorTwo}`}>
+        <FeaturedImage src={authorTwo.featuredImage.url} />
+      </div>
+      {`${authorOne.name.split(" ")[0]} & ${authorTwo.name.split(" ")[0]}`}
+    </div>
+  );
+}
+
+export function VariousAuthorsPill({ authors }) {
+  const authorOne = authors[0];
+  const authorTwo = authors[1];
+  const authorThree = authors[2];
+  return (
+    <div className={styles.twoAuthorPill}>
+      <div className={`${styles.authorImage} ${styles.authorOne}`}>
+        <FeaturedImage src={authorOne.featuredImage.url} />
+      </div>
+      <div className={`${styles.authorImage} ${styles.authorTwo}`}>
+        <FeaturedImage src={authorTwo.featuredImage.url} />
+      </div>
+      <div className={`${styles.authorImage} ${styles.authorThree}`}>
+        <FeaturedImage src={authorThree.featuredImage.url} />
+      </div>
+      Various authors
+    </div>
+  );
+}

src/app/_components/Authors/AuthorPills/styles.module.css

@@ -0,0 +1,46 @@
+/* General Styles */
+.authorImage {
+  position: relative;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  transition: 0.5s ease;
+}
+
+.socials {
+  display: flex;
+  gap: 16px;
+}
+
+/* Author Pills */
+.authorPill,
+.twoAuthorPill {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  background-color: var(--soft-white-100);
+  width: fit-content;
+  font-weight: bold;
+  border-radius: 100px;
+  padding: 5px 15px 5px 5px;
+  color: var(--dark-rock-800);
+  font-size: var(--size-12);
+  font-family: var(--colfax);
+  transition: 0.5s ease;
+}
+
+.authorPill:hover,
+.twoAuthorPill:hover {
+  color: #C1C1C1;
+}
+
+.authorPill:hover .authorImage,
+.twoAuthorPill:hover .authorImage {
+  opacity: 0.5;
+}
+
+/* Multiple Authors */
+.authorTwo,
+.authorThree {
+  margin-left: -20px;
+}

src/payload-types.ts

@@ -460,6 +460,30 @@ export interface Social {
   updatedAt?: string | null;
   createdAt?: string | null;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "socials".
+ */
+export interface Social {
+  id: string;
+  navItems?:
+    | {
+        link: {
+          type?: ('reference' | 'custom') | null;
+          newTab?: boolean | null;
+          reference?: {
+            relationTo: 'pages';
+            value: string | Page;
+          } | null;
+          url?: string | null;
+          label: string;
+        };
+        id?: string | null;
+      }[]
+    | null;
+  updatedAt?: string | null;
+  createdAt?: string | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "homepage-settings".