fix: if there's an email in the blog link, make it a 'mailto' link.

sametcn99 · Feb 25, 2024 · 214d636 · 214d636 · vercel · Feb 25, 2024
1 parent 4af8891
commit 214d636
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/components/ProfileCard/ProfileCardFooter.tsx b/components/ProfileCard/ProfileCardFooter.tsx
@@ -1,5 +1,5 @@
 import SocialLinks from "./SocialLinks";
-import { createUrlObject } from "@/lib/utils";
+import { checkEmail, createUrlObject } from "@/lib/utils";
 import { MdOutlineWorkOutline } from "react-icons/md";
 import { TfiWorld } from "react-icons/tfi";
 import { Box, Link, Text } from "@radix-ui/themes";
@@ -27,12 +27,18 @@ export default function ProfileCardFooter({
       <Box className="flex w-full flex-row flex-wrap items-center justify-center gap-2">
         {userData.blog && (
           <Link
-            href={createUrlObject(userData.blog).href}
+            href={
+              checkEmail(userData.blog)
+                ? `mailto:${userData.blog}`
+                : createUrlObject(userData.blog).href
+            }
             className="dialog-trigger"
             target="_blank"
           >
             <TfiWorld />
-            {createUrlObject(userData.blog).host}
+            {checkEmail(userData.blog)
+              ? `${userData.blog}`
+              : createUrlObject(userData.blog).href}
           </Link>
         )}
         {userData.company && (

diff --git a/components/ProfileCard/ProfileCardHeader.tsx b/components/ProfileCard/ProfileCardHeader.tsx
@@ -36,7 +36,7 @@ export default function ProfileCardHeader({
             @{userData.login}
           </Link>
           {userData.bio && (
-            <Text className="break-all text-base font-normal md:break-normal">
+            <Text className="break-words text-base font-normal md:break-normal">
               {userData.bio}
             </Text>
           )}

diff --git a/lib/utils.ts b/lib/utils.ts
@@ -40,6 +40,12 @@ export const createUrlObject = (link: string) => {
   return url;
 };
 
+export const checkEmail = (email: string) => {
+  const regex =
+    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+  return regex.test(String(email).toLowerCase());
+};
+
 export async function fetchContact(
   username: string,
   option: string,