adding custom color by platform

lucasheartcliff · Feb 24, 2024 · 13aa677 · 13aa677
1 parent 9e75732
commit 13aa677
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 26 deletions.
diff --git a/public/assets/jsons/profile.json b/public/assets/jsons/profile.json
@@ -44,31 +44,6 @@
       "title": "IT Techinical Education - IEPB",
       "startDate": "2015-01-01T00:00:00.000Z",
       "endDate": "2016-12-31T00:00:00.000Z"
-    },
-    {
-      "title": "High School - IEPB",
-      "startDate": "2015-01-01T00:00:00.000Z",
-      "endDate": "2016-12-31T00:00:00.000Z"
-    },
-    {
-      "title": "High School - COCA",
-      "startDate": "2014-01-01T00:00:00.000Z",
-      "endDate": "2014-12-31T00:00:00.000Z"
-    },
-    {
-      "title": "Primary School - CEVN",
-      "startDate": "2012-07-01T00:00:00.000Z",
-      "endDate": "2013-12-31T00:00:00.000Z"
-    },
-    {
-      "title": "Primary School - Pestalozzi",
-      "startDate": "2008-01-01T00:00:00.000Z",
-      "endDate": "2012-07-31T00:00:00.000Z"
-    },
-    {
-      "title": "Primary School - Soberano",
-      "startDate": "2005-01-01T00:00:00.000Z",
-      "endDate": "2007-12-31T00:00:00.000Z"
     }
   ],
   "certification": [

diff --git a/src/components/CertificateCard/index.tsx b/src/components/CertificateCard/index.tsx
@@ -2,6 +2,8 @@ import ExportOutlined from '@ant-design/icons/ExportOutlined';
 import Tooltip from 'antd/lib/tooltip';
 import React from 'react';
 
+import { getPlatformColor } from '@/utils';
+
 import Link from '../Link';
 
 interface Props {
@@ -20,7 +22,8 @@ export default function CertificateCard({ name, platform, url }: Props) {
           </Tooltip>
         </div>
         <div
-          className={`inline-flex items-center rounded-md bg-blue-100 px-2 py-1 text-xs font-semibold capitalize text-blue-700 ring-1 ring-inset ring-blue-700/10`}
+          style={{ backgroundColor: getPlatformColor(platform) }}
+          className={`inline-flex items-center rounded-md px-2 py-1 text-xs font-semibold capitalize text-white `}
         >
           {platform}
         </div>

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -43,3 +43,15 @@ export const getLanguageColor = (lang: string) =>
 export const isProgrammingLanguage = (lang: string) => {
   return lang ? lang.toUpperCase() in languageColors : false;
 };
+
+const platformsColor: { [k: string]: string } = {
+  ALURA: '#5ea3d0',
+  UDEMY: '#A435F0',
+  CISCO: '#049fd9',
+  OTHERS: '#049fd9',
+};
+
+export const getPlatformColor = (platform: string) => {
+  const p = platform.toUpperCase();
+  return p in platformsColor ? platformsColor[p] : platformsColor.OTHERS;
+};