Update[landing page]: replace landing page with activity & removed badge button & icon

Author: ugistelmokaitis

.slicemachine/assets/customtypes/home/mocks.json

@@ -1,25 +1,25 @@
 {
-  "id": "10aec4bb-e240-4904-90ff-81e06c00e31e",
-  "uid": "voluptatum-quo-culpa",
+  "id": "0f106771-493d-476c-9c07-d17cfa29e837",
+  "uid": "ex-quo-eos",
   "type": "home",
   "data": {
-    "titleTag": "disintermediate magnetic networks",
-    "metaDescription": "transform virtual blockchains",
-    "heroGreetingTitle": "synergize frictionless synergies",
-    "heroNameTitle": "aggregate vertical markets",
-    "heroDescription": "deploy bleeding-edge infomediaries",
-    "badgeButtonPrefix": "generate open-source web services",
-    "badgeButtonLabel": "monetize best-of-breed vortals",
+    "titleTag": "reinvent robust e-business",
+    "metaDescription": "enable e-business eyeballs",
+    "heroGreetingTitle": "redefine wireless mindshare",
+    "heroNameTitle": "morph seamless infrastructures",
+    "heroDescription": "brand one-to-one solutions",
+    "badgeButtonPrefix": "benchmark user-centric eyeballs",
+    "badgeButtonLabel": "morph integrated functionalities",
     "badgeButtonLink": {
       "link_type": "Web",
-      "url": "https://slicemachine.dev"
+      "url": "http://twitter.com"
     },
-    "editorWindowTabTitle": "drive 24/7 supply-chains",
-    "editorWindowContent": "strategize real-time bandwidth",
+    "editorWindowTabTitle": "visualize viral applications",
+    "editorWindowContent": "empower cross-media action-items",
     "skillsTitle": [
       {
         "type": "heading1",
-        "text": "Evolve rich schemas",
+        "text": "Embrace dot-com interfaces",
         "spans": []
       }
     ],
@@ -28,7 +28,7 @@
         "skill": [
           {
             "type": "heading3",
-            "text": "Productize e-business action-items",
+            "text": "Architect web-enabled e-business",
             "spans": []
           }
         ]
@@ -37,7 +37,7 @@
         "skill": [
           {
             "type": "heading3",
-            "text": "Engineer visionary synergies",
+            "text": "Harness ubiquitous synergies",
             "spans": []
           }
         ]
@@ -46,7 +46,7 @@
         "skill": [
           {
             "type": "heading3",
-            "text": "Engineer sexy mindshare",
+            "text": "Deliver bleeding-edge infomediaries",
             "spans": []
           }
         ]
@@ -55,7 +55,7 @@
         "skill": [
           {
             "type": "heading3",
-            "text": "Synthesize bleeding-edge synergies",
+            "text": "Streamline vertical ROI",
             "spans": []
           }
         ]
@@ -64,7 +64,7 @@
     "experienceTitle": [
       {
         "type": "heading1",
-        "text": "Syndicate magnetic models",
+        "text": "Streamline sexy relationships",
         "spans": []
       }
     ],
@@ -77,13 +77,29 @@
           },
           "alt": "Placeholder image",
           "copyright": null,
-          "url": "https://images.unsplash.com/photo-1607582278038-6bebbd4d7b72?w=900&h=500&fit=crop"
+          "url": "https://images.unsplash.com/photo-1493119508027-2b584f234d6c?w=900&h=500&fit=crop"
         },
-        "companyName": "productize B2C networks",
-        "companyRole": "benchmark leading-edge schemas",
-        "companyYear": "transform cutting-edge platforms",
-        "companyResponsibilities": "incentivize rich web-readiness",
-        "companyTools": "incubate out-of-the-box vortals"
+        "companyName": "morph bleeding-edge users",
+        "companyRole": "productize plug-and-play e-commerce",
+        "companyYear": "innovate proactive deliverables",
+        "companyResponsibilities": "innovate revolutionary deliverables",
+        "companyTools": "harness out-of-the-box channels"
+      },
+      {
+        "companyLogo": {
+          "dimensions": {
+            "width": 900,
+            "height": 500
+          },
+          "alt": "Placeholder image",
+          "copyright": null,
+          "url": "https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?w=900&h=500&fit=crop"
+        },
+        "companyName": "grow out-of-the-box synergies",
+        "companyRole": "incentivize scalable partnerships",
+        "companyYear": "seize back-end mindshare",
+        "companyResponsibilities": "syndicate value-added partnerships",
+        "companyTools": "integrate bricks-and-clicks deliverables"
       },
       {
         "companyLogo": {
@@ -95,12 +111,14 @@
           "copyright": null,
           "url": "https://images.unsplash.com/photo-1576662712957-9c79ae1280f8?w=900&h=500&fit=crop"
         },
-        "companyName": "generate dot-com portals",
-        "companyRole": "architect clicks-and-mortar web-readiness",
-        "companyYear": "redefine value-added ROI",
-        "companyResponsibilities": "grow efficient networks",
-        "companyTools": "empower world-class systems"
+        "companyName": "whiteboard distributed e-markets",
+        "companyRole": "exploit open-source infrastructures",
+        "companyYear": "streamline dot-com functionalities",
+        "companyResponsibilities": "evolve cross-platform systems",
+        "companyTools": "extend global web-readiness"
       }
-    ]
+    ],
+    "customActivityEmoji": "aggregate viral infrastructures",
+    "customActivityTitle": "aggregate cutting-edge relationships"
   }
 }

components/activity.tsx

