Merge pull request #107 from minskylab/dev

feat: add whatsapp link
minskylab · Oct 26, 2023 · af0f12e · af0f12e
2 parents 97ad27c + b199617
commit af0f12e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 8 deletions.
diff --git a/public/locales/en/home.json b/public/locales/en/home.json
@@ -136,7 +136,7 @@
     "title": "Contact information",
     "fields": {
       "email": "Email",
-      "phone": "Phone",
+      "whatsapp": "Whatsapp",
       "address": "Address",
       "hours": "Working Hours"
     }

diff --git a/public/locales/es/home.json b/public/locales/es/home.json
@@ -135,7 +135,7 @@
     "title": "Información de contacto",
     "fields": {
       "email": "Correo",
-      "phone": "Teléfono",
+      "whatsapp": "Whatsapp",
       "address": "Dirección",
       "hours": "Horario de trabajo"
     }

diff --git a/src/components/ui/ContactCard/contact.tsx b/src/components/ui/ContactCard/contact.tsx
@@ -1,6 +1,6 @@
 import React from "react";
-import { createStyles, ThemeIcon, Text, SimpleGrid, Box, Stack } from "@mantine/core";
-import { Sun, Phone, MapPin, At } from "tabler-icons-react";
+import { createStyles, ThemeIcon, Text, SimpleGrid, Box, Stack, Anchor } from "@mantine/core";
+import { Sun, MapPin, At, BrandWhatsapp } from "tabler-icons-react";
 import { useTranslation } from "next-i18next";
 
 type ContactIconVariant = "white" | "gradient";
@@ -40,13 +40,15 @@ interface ContactIconProps extends Omit<React.ComponentPropsWithoutRef<"div">, "
   icon: React.FC<any>;
   title: React.ReactNode;
   description: React.ReactNode;
+  type: String;
   variant?: ContactIconVariant;
 }
 
 function ContactIcon({
   icon: Icon,
   title,
   description,
+  type,
   variant = "gradient",
   className,
   ...others
@@ -69,7 +71,17 @@ function ContactIcon({
         <Text size="xs" className={classes.title}>
           {title}
         </Text>
-        <Text className={classes.description}>{description}</Text>
+        {type == "link" ? (
+          <Anchor
+            color="brand.4"
+            href="https://wa.me/961818237?text=Me%20gustaría%20obtener%20más%20información%20sobre%20sus%20servicios."
+            target="_blank"
+          >
+            {description}
+          </Anchor>
+        ) : (
+          <Text className={classes.description}>{description}</Text>
+        )}
       </div>
     </div>
   );
@@ -84,14 +96,30 @@ export function ContactIconsList({ variant }: ContactIconsListProps) {
   const { t } = useTranslation("home");
 
   const MOCKDATA = [
-    { title: t("contactInformation.fields.email"), description: "hello@minsky.cc", icon: At },
-    { title: t("contactInformation.fields.phone"), description: "+51 924 122 969", icon: Phone },
+    {
+      title: t("contactInformation.fields.email"),
+      description: "hello@minsky.cc",
+      icon: At,
+      type: "text",
+    },
+    {
+      title: t("contactInformation.fields.whatsapp"),
+      description: "+51961818237",
+      icon: BrandWhatsapp,
+      type: "link",
+    },
     {
       title: t("contactInformation.fields.address"),
       description: "Jr. Rosendo Vidaurre 641, Lima, Barranco",
       icon: MapPin,
+      type: "text",
+    },
+    {
+      title: t("contactInformation.fields.hours"),
+      description: "08:00 to 18:00.",
+      icon: Sun,
+      type: "text",
     },
-    { title: t("contactInformation.fields.hours"), description: "08:00 to 18:00.", icon: Sun },
   ];
 
   const items = MOCKDATA.map((item, index) => (