feat: Redesigned blog post (#1383)

* feat: Redesigned blog post * chore: Removed unused code
codemod-com · Nov 18, 2024 · d609e24 · d609e24
1 parent 2f7c97f
commit d609e24
Show file tree

Hide file tree

Showing 8 changed files with 193 additions and 234 deletions.
diff --git a/apps/frontend/components/shared/Icon.tsx b/apps/frontend/components/shared/Icon.tsx
@@ -626,18 +626,24 @@ export default function Icon({ name, className }: IconProps) {
     case "calendar":
       return (
         <svg
-          width="20"
-          height="20"
-          viewBox="0 0 20 20"
-          fill="none"
+          width="24"
+          height="24"
           xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
           className={className}
         >
           <path
-            d="M6.66667 1.66667V5M13.3333 1.66667V5M2.5 8.33333H17.5M4.16667 3.33333H15.8333C16.7538 3.33333 17.5 4.07952 17.5 5V16.6667C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6667V5C2.5 4.07952 3.24619 3.33333 4.16667 3.33333Z"
-            stroke="currentColor"
-            strokeWidth="1.2"
-            strokeLinecap="square"
+            fill="currentColor"
+            d="M8 5.75c-.41 0-.75-.34-.75-.75V2c0-.41.34-.75.75-.75s.75.34.75.75v3c0 .41-.34.75-.75.75ZM16 5.75c-.41 0-.75-.34-.75-.75V2c0-.41.34-.75.75-.75s.75.34.75.75v3c0 .41-.34.75-.75.75ZM20.5 9.84h-17c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h17c.41 0 .75.34.75.75s-.34.75-.75.75Z"
+          />
+          <path
+            fill="currentColor"
+            d="M16 22.75H8c-3.65 0-5.75-2.1-5.75-5.75V8.5c0-3.65 2.1-5.75 5.75-5.75h8c3.65 0 5.75 2.1 5.75 5.75V17c0 3.65-2.1 5.75-5.75 5.75ZM8 4.25c-2.86 0-4.25 1.39-4.25 4.25V17c0 2.86 1.39 4.25 4.25 4.25h8c2.86 0 4.25-1.39 4.25-4.25V8.5c0-2.86-1.39-4.25-4.25-4.25H8Z"
+          />
+          <path
+            fill="currentColor"
+            d="M8.5 14.5c-.13 0-.26-.03-.38-.08s-.23-.12-.33-.21c-.09-.1-.16-.21-.21-.33a.995.995 0 0 1-.08-.38c0-.26.11-.52.29-.71.1-.09.21-.16.33-.21.18-.08.38-.1.58-.06.06.01.12.03.18.06.06.02.12.05.18.09l.15.12c.04.05.09.1.12.15.04.06.07.12.09.18.03.06.05.12.06.18.01.07.02.13.02.2 0 .26-.11.52-.29.71-.19.18-.45.29-.71.29ZM12 14.5c-.26 0-.52-.11-.71-.29l-.12-.15a.757.757 0 0 1-.09-.18.636.636 0 0 1-.06-.18c-.01-.07-.02-.13-.02-.2 0-.13.03-.26.08-.38s.12-.23.21-.33c.28-.28.73-.37 1.09-.21.13.05.23.12.33.21.18.19.29.45.29.71 0 .07-.01.13-.02.2-.01.06-.03.12-.06.18-.02.06-.05.12-.09.18l-.12.15c-.1.09-.2.16-.33.21-.12.05-.25.08-.38.08ZM8.5 18c-.13 0-.26-.03-.38-.08s-.23-.12-.33-.21c-.09-.1-.16-.2-.21-.33A.995.995 0 0 1 7.5 17c0-.26.11-.52.29-.71.1-.09.21-.16.33-.21.37-.16.81-.07 1.09.21.04.05.09.1.12.15.04.06.07.12.09.18.03.06.05.12.06.19.01.06.02.13.02.19 0 .26-.11.52-.29.71-.19.18-.45.29-.71.29Z"
           />
         </svg>
       );
@@ -1648,6 +1654,23 @@ export default function Icon({ name, className }: IconProps) {
           />
         </svg>
       );
+
+    case "countdown-timer":
+      return (
+        <svg
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 20 20"
+          className={className}
+        >
+          <path
+            fill="currentColor"
+            d="M20.25 10.812c-.462 5.37-5.191 9.35-10.562 8.888C4.316 19.238.337 14.51.798 9.138a9.761 9.761 0 0 1 8.89-8.89.753.753 0 0 1 .123 1.5 8.262 8.262 0 1 0 8.937 8.938.752.752 0 1 1 1.5.124l.002.002ZM9.75 4.75V10c0 .413.336.75.75.75h5.25a.751.751 0 0 0 0-1.5h-4.5v-4.5a.75.75 0 0 0-1.5 0ZM13.5 2.5a1.126 1.126 0 1 0-.002-2.252A1.126 1.126 0 0 0 13.5 2.5Zm3.375 2.25a1.126 1.126 0 1 0-.002-2.252 1.126 1.126 0 0 0 .002 2.252Zm2.25 3.375a1.126 1.126 0 1 0-.002-2.252 1.126 1.126 0 0 0 .002 2.252Z"
+          />
+        </svg>
+      );
   }
 }
 

