refactor: simplify BlogArticleCard using styled-components

src/components/Blog/BlogArticleCard/ActionButtons/cmp.tsx

@@ -0,0 +1,67 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+import { BlogCategoryProps } from "@/types/blog/BlogCategoryProps";
+import { Button, Icon } from "@aleph-front/core";
+
+export const ActionButtons = ({
+  blogArticleUrl,
+  category,
+  loading,
+  size,
+}: {
+  blogArticleUrl?: string;
+  category?: BlogCategoryProps;
+  size: string;
+  loading: boolean;
+}) => {
+  if (size === "highlighted")
+    return (
+      <div tw="flex gap-6">
+        <LoadingBlinkBox
+          loading={loading}
+          loadingHeight="3rem"
+          loadingWidth="50%"
+        >
+          <Button
+            as="a"
+            variant="primary"
+            size="lg"
+            kind="gradient"
+            href={blogArticleUrl}
+          >
+            Read the article
+          </Button>
+          <Button
+            as="a"
+            href={`/blog/categories/${category?.id}`}
+            target="_self"
+            size="sm"
+            variant="textOnly"
+            color="main0"
+          >
+            All {category?.displayName}
+            <Icon name="arrow-right" size="sm" />
+          </Button>
+        </LoadingBlinkBox>
+      </div>
+    );
+  else
+    return (
+      <LoadingBlinkBox
+        loading={loading}
+        loadingHeight="3rem"
+        loadingWidth="66%"
+      >
+        <Button
+          as="a"
+          variant="secondary"
+          size="lg"
+          kind="gradient"
+          href={blogArticleUrl}
+        >
+          Read me
+        </Button>
+      </LoadingBlinkBox>
+    );
+};
+
+export default ActionButtons;

src/components/Blog/BlogArticleCard/ActionButtons/index.tsx

@@ -0,0 +1 @@
+export { default } from "./cmp";

src/components/Blog/BlogArticleCard/Category/cmp.tsx

@@ -0,0 +1,17 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+
+export const Category = ({
+  children,
+  loading,
+}: {
+  children: React.ReactNode;
+  loading: boolean;
+}) => {
+  return (
+    <LoadingBlinkBox loading={loading} loadingHeight="1rem" loadingWidth="25%">
+      <p className="tp-info text-base3">{children}</p>
+    </LoadingBlinkBox>
+  );
+};
+
+export default Category;

src/components/Blog/BlogArticleCard/Category/index.tsx

@@ -0,0 +1 @@
+export { default } from "./cmp";

src/components/Blog/BlogArticleCard/Description/cmp.tsx

@@ -0,0 +1,20 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+import { StyledDescription } from "./styles";
+
+export const Description = ({
+  children,
+  size,
+  loading,
+}: {
+  children: React.ReactNode;
+  size: string;
+  loading: boolean;
+}) => {
+  return (
+    <LoadingBlinkBox loading={loading} loadingHeight="6rem" loadingWidth="100%">
+      <StyledDescription size={size}>{children}</StyledDescription>
+    </LoadingBlinkBox>
+  );
+};
+
+export default Description;

src/components/Blog/BlogArticleCard/Description/index.tsx

@@ -0,0 +1 @@
+export { default } from "./cmp";

src/components/Blog/BlogArticleCard/Description/styles.tsx

@@ -0,0 +1,24 @@
+import styled, { css } from "styled-components";
+import tw from "twin.macro";
+import { getResponsiveCss } from "@aleph-front/core";
+
+export const StyledDescription = styled.p<{ size: string }>`
+  ${tw`line-clamp-3 whitespace-pre-wrap`}
+  ${({ size }) => {
+    if (size === "lg")
+      return css`
+        margin-bottom: 1.5rem;
+        ${getResponsiveCss("lg", "max-width: 77%;")}
+      `;
+    else if (size === "xl" || size === "full")
+      return css`
+        margin-bottom: 3rem;
+        ${getResponsiveCss("lg", "max-width: 77%;")}
+      `;
+    else if (size === "highlighted") return;
+    else
+      return css`
+        margin-bottom: 1.5rem;
+      `;
+  }}
+`;

src/components/Blog/BlogArticleCard/FeatureImage/cmp.tsx

@@ -0,0 +1,20 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+import Image from "next/image";
+
+export const FeatureImage = ({
+  src,
+  loading,
+}: {
+  src: string;
+  loading: boolean;
+}) => {
+  return (
+    <LoadingBlinkBox loading={loading} loadingHeight="100%" loadingWidth="100%">
+      <div tw="relative w-full h-full flex justify-center">
+        <Image src={src} alt="Feature Image" fill />
+      </div>
+    </LoadingBlinkBox>
+  );
+};
+
+export default FeatureImage;

