noham/gitprofile
1
0
Fork 0
mirror of https://github.com/NohamR/gitprofile.git synced 2026-05-25 12:27:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add details

Browse Source
This commit is contained in:
MD. Ariful Alam
2021-08-22 01:46:54 +06:00
parent 147691a39b
commit 9d87bbcb8e
4 changed files with 161 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/App.js
View File

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

169
src/components/Details.js
View File

@@ -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 Details = () => {
const profile = useSelector(state => state.profile);
const loading = useSelector(state => state.loading);
return ( return (
<div className="card shadow-lg compact side bg-base-100"> <div className="card shadow-lg compact side bg-base-100">
<div className="card-body"> <div className="card-body">
<ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40"> <ul className="menu row-span-3 bg-base-100 text-base-content text-opacity-40">
<li className="menu-title"> {
<span>Menu Title loading ? (
</span> <>
</li> <li>
<li> <span>
<a> <div className="bg-base-300 w-6 h-4 animate-pulse rounded-full mr-2" />
<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-32 h-4 animate-pulse rounded-full" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> </span>
<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" /> </li>
</svg> <li>
Item with icon <span>
</a> <div className="bg-base-300 w-6 h-4 animate-pulse rounded-full mr-2" />
</li> <div className="bg-base-300 w-32 h-4 animate-pulse rounded-full" />
<li> </span>
<a> </li>
<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"> <li>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" /> <span>
</svg> <div className="bg-base-300 w-6 h-4 animate-pulse rounded-full mr-2" />
Item with icon <div className="bg-base-300 w-32 h-4 animate-pulse rounded-full" />
</a> </span>
</li> </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> profile && profile.location && (
Item with icon <li>
</a> <span>
</li> <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> </ul>
</div> </div>
</div> </div>

5
src/config.js
View File

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

16
src/index.scss
View File

@@ -1,9 +1,5 @@
@use "sass:meta"; @use "sass:meta";
@tailwind base;
@tailwind components;
@tailwind utilities;
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 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); -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="halloween"]),
html:not([data-theme="forest"]), html:not([data-theme="forest"]),
html:not([data-theme="black"]), html:not([data-theme="black"]),
html:not([data-theme="synthwave"]),
html:not([data-theme="aqua"]),
html:not([data-theme="luxury"]), html:not([data-theme="luxury"]),
html:not([data-theme="dracula"]) { html:not([data-theme="dracula"]) {
@include meta.load-css("node_modules/antd/dist/antd.css", $with: null); @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="halloween"],
html[data-theme="forest"], 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="luxury"],
html[data-theme="dracula"] { html[data-theme="dracula"] {
@include meta.load-css("node_modules/antd/dist/antd.dark.css", $with: null); @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 { svg {
vertical-align: unset vertical-align: unset
} }