@@ -0,0 +1,30 @@
+import type { KeyTextField } from '@prismicio/types';
+import type { FC } from 'react';
+import useActivity from '../hooks/useActivity';
+
+type ActivityProps = {
+  customEmoji: KeyTextField;
+  customTitle?: KeyTextField;
+};
+
+const Activity: FC<ActivityProps> = ({ customEmoji, customTitle }) => {
+  const activity = useActivity();
+
+  if (customEmoji && customTitle) {
+    activity.emoji = customEmoji;
+    activity.status = customTitle;
+  }
+
+  return (
+    <div className="inline-flex items-center justify-between rounded-full bg-primary-25 py-1 px-1 pr-4 dark:bg-neutral-65 ">
+      <span className="ABCWhyteEdu-Medium mr-3 rounded-full bg-primary-100 px-[12px] py-1  font-medium text-neutral-0">
+        {activity.emoji}
+      </span>
+      <span className="ABCWhyteEdu-Medium font-[350] text-neutral-100 dark:text-neutral-0">
+        I&apos;m currently {activity.status}
+      </span>
+    </div>
+  );
+};
+
+export default Activity;

components/badgeButton.tsx

@@ -175,6 +175,22 @@
           }
         }
       }
+    },
+    "Activity": {
+      "customActivityEmoji": {
+        "type": "Text",
+        "config": {
+          "label": "Custom Activity Emoji",
+          "placeholder": ""
+        }
+      },
+      "customActivityTitle": {
+        "type": "Text",
+        "config": {
+          "label": "Custom Activity Title",
+          "placeholder": ""
+        }
+      }
     }
   }
 }

customtypes/home/index.json

@@ -0,0 +1,109 @@
+import { useEffect, useState } from 'react';
+
+type ActivityResponse = {
+  emoji: string;
+  status: string;
+  source?: string;
+};
+
+const useActivity = (): ActivityResponse => {
+  const [status, setStatus] = useState<ActivityResponse>({
+    emoji: '🤔',
+    status: 'Not sure',
+  });
+
+  useEffect(() => {
+    const date = new Date().toLocaleTimeString('en-US', {
+      timeZone: 'Australia/Sydney',
+      hour12: false,
+      hour: 'numeric',
+      minute: 'numeric',
+    });
+
+    const hour = Number(date.split(':')[0]);
+    const minute = Number(date.split(':')[1]);
+
+    const time = Number(hour * 60 + minute);
+
+    if (time >= 0 && time <= 390) {
+      setStatus({
+        emoji: '😴',
+        status: 'sleeping',
+      });
+      return;
+    }
+
+    if (time >= 420 && time <= 480) {
+      setStatus({
+        emoji: '💪',
+        status: 'training in the gym',
+      });
+      return;
+    }
+
+    if (time >= 500 && time <= 509) {
+      setStatus({
+        emoji: '☕️',
+        status: 'having a coffee',
+      });
+      return;
+    }
+
+    if (time >= 510 && time <= 540) {
+      setStatus({
+        emoji: '👟',
+        status: 'going for a walk',
+      });
+      return;
+    }
+
+    if (time >= 780 && time <= 810) {
+      setStatus({
+        emoji: '🥗',
+        status: 'having a lunch',
+      });
+      return;
+    }
+
+    if (time >= 1050 && time <= 1109) {
+      setStatus({
+        emoji: '👟',
+        status: 'going for a walk',
+      });
+      return;
+    }
+
+    if (time >= 1110 && time <= 1169) {
+      setStatus({
+        emoji: '🍔',
+        status: 'having a dinner',
+      });
+      return;
+    }
+
+    if (time >= 1170 && time <= 1229) {
+      setStatus({
+        emoji: '🍿',
+        status: 'watching Netflix',
+      });
+      return;
+    }
+
+    if (time >= 1230 && time <= 1439) {
+      setStatus({
+        emoji: '👨‍💻',
+        status: 'coding',
+      });
+      return;
+    }
+
+    setStatus({
+      emoji: '💻',
+      status: 'working',
+    });
+  }, []);
+
+  return status;
+};
+
+export default useActivity;

hooks/useActivity.tsx

@@ -14,6 +14,7 @@ import Container from '../components/container';
 import BadgeButton from '../components/badgeButton';
 import BrowserWindow from '../components/browserWindow';
 import richTextComponents from '../components/richTextComponents';
+import Activity from '../components/activity';
 
 type IHome = {
   data: HomeProps['data'];
@@ -51,10 +52,9 @@ const Home: FC<IHome> = ({ data, settings }) => {
       <Container>
         <div>
           <div className="col-span-8 col-start-3 pt-[8.5rem] text-center lg:pt-44">
-            <BadgeButton
-              href={`${docResolver(data.badgeButtonLink)}`}
-              child1={data.badgeButtonPrefix}
-              child2={data.badgeButtonLabel}
+            <Activity
+              customEmoji={data.customActivityEmoji}
+              customTitle={data.customActivityTitle}
             />
             <h1 className="ABCWhyteEdu-Bold mx-auto mt-6 items-center text-3xl font-bold tracking-[0.02em] text-neutral-100 dark:text-neutral-0 1xs:text-2xl sm:text-1xl lg:text-xl">
               {data.heroGreetingTitle}

pages/index.tsx

@@ -20,6 +20,8 @@ export type HomeProps = PrismicDocumentWithUID<{
   badgeButtonPrefix: KeyTextField;
   badgeButtonLabel: KeyTextField;
   badgeButtonLink: LinkField;
+  customActivityEmoji: KeyTextField;
+  customActivityTitle: KeyTextField;
   company: companyProps;
   skills: skillsProps;
 }>;