src/components/Blog/BlogArticleCard/FeatureImage/index.tsx

@@ -0,0 +1 @@
+export { default } from "./cmp";

src/components/Blog/BlogArticleCard/Headline/cmp.tsx

@@ -0,0 +1,20 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+import { StyledHeadline } from "./styles";
+
+export const Headline = ({
+  children,
+  size,
+  loading,
+}: {
+  children: React.ReactNode;
+  size: string;
+  loading: boolean;
+}) => {
+  return (
+    <LoadingBlinkBox loading={loading} loadingHeight="3rem" loadingWidth="100%">
+      <StyledHeadline size={size}>{children}</StyledHeadline>
+    </LoadingBlinkBox>
+  );
+};
+
+export default Headline;

src/components/Blog/BlogArticleCard/Headline/index.tsx

@@ -0,0 +1 @@
+export { default } from "./cmp";

src/components/Blog/BlogArticleCard/Headline/styles.tsx

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import tw from "twin.macro";
+
+export const StyledHeadline = styled(
+  ({ children, size: string, className: styledClassName }) => {
+    return <p className={`tp-h7 text-base2 ${styledClassName}`}>{children}</p>;
+  }
+)`
+  ${tw`line-clamp-2 whitespace-pre-wrap`}
+  ${({ size }) => {
+    console.log(size);
+    if (size === "full") return tw`mb-4`;
+  }}
+`;

src/components/Blog/BlogArticleCard/ThumbnailImage/cmp.tsx

@@ -0,0 +1,20 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+import Image from "next/image";
+
+export const ThumbnailImage = ({
+  src,
+  loading,
+}: {
+  src: string;
+  loading: boolean;
+}) => {
+  return (
+    <LoadingBlinkBox loading={loading} loadingHeight="100%" loadingWidth="100%">
+      <div className="fx-grain-5" tw="w-full h-full">
+        <Image src={src} alt="Thumbnail Image" fill tw="object-cover" />
+      </div>
+    </LoadingBlinkBox>
+  );
+};
+
+export default ThumbnailImage;

src/components/Blog/BlogArticleCard/ThumbnailImage/index.tsx

@@ -0,0 +1 @@
+export { default } from "./cmp";

src/components/Blog/BlogArticleCard/Title/cmp.tsx

@@ -0,0 +1,30 @@
+import LoadingBlinkBox from "@/components/LoadingBlinkBox";
+import { StyledTitle } from "./styles";
+
+export const Title = ({
+  children,
+  size,
+  loading,
+}: {
+  children: React.ReactNode;
+  size: string;
+  loading: boolean;
+}) => {
+  const loadingHeight = () => {
+    if (size === "highlighted" || size === "full") return "6rem";
+    if (size === "xl") return "4rem";
+    else return "2rem";
+  };
+
+  return (
+    <LoadingBlinkBox
+      loading={loading}
+      loadingHeight={loadingHeight()}
+      loadingWidth="100%"
+    >
+      <StyledTitle size={size}>{children}</StyledTitle>
+    </LoadingBlinkBox>
+  );
+};
+
+export default Title;

src/components/Blog/BlogArticleCard/Title/index.tsx

@@ -0,0 +1 @@
+export { default } from "./cmp";

src/components/Blog/BlogArticleCard/Title/styles.tsx

@@ -0,0 +1,43 @@
+import { TextGradient } from "@aleph-front/core";
+import styled from "styled-components";
+import tw from "twin.macro";
+
+export const StyledTitle = styled(
+  ({ children, size, className: styledClassName }) => {
+    switch (size) {
+      case "xl":
+        return (
+          <TextGradient
+            type="h2"
+            className={`xs:tp-h4 xl:tp-h2 ${styledClassName}`}
+          >
+            {children}
+          </TextGradient>
+        );
+      case "full":
+        return (
+          <TextGradient type="h2" className={styledClassName}>
+            {children}
+          </TextGradient>
+        );
+      case "highlighted":
+        return (
+          <TextGradient
+            type="h2"
+            className={`tp-h1 lg:tp-header ${styledClassName}`}
+          >
+            {children}
+          </TextGradient>
+        );
+      default:
+        return (
+          <p className={`tp-h6 text-base2 ${styledClassName} `}>{children}</p>
+        );
+    }
+  }
+)`
+  ${tw`line-clamp-3 whitespace-pre-wrap w-fit`}
+  ${({ size }) => {
+    if (size === "xl" || size == "highlighted") return tw`mb-0`;
+  }}
+`;