Add lang lib links

AceCentre · Aug 21, 2024 · 47936e4 · 47936e4
1 parent 8c1f7d7
commit 47936e4
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 3 deletions.
diff --git a/components/language-library-landing-search/language-library-landing-search.js b/components/language-library-landing-search/language-library-landing-search.js
@@ -4,9 +4,29 @@ import { Input } from "../input/input";
 import styles from "./language-library-landing-search.module.css";
 import SvgIcon from "@mui/material/SvgIcon";
 import SearchIcon from "@mui/icons-material/Search";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+
+const splitLanguages = (languages) => {
+  let firstLangs = [];
+  let secondLangs = [];
+  const sorted = languages.sort((a, b) => b.count - a.count);
+
+  for (const current of sorted) {
+    if (firstLangs.length > 10) {
+      secondLangs.push(current);
+    } else {
+      firstLangs.push(current);
+    }
+  }
+
+  return [firstLangs, secondLangs];
+};
 
 export const LanguageLibraryLandingSearch = ({ languages }) => {
   const [languageValue, setLanguageValue] = useState("");
+  const [showAllLanguages, setShowAllLanguages] = useState(false);
+
+  const [initialLanguages, restOfLangs] = splitLanguages(languages);
 
   return (
     <div className={styles.container}>
@@ -21,19 +41,45 @@ export const LanguageLibraryLandingSearch = ({ languages }) => {
         </div>
         <input name="languages" value={languageValue} type="hidden" />
         <ul className={styles.languageList}>
-          {languages.map((language) => (
+          {initialLanguages.map((language) => (
             <li className={styles.languageListItem} key={language.slug}>
               <button
                 className={styles.languageButton}
                 onClick={() => {
                   setLanguageValue(language.slug);
                 }}
               >
-                {language.name}
+                {language.name} ({language.count})
               </button>
             </li>
           ))}
+          {showAllLanguages && (
+            <>
+              {restOfLangs.map((language) => (
+                <li className={styles.languageListItem} key={language.slug}>
+                  <button
+                    className={styles.languageButton}
+                    onClick={() => {
+                      setLanguageValue(language.slug);
+                    }}
+                  >
+                    {language.name} ({language.count})
+                  </button>
+                </li>
+              ))}
+            </>
+          )}
         </ul>
+        <Button
+          className={styles.showMore}
+          type="button"
+          onClick={() => setShowAllLanguages(!showAllLanguages)}
+        >
+          Show {showAllLanguages ? "Less" : "More"}{" "}
+          <ChevronRightIcon
+            className={`${showAllLanguages ? styles.upIcon : styles.downIcon}`}
+          />
+        </Button>
       </form>
     </div>
   );

diff --git a/components/language-library-landing-search/language-library-landing-search.module.css b/components/language-library-landing-search/language-library-landing-search.module.css
@@ -4,6 +4,23 @@
   max-width: var(--containerMaxWidth);
 }
 
+.downIcon.downIcon {
+  transform: rotate(90deg);
+}
+
+.upIcon.upIcon {
+  transform: rotate(-90deg);
+}
+
+.showMore {
+  border: 4px solid #94c64e;
+  background-color: transparent;
+  color: black;
+  display: flex;
+  align-items: center;
+  margin: 0 auto;
+}
+
 .searchBar {
   display: flex;
   gap: 1rem;
@@ -16,7 +33,7 @@
 .languageList {
   list-style-type: none;
   padding: 0;
-  max-width: 540px;
+  max-width: 730px;
   display: flex;
   gap: 1rem;
   margin: 1rem auto;

diff --git a/components/resource-categories-grid/resource-categories-grid.js b/components/resource-categories-grid/resource-categories-grid.js
@@ -19,6 +19,20 @@ export const ResourceCategoriesGrid = ({ productCategories }) => {
           />
         );
       })}
+      <li className={styles.listItem} key={"lang-lib"}>
+        <Link href={"/language-library"} className={styles.link}>
+          <Image src="/lang-lib.png" layout="fill" objectFit="contain" />
+          <div className={styles.yellowTint} />
+          <div className={styles.blueBannerContainer}>
+            <div className={styles.blueBanner}>
+              <p>Language Library</p>
+              <Avatar className={styles.avatar}>
+                <ArrowForwardIcon className={styles.icon} />
+              </Avatar>
+            </div>
+          </div>
+        </Link>
+      </li>
     </ul>
   );
 };

diff --git a/components/sub-nav/sub-nav-items.js b/components/sub-nav/sub-nav-items.js
@@ -96,6 +96,10 @@ export const defaultNavItems = [
         title: "eBooks",
         href: "/resources/all?category=made-by-ace&subcategory=e-books",
       },
+      {
+        title: "Language Library",
+        href: "/language-library",
+      },
     ],
   },
   {

diff --git a/public/lang-lib.png b/public/lang-lib.png