🐛 fix(font): svg animation not showing pt mono bold

myanmar-software-engineers · Oct 19, 2023 · 35ca072 · 35ca072
1 parent d4f452f
commit 35ca072
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 7 deletions.
diff --git a/src/components/Animate/MseTypo/MseTypo.tsx b/src/components/Animate/MseTypo/MseTypo.tsx
@@ -1,7 +1,7 @@
 import { useRef } from "react";
 import { motion, useInView } from "framer-motion";
 import { cn } from "@/utils";
-import { titleFont } from "@/fonts/fonts";
+import { titleFont, titleFontBold } from "@/fonts/fonts";
 
 export const strokeAnimation = {
   hidden: { strokeDashoffset: 650, strokeDasharray: 650 },
@@ -40,7 +40,7 @@ const MsoTypo = () => {
       <g id="TextGroup">
         <motion.text
           variants={strokeAnimation}
-          className={cn("st10 st11 st12", titleFont.className)}
+          className={cn("st10 st11 st12", titleFontBold.className)}
           transform="translate(10.957 106.424)"
         >
           {"M"}
@@ -68,7 +68,7 @@ const MsoTypo = () => {
         </text>
         <motion.text
           variants={strokeAnimation}
-          className={cn("st10 st11 st12", titleFont.className)}
+          className={cn("st10 st11 st12", titleFontBold.className)}
           transform="translate(272.74 108.424)"
         >
           {"E"}

diff --git a/src/components/Common/TitleText/TitleText.tsx b/src/components/Common/TitleText/TitleText.tsx
@@ -1,20 +1,29 @@
-import { titleFont } from "@/fonts/fonts";
+import { titleFont, titleFontBold } from "@/fonts/fonts";
 import { cn } from "@/utils";
 import { PropsWithChildren } from "react";
 
 type TTitleText = PropsWithChildren<{
   className?: string;
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "div" | "p";
+  isBold?: boolean;
 }>;
 
 const TitleText: React.FC<TTitleText> = ({
   className = "",
   children,
   tag = "h1",
+  isBold = false,
 }) => {
   const Component = tag;
   return (
-    <Component className={cn(titleFont.className, "text-lg", className)}>
+    <Component
+      className={cn(
+        titleFont.className,
+        "text-lg",
+        isBold && titleFontBold.className,
+        className
+      )}
+    >
       {children}
     </Component>
   );

diff --git a/src/components/Ui/MseLogo/MseLogo.tsx b/src/components/Ui/MseLogo/MseLogo.tsx
@@ -5,10 +5,10 @@ const MseLogo = () => {
   return (
     <TitleText>
       <MseLink href="/">
-        <TitleText tag="span" className="text-xl font-bold">
+        <TitleText tag="span" className="text-xl" isBold>
           MM
         </TitleText>
-        <TitleText tag="span" className="text-md">
+        <TitleText tag="span" className="text-base">
           SWE.com
         </TitleText>
       </MseLink>

diff --git a/src/fonts/PT Mono Bold.ttf b/src/fonts/PT Mono Bold.ttf
diff --git a/src/fonts/fonts.ts b/src/fonts/fonts.ts
@@ -1,4 +1,6 @@
 import { PT_Mono, Work_Sans } from "next/font/google";
+import localFont from "next/font/local";
+// import {} from "next/font"
 
 export const titleFont = PT_Mono({
   weight: "400",
@@ -9,3 +11,8 @@ export const bodyFont = Work_Sans({
   weight: "400",
   subsets: ["latin"],
 });
+
+export const titleFontBold = localFont({
+  src: "./PT Mono Bold.ttf",
+  display: "swap",
+});