Add details

src/App.js

@@ -38,6 +38,9 @@ function App() {
                 avatar: data.avatar_url,
                 name: data.name,
                 bio: data.bio,
+                location: data.location,
+                company: data.company,
+                twitter: data.twitter_username,
             }
 
             dispatch(setProfile(profileData));
@@ -70,7 +73,7 @@ function App() {
     return (
         <Fragment>
             <div className="fade-in h-screen">
-                <div className="p-4 lg:p-10 bg-base-200">
+                <div className="p-4 lg:p-10 min-h-full bg-base-200">
                     {
                         error ? (
                             <ErrorPage
@@ -101,7 +104,6 @@ function App() {
                                 }
                             />
                         ) : (
-
                             <div className="grid grid-cols-1 gap-6 xl:grid-cols-3 lg:bg-base-200 rounded-box">
                                 <div className="row-span-3">
                                     <div className="grid grid-cols-1 gap-6">

src/components/Details.js

@@ -1,37 +1,148 @@
+import { GoLocation } from 'react-icons/go';
+import { AiFillGithub } from 'react-icons/ai';
+import { SiTwitter } from 'react-icons/si';
+import { BiBuilding } from 'react-icons/bi';
+import { GrLinkedinOption, GrMail } from 'react-icons/gr';
+import { ImDribbble } from 'react-icons/im';
+import { useSelector } from 'react-redux';
+import config from '../config';
+
 const Details = () => {
+    const profile = useSelector(state => state.profile);
+    const loading = useSelector(state => state.loading);
+
     return (
         <div className="card shadow-lg compact side bg-base-100">
             <div className="card-body">
                 <ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
-                    <li className="menu-title">
+                    {
-                        <span>Menu Title
+                        loading ? (
+                            <>
+                                <li>
+                                    <span>
+                                        <div className="bg-base-300 w-6 h-4 animate-pulse rounded-full mr-2" />
+                                        <div className="bg-base-300 w-32 h-4 animate-pulse rounded-full" />
                                     </span>
                                 </li>
                                 <li>
-                        <a>
+                                    <span>
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 mr-2 stroke-current">
+                                        <div className="bg-base-300 w-6 h-4 animate-pulse rounded-full mr-2" />
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                                        <div className="bg-base-300 w-32 h-4 animate-pulse rounded-full" />
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                                    </span>
-                            </svg>
-                            Item with icon
-                        </a>
                                 </li>
                                 <li>
-                        <a>
+                                    <span>
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 mr-2 stroke-current">
+                                        <div className="bg-base-300 w-6 h-4 animate-pulse rounded-full mr-2" />
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
+                                        <div className="bg-base-300 w-32 h-4 animate-pulse rounded-full" />
-                            </svg>
+                                    </span>
-                            Item with icon
-                        </a>
                                 </li>
+                            </>
+                        ) : (
+                            <>
+                                {
+                                    profile && profile.location && (
                                         <li>
-                        <a>
+                                            <span>
-                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-5 h-5 mr-2 stroke-current">
+                                                <GoLocation className="mr-2"/>
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
+                                                {profile.location}
-                            </svg>
+                                            </span>
-                            Item with icon
-                        </a>
                                         </li>
+                                    )
+                                }
+                                {
+                                    profile && profile.company && (
+                                        <li>
+                                            <span>
+                                                <BiBuilding className="mr-2"/>
+                                                {profile.company}
+                                            </span>
+                                        </li>
+                                    )
+                                }
+                                <li>
+                                    <span>
+                                        <AiFillGithub className="mr-2"/>
+                                        <a 
+                                            href={`https://github.com/${config.githubUsername}`} 
+                                            target="_blank"
+                                            rel="noreferrer"
+                                            className="text-base-content-important"
+                                        >
+                                            {config.githubUsername}
+                                        </a>
+                                    </span>
+                                </li>
+                                {
+                                    profile && profile.twitter && (
+                                        <li>
+                                            <span>
+                                                <SiTwitter className="mr-2"/>
+                                                <a 
+                                                    href={`https://twitter.com/${profile.twitter}`} 
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    className="text-base-content-important"
+                                                >
+                                                    {profile.twitter}
+                                                </a>
+                                            </span>
+                                        </li>
+                                    )
+                                }
+                                {
+                                    typeof config.linkedinUsername !== 'undefined' && config.linkedinUsername && (
+                                        <li>
+                                            <span>
+                                                <GrLinkedinOption className="mr-2"/>
+                                                <a 
+                                                    href={`https://www.linkedin.com/in/${config.linkedinUsername}`} 
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    className="text-base-content-important"
+                                                >
+                                                    {config.linkedinUsername}
+                                                </a>
+                                            </span>
+                                        </li>
+                                    )
+                                }
+                                {
+                                    typeof config.dribbbleUsername !== 'undefined' && config.dribbbleUsername && (
+                                        <li>
+                                            <span>
+                                                <ImDribbble className="mr-2"/>
+                                                <a 
+                                                    href={`https://dribbble.com/${config.dribbbleUsername}`} 
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    className="text-base-content-important"
+                                                >
+                                                    {config.dribbbleUsername}
+                                                </a>
+                                            </span>
+                                        </li>
+                                    )
+                                }
+                                {
+                                    typeof config.email !== 'undefined' && config.email && (
+                                        <li>
+                                            <span>
+                                                <GrMail className="mr-2"/>
+                                                <a 
+                                                    href={`mailto:${config.email}`} 
+                                                    target="_blank"
+                                                    rel="noreferrer"
+                                                    className="text-base-content-important"
+                                                >
+                                                    {config.email}
+                                                </a>
+                                            </span>
+                                        </li>
+                                    )
+                                }
+                            </>
+                        )
+                    }
                 </ul>
             </div>
         </div>

src/config.js

@@ -1,5 +1,8 @@
 module.exports = {
-    githubUsername: 'arifszn',
+    githubUsername: 'arifszn', // required
+    email: 'contact@arifszn.com', // optional
+    linkedinUsername: 'ariful-alam', // optional
+    dribbbleUsername: '', // optional
     themeConfig: {
         default: 'light',
 

src/index.scss

@@ -1,9 +1,5 @@
 @use "sass:meta";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
 ::-webkit-scrollbar-track {
     box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
@@ -41,6 +37,8 @@ html:not([data-theme="dark"]),
 html:not([data-theme="halloween"]), 
 html:not([data-theme="forest"]), 
 html:not([data-theme="black"]), 
+html:not([data-theme="synthwave"]),
+html:not([data-theme="aqua"]),
 html:not([data-theme="luxury"]),
 html:not([data-theme="dracula"]) {
     @include meta.load-css("node_modules/antd/dist/antd.css", $with: null);
@@ -54,6 +52,8 @@ html[data-theme="dark"],
 html[data-theme="halloween"], 
 html[data-theme="forest"], 
 html[data-theme="black"],
+html[data-theme="synthwave"],
+html[data-theme="aqua"],
 html[data-theme="luxury"],
 html[data-theme="dracula"] {
     @include meta.load-css("node_modules/antd/dist/antd.dark.css", $with: null);
@@ -63,6 +63,14 @@ html[data-theme="dracula"] {
     }
 }
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.text-base-content-important {
+    color: hsla(var(--bc) / var(--tw-text-opacity)) !important;
+}
+
 svg {
     vertical-align: unset
 }