Add details
This commit is contained in:
MD. Ariful Alam
parent
147691a39b
commit
9d87bbcb8e
@ -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">
|
||||
|
||||
@ -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
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<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">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<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" />
|
||||
</svg>
|
||||
Item with icon
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<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">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
||||
</svg>
|
||||
Item with icon
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a>
|
||||
<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">
|
||||
<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" />
|
||||
</svg>
|
||||
Item with icon
|
||||
</a>
|
||||
</li>
|
||||
{
|
||||
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>
|
||||
<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>
|
||||
<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>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{
|
||||
profile && profile.location && (
|
||||
<li>
|
||||
<span>
|
||||
<GoLocation className="mr-2"/>
|
||||
{profile.location}
|
||||
</span>
|
||||
</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>
|
||||
|
||||
@ -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',
|
||||
|
||||
|
||||
@ -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);
|
||||
@ -53,7 +51,9 @@ html:not([data-theme="dracula"]) {
|
||||
html[data-theme="dark"],
|
||||
html[data-theme="halloween"],
|
||||
html[data-theme="forest"],
|
||||
html[data-theme="black"],
|
||||
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
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user