amend featured employers carousel

sourceflow-uk · Oct 17, 2023 · f856d3e · f856d3e
1 parent 6ea012f
commit f856d3e
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 23 deletions.
diff --git a/src/components/LogoCarousel/index.jsx → ...nents/FeaturedEmployersCarousel/index.jsx b/src/components/LogoCarousel/index.jsx → ...nents/FeaturedEmployersCarousel/index.jsx
@@ -6,51 +6,59 @@ import ChevronLeft from "@/assets/ChevronLeft.svg";
 import ChevronRight from "@/assets/ChevronRight.svg";
 import classes from "./styles.module.scss";
 import { LogoCard, Title } from "@/ui";
+import { employer_helper } from "@/helpers/employer_helper";
+import { getRoute } from "@/getters/getRoute";
+
+export default function FeaturedEmployersCarousel({ className, title, visibleCount, button }) {
+  const items = employer_helper.fetch().filter((i) => !!i.featured);
 
-export default function LogoCarousel({ className, title, items, visibleCount }) {
   return (
-    <div className={clsx(className, classes.logos)}>
+    <div className={clsx(className, classes.employers)}>
       <Container className="mw-xxl">
         <Title title={title} />
         <Carousel
-          className={classes.logos__carousel}
+          className={classes.employers__carousel}
           controls={true}
           prevIcon={<ChevronLeft width="14" height="25" />}
           nextIcon={<ChevronRight width="14" height="25" />}
         >
           {chunk(items, visibleCount).map((items, k) => (
             <Carousel.Item key={k}>
               <Row>
-                {items.map(({ logo, name, href }, k) => (
+                {items.map(({ card_image, name, url_slug }, k) => (
                   <Col key={k} className="py-3">
-                    <LogoCard logo={logo} name={name} href={href} />
+                    <LogoCard logo={card_image} name={name} href={getRoute("employer", { url_slug })} />
                   </Col>
                 ))}
               </Row>
             </Carousel.Item>
           ))}
         </Carousel>
+        <div className={classes.employers__footer}>
+          {button && (
+            <a className={classes.employers__link} href={button.href}>
+              {button.label}
+              <ChevronRight width="7" height="13" className="ms-2" />
+            </a>
+          )}
+        </div>
       </Container>
     </div>
   );
 }
 
-LogoCarousel.defaultProps = {
+FeaturedEmployersCarousel.defaultProps = {
   className: "py-5",
   title: null,
-  items: [],
   visibleCount: 5,
+  button: {
+    label: "View all our Featured Employers",
+    href: getRoute("employers"),
+  },
 };
 
-LogoCarousel.propTypes = {
+FeaturedEmployersCarousel.propTypes = {
   className: PropTypes.string,
   title: PropTypes.string,
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      name: PropTypes.string,
-      logo: PropTypes.string,
-      href: PropTypes.string,
-    })
-  ),
   visibleCount: PropTypes.number,
 };
diff --git a/...omponents/LogoCarousel/styles.module.scss → ...turedEmployersCarousel/styles.module.scss b/...omponents/LogoCarousel/styles.module.scss → ...turedEmployersCarousel/styles.module.scss
@@ -1,6 +1,6 @@
 @import "src/scss/module";
 
-.logos {
+.employers {
   &__carousel {
     display: flex;
 
@@ -25,4 +25,19 @@
       order: 3;
     }
   }
+
+  &__footer {
+    text-align: right;
+  }
+
+  &__link {
+    display: inline-flex;
+    align-items: center;
+    color: var(#{--bs-primary});
+    text-decoration: none;
+
+    & svg {
+      fill: var(#{--bs-primary});
+    }
+  }
 }
diff --git a/src/components/index.jsx b/src/components/index.jsx
@@ -19,7 +19,7 @@ export const HorizontalListings = lazy(() => import("./HorizontalListings"));
 export const KeyTabListing = lazy(() => import("./KeyTabListing"));
 export const LatestBlogs = lazy(() => import("./LatestBlogs"));
 export const LatestJobs = lazy(() => import("./LatestJobs"));
-export const LogoCarousel = lazy(() => import("./LogoCarousel"));
+export const FeaturedEmployersCarousel = lazy(() => import("./FeaturedEmployersCarousel"));
 export const MiniCarousel = lazy(() => import("./MiniCarousel"));
 export const MultiTiles = lazy(() => import("./MultiTiles"));
 export const NarrativePanel = lazy(() => import("./NarrativePanel"));

diff --git a/src/pages/index.page.js b/src/pages/index.page.js
@@ -21,10 +21,9 @@ export async function getStaticProps({}) {
       content: [
         { component: "QuickJobSearch", props: {} },
         {
-          component: "LogoCarousel",
+          component: "FeaturedEmployersCarousel",
           props: {
-            title: { path: "page.home.component.LogoCarousel.title", placeholder: "Featured Employers" },
-            items: generateArrayOf(generateLogoCard, { count: 8 }),
+            title: { path: "page.home.component.FeaturedEmployersCarousel.title", placeholder: "Featured Employers" },
             visibleCount: 4,
           },
         },

diff --git a/src/ui/LogoCard/index.jsx b/src/ui/LogoCard/index.jsx
@@ -6,7 +6,7 @@ import SourceFlowImage from "@sourceflow-uk/sourceflowimage";
 export default function LogoCard({ className, logo, name, href }) {
   return (
     <a className={clsx(className, classes.card)} href={href}>
-      <SourceFlowImage className="mw-100" src={logo} size="120x120" alt={name} title={name} />
+      <SourceFlowImage className="mw-100" src={logo} size="228x" alt={name} title={name} />
     </a>
   );
 }

diff --git a/src/ui/LogoCard/styles.module.scss b/src/ui/LogoCard/styles.module.scss
@@ -1,10 +1,19 @@
 @import "src/scss/module";
 
 .card {
-  max-width: 120px;
-  display: block;
+  width: 228px;
+  height: 228px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin: auto;
   transition: $transition-base;
+  border-radius: var(#{--bs-border-radius-sm});
+  border: 1px solid #f0f0f0;
+
+  img {
+    object-fit: contain;
+  }
 
   &:hover {
     scale: 1.05;