Added type and new styling for showcases

gitprofile.config.js

@@ -86,16 +86,17 @@ const config = {
     {
       name: 'Website name 1',
       description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. \
-      //   image_url: 'https://via.placeholder.com/250x250',
+        Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
-      html_url: 'https://example.com',
+      link: 'https://example.com',
     },
     {
       name: 'Website name 2',
       description:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. \
-      image_url: 'https://via.placeholder.com/250x250',
+        Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris. Donec euismod, nunc ut aliquam aliquam, nunc nisl aliquet nisl, eget aliquam nisl nunc vel mauris.',
-      html_url: 'https://example.com',
+      imageUrl: 'https://via.placeholder.com/250x250',
+      link: 'https://example.com',
     },
   ],
   // Display blog posts from your medium or dev account. (Optional)

src/components/GitProfile.jsx

@@ -197,18 +197,17 @@ const GitProfile = ({ config }) => {
                   </div>
                   <div className="lg:col-span-2 col-span-1">
                     <div className="grid grid-cols-1 gap-6">
-                      <Showcase
-                        loading={loading}
-                        cases={sanitizedConfig.showcases}
-                        github={sanitizedConfig.github}
-                        googleAnalytics={sanitizedConfig.googleAnalytics}
-                      />
                       <Project
                         repo={repo}
                         loading={loading}
                         github={sanitizedConfig.github}
                         googleAnalytics={sanitizedConfig.googleAnalytics}
                       />
+                      <Showcase
+                        loading={loading}
+                        cases={sanitizedConfig.showcases}
+                        googleAnalytics={sanitizedConfig.googleAnalytics}
+                      />
                       <Blog
                         loading={loading}
                         googleAnalytics={sanitizedConfig.googleAnalytics}

src/components/showcase/index.jsx

@@ -3,13 +3,12 @@ import { AiOutlineLink } from 'react-icons/ai';
 import PropTypes from 'prop-types';
 import { skeleton } from '../../helpers/utils';
 import { ga } from '../../helpers/utils';
+import LazyImage from '../lazy-image';
 
-const Showcase = ({ cases, loading, github, googleAnalytics }) => {
+const Showcase = ({ cases, loading, googleAnalytics }) => {
   const renderSkeleton = () => {
-    let array = [];
+    return [
-    for (let index = 0; index < github.limit; index++) {
+      <div className="card shadow-lg compact bg-base-100" key="">
-      array.push(
-        <div className="card shadow-lg compact bg-base-100" key={index}>
         <div className="flex justify-between flex-col p-8 h-full w-full">
           <div>
             <div className="flex items-center">
@@ -44,28 +43,25 @@ const Showcase = ({ cases, loading, github, googleAnalytics }) => {
             </div>
           </div>
         </div>
-        </div>
+      </div>,
-      );
+    ];
-    }
-
-    return array;
   };
 
   const renderShowcases = () => {
     return cases.map((item, index) => (
       <a
         className="card shadow-lg compact bg-base-100 cursor-pointer"
-        href={item.html_url}
         key={index}
+        href={item.link}
         onClick={(e) => {
           e.preventDefault();
 
           try {
             if (googleAnalytics?.id) {
               ga.event({
-                action: 'Click showcase',
+                action: 'Click Showcase',
                 params: {
-                  project: item.name,
+                  post: item.name,
                 },
               });
             }
@@ -73,33 +69,42 @@ const Showcase = ({ cases, loading, github, googleAnalytics }) => {
             console.error(error);
           }
 
-          window?.open(item.html_url, '_blank');
+          window?.open(item.link, '_blank');
         }}
       >
-        <div className="flex justify-between flex-col p-8 h-full w-full">
+        <div className="p-8 h-full w-full">
-          <div>
+          <div className="flex items-center flex-col md:flex-row">
-            <div className="flex items-center opacity-60">
+            {item.imageUrl && (
-              <AiOutlineLink className="mr-2" />
+              <div className="avatar mb-5 md:mb-0 opacity-90">
-              <span>
+                <div className="w-24 h-24 mask mask-squircle">
-                <h5 className="card-title text-lg text-base-content">
+                  <LazyImage
-                  {item.name}
+                    src={item.imageUrl}
-                </h5>
+                    alt={'thumbnail'}
-              </span>
+                    placeholder={skeleton({
+                      width: 'w-full',
+                      height: 'h-full',
+                      shape: '',
+                    })}
+                  />
                 </div>
-            <div className="mt-1 flex flex-col md:flex-row">
-              {item?.image_url && (
-                <div className="flex flex-col md:mr-5">
-                  <img src={item.image_url} alt={item.name} />
               </div>
             )}
-              <div className="flex flex-col">
+            <div className="w-full">
-                <p className="mt-1 text-base-content text-opacity-60 text-sm">
+              <div className="flex items-start px-4">
+                <div className="text-center md:text-left w-full">
+                  <h2 className="font-semibold text-base-content opacity-60">
+                    <div className="flex flex-row items-center">
+                      <AiOutlineLink className="mr-1" /> {item.name}
+                    </div>
+                  </h2>
+                  <p className="mt-3 text-base-content text-opacity-60 text-sm">
                     {item.description}
                   </p>
                 </div>
               </div>
             </div>
           </div>
+        </div>
       </a>
     ));
   };
@@ -139,7 +144,6 @@ const Showcase = ({ cases, loading, github, googleAnalytics }) => {
 Showcase.propTypes = {
   cases: PropTypes.array,
   loading: PropTypes.bool.isRequired,
-  github: PropTypes.object.isRequired,
   googleAnalytics: PropTypes.object,
 };
 

types/index.d.ts

@@ -221,6 +221,13 @@ export interface Certifications {
   link?: string;
 }
 
+export interface Showcase {
+  name?: string;
+  description?: string;
+  imageUrl?: string;
+  link?: string;
+}
+
 export interface Education {
   institution?: string;
   degree?: string;
@@ -258,6 +265,11 @@ export interface Config {
    */
   experiences?: Array<Experience>;
   
+  /**
+   * Showcase list
+   */
+  showcases?: Array<Showcase>;
+
   /**
    * Certifications list
    */