diff --git a/apps/frontend/components/shared/RichText.tsx b/apps/frontend/components/shared/RichText.tsx
@@ -85,7 +85,7 @@ function createDefaultComponents(
           {...prepareProps(props)}
           className={cx({
             uppercase: usage === "default",
-            "s-heading  py-4": usage === "textPage",
+            "s-heading py-4": usage === "textPage",
           })}
         >
           {props.children}
@@ -101,6 +101,11 @@ function createDefaultComponents(
           {props.children}
         </h4>
       ),
+      p: (props) => (
+        <p {...prepareProps(props)} className={cx("body-l")}>
+          {props.children}
+        </p>
+      ),
       normal: (props) => (
         <p
           {...prepareProps(props)}

diff --git a/apps/frontend/components/shared/pt.blocks/CodeSnippet.tsx b/apps/frontend/components/shared/pt.blocks/CodeSnippet.tsx
@@ -49,7 +49,7 @@ export function CodeSnippet(props: { code: CodeBlockProps }) {
   return (
     <div
       className={clsx(
-        "codeblock relative mb-10 h-full overflow-hidden rounded-md bg-emphasis-light/5 p-4 pr-12 dark:bg-emphasis-dark/10",
+        "codeblock relative mb-10 h-full overflow-hidden rounded-md bg-emphasis-light/5 backdrop-blur-md p-4 pr-12 dark:bg-emphasis-dark/10",
         `${inconsolata.variable} font-mono text-lg`,
       )}
     >

diff --git a/apps/frontend/components/shared/pt.blocks/Image.tsx b/apps/frontend/components/shared/pt.blocks/Image.tsx
@@ -4,8 +4,8 @@ import { SanityImage } from "../SanityImage";
 
 export default function ImageBlock(props: ImageBlock) {
   return (
-    <div className="my-10 flex flex-col ">
-      <div className={cx("overflow-hidden rounded-lg")}>
+    <div className="my-10 -mx-2 lg:-mx-10 flex flex-col gap-4">
+      <div className={cx("overflow-hidden rounded-xl")}>
         {
           <SanityImage
             maxWidth={1440}
@@ -15,7 +15,7 @@ export default function ImageBlock(props: ImageBlock) {
         }
       </div>
       {props.caption && (
-        <p className="body-s-medium mt-1 font-medium text-secondary-light dark:text-secondary-dark">
+        <p className="body-s-medium font-medium text-secondary-light dark:text-secondary-dark text-center pb-0">
           {props.caption}
         </p>
       )}

diff --git a/apps/frontend/components/shared/pt.blocks/Quote.tsx b/apps/frontend/components/shared/pt.blocks/Quote.tsx
@@ -3,7 +3,7 @@ import { SanityImage } from "../SanityImage";
 
 export const Quote = (props: QuoteProps) => {
   return (
-    <blockquote className="mt-4 border-l-2 border-black pl-6">
+    <blockquote className="my-10">
       {props.image && (
         <SanityImage
           maxWidth={450}
@@ -12,19 +12,19 @@ export const Quote = (props: QuoteProps) => {
           alt={props.authorImage?.alt}
         />
       )}
-      <q className="s-heading mb-8 block max-w-2xl font-medium">
+      <q className="body-l-medium lg:m-heading mb-8 block font-medium">
         {props.quote}
       </q>
-      <div className="flex gap-2">
+      <div className="flex items-center gap-3">
         {props.authorImage && (
           <SanityImage
-            elProps={{ className: "rounded-sm w-11 h-11" }}
+            elProps={{ className: "rounded-full w-8 h-8" }}
             maxWidth={100}
             image={props.authorImage}
             alt={props.authorImage?.alt}
           />
         )}
-        <div className="flex flex-col gap-1">
+        <div className="flex items-center flex-row flex-wrap gap-1">
           <cite className="body-s-medium font-medium not-italic">
             {props.authorName}
           </cite>
@@ -40,9 +40,5 @@ export const Quote = (props: QuoteProps) => {
 };
 
 export default function QuoteBlock(props: QuoteProps) {
-  return (
-    <div className="mt-10">
-      <Quote {...props} />
-    </div>
-  );
+  return <Quote {...props} />;
 }