feat: add mac bar to terminal component

src/components/organisms/home/Intro.tsx

@@ -5,8 +5,8 @@ import styles from './home.module.css';
 import clsxm from '@/lib/clsxm';
 import { shuffleArray } from '@/lib/helper';
 
-import Code from './Code';
 import Photo from './Photo';
+import Terminal from './Terminal';
 
 import { CodeSnippet } from '@/types/CodeSnippet';
 
@@ -22,11 +22,11 @@ const Intro = ({ greeting, codeSnippets }: IntroProps) => {
         <span className={clsxm(styles.greeting, 'drop-shadow-lg')}>
           {greeting}
         </span>{' '}
-        👋🏻
+        <span className='inline-block animate-waving-hand'>👋🏻</span>
       </h1>
 
       <div className='mt-8 flex flex-col lg:flex-row'>
-        <Code codeSnippets={shuffleArray(codeSnippets)} />
+        <Terminal codeSnippets={shuffleArray(codeSnippets)} />
 
         <Photo />
       </div>

src/components/organisms/home/Terminal.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import React, { useEffect, useState } from 'react';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import {
+  atomOneLight,
+  darcula,
+} from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+import Typed, { TypedOptions } from 'typed.js';
+
+import clsxm from '@/lib/clsxm';
+
+import { CodeSnippet } from '@/types/CodeSnippet';
+
+export interface CodeSnippetsProps {
+  codeSnippets: CodeSnippet[];
+}
+
+const Terminal = ({ codeSnippets }: CodeSnippetsProps) => {
+  const [loading, setLoading] = useState(true);
+
+  const { theme } = useTheme();
+
+  const ideStyle = theme === 'dark' ? darcula : atomOneLight;
+
+  const macIcons = [
+    {
+      id: 'red',
+      lightBg: '#FE5F57',
+      lightBorder: '#E80000',
+      darkBg: '#FE5F57',
+      darkBorder: '#e80000',
+    },
+    {
+      id: 'amber',
+      lightBg: '#FEBC2E',
+      lightBorder: '#E49E00',
+      darkBg: '#FEBC2E',
+      darkBorder: '#E49E00',
+    },
+    {
+      id: 'green',
+      lightBg: '#28C840',
+      lightBorder: '#20AC27',
+      darkBg: '#28C840',
+      darkBorder: '#20AC27',
+    },
+  ];
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  }, []);
+
+  useEffect(() => {
+    if (!loading) {
+      const typedStringsElement = document.getElementById('typed-strings');
+      const typedElement = document.getElementById('typed');
+
+      if (typedStringsElement && typedElement) {
+        const typedOptions: TypedOptions = {
+          stringsElement: '#typed-strings',
+          typeSpeed: 40,
+          backSpeed: 10,
+          backDelay: 5000,
+          loop: true,
+          loopCount: 0,
+          smartBackspace: true,
+          showCursor: true,
+          cursorChar: '_',
+        };
+
+        const typed = new Typed(typedElement, typedOptions);
+
+        // Clean up the Typed.js instance when the component unmounts
+        return () => {
+          typed.destroy();
+        };
+      }
+    }
+  }, [loading]);
+
+  return (
+    <div className='w-full lg:w-1/2 h-60 lg:h-[288px] me-4'>
+      <div className='bg-[#dedede] dark:bg-[#4E4E4E] h-5 rounded-t-lg px-4 py-1 flex'>
+        {macIcons.map((icon) => (
+          <div
+            key={icon.id}
+            className={clsxm(
+              'w-[12px] h-[12px] rounded-full me-1.5',
+              `bg-[${icon.lightBg}] dark:bg-[${icon.darkBg}]`,
+            )}
+          ></div>
+        ))}
+      </div>
+      <div className='h-56 rounded-b-lg border-double bg-[#f1f1f1] dark:bg-[#1E1F21] px-4 pt-2.5 pb-6 lg:h-[264px]'>
+        <div id='typed-strings'>
+          {loading ? <span className='cursor-blink'>_</span> : null}
+          {!loading &&
+            codeSnippets.map((snippet) => (
+              <SyntaxHighlighter
+                className='text-xs md:text-base'
+                key={snippet.id}
+                language={snippet.language}
+                style={ideStyle}
+                wrapLongLines={true}
+              >
+                {snippet.code}
+              </SyntaxHighlighter>
+            ))}
+        </div>
+        <span id='typed'></span>
+      </div>
+    </div>
+  );
+};
+
+export default Terminal;

tailwind.config.ts

@@ -49,10 +49,21 @@ export default {
             backgroundPosition: '700px 0',
           },
         },
+        waving: {
+          '0%': { transform: 'rotate(0.0deg)' },
+          '10%': { transform: 'rotate(14deg)' },
+          '20%': { transform: 'rotate(-8deg)' },
+          '30%': { transform: 'rotate(14deg)' },
+          '40%': { transform: 'rotate(-4deg)' },
+          '50%': { transform: 'rotate(10.0deg)' },
+          '60%': { transform: 'rotate(0.0deg)' },
+          '100%': { transform: 'rotate(0.0deg)' },
+        },
       },
       animation: {
         flicker: 'flicker 3s linear infinite',
         shimmer: 'shimmer 1.3s linear infinite',
+        'waving-hand': 'waving 2.5s linear 2',
       },
     },
   },