Display avatar
This commit is contained in:
MD. Ariful Alam
parent
e6935a32b9
commit
ec5344f0c9
491
src/App.js
491
src/App.js
@ -1,238 +1,309 @@
|
|||||||
import { useEffect } from "react";
|
import axios from "axios";
|
||||||
import { useSelector } from "react-redux";
|
import { Fragment, memo, useEffect, useState } from "react";
|
||||||
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
|
import AvatarCard from "./components/AvatarCard";
|
||||||
import Demo from "./components/Demo";
|
import Demo from "./components/Demo";
|
||||||
|
import ErrorPage from "./components/ErrorPage";
|
||||||
import ThemeChanger from "./components/ThemeChanger";
|
import ThemeChanger from "./components/ThemeChanger";
|
||||||
|
import config from "./config";
|
||||||
|
import moment from 'moment';
|
||||||
|
import { setLoading } from "./store/slices/loadingSlice";
|
||||||
|
import { setProfile } from "./store/slices/profileSlice";
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
|
const dispatch = useDispatch();
|
||||||
const theme = useSelector(state => state.theme);
|
const theme = useSelector(state => state.theme);
|
||||||
|
|
||||||
|
const [error, setError] = useState(null);
|
||||||
|
const [rateLimit, setRateLimit] = useState(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (theme) {
|
if (theme) {
|
||||||
document.documentElement.setAttribute('data-theme', theme);
|
document.documentElement.setAttribute('data-theme', theme);
|
||||||
}
|
}
|
||||||
}, [theme])
|
}, [theme])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadGitData();
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const loadGitData = () => {
|
||||||
|
axios.get(`https://api.github.com/users/${config.githubUsername}`)
|
||||||
|
.then(response => {
|
||||||
|
|
||||||
|
let data = response.data;
|
||||||
|
|
||||||
|
let profileData = {
|
||||||
|
avatar: data.avatar_url,
|
||||||
|
name: data.name,
|
||||||
|
bio: data.bio,
|
||||||
|
}
|
||||||
|
|
||||||
|
dispatch(setProfile(profileData));
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error:', error);
|
||||||
|
|
||||||
|
try {
|
||||||
|
setRateLimit({
|
||||||
|
remaining: error.response.headers['x-ratelimit-remaining'],
|
||||||
|
reset: moment(new Date(error.response.headers['x-ratelimit-reset'] * 1000)).fromNow(),
|
||||||
|
})
|
||||||
|
if (error.response.status === 403) {
|
||||||
|
setError(403);
|
||||||
|
} else if (error.response.status === 404) {
|
||||||
|
setError(404);
|
||||||
|
} else {
|
||||||
|
setError(500);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
setError(500);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
dispatch(setLoading(false));
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="fade-in h-screen">
|
<Fragment>
|
||||||
<div className="p-4 lg:p-10 bg-base-200">
|
<div className="fade-in h-screen">
|
||||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-3 lg:bg-base-200 rounded-box">
|
<div className="p-4 lg:p-10 bg-base-200">
|
||||||
<div className="row-span-3">
|
{
|
||||||
<div class="grid grid-cols-1 gap-6">
|
error ? (
|
||||||
<div className="card shadow-lg compact side bg-base-100">
|
<ErrorPage
|
||||||
<div>
|
status={`${error}`}
|
||||||
|
title={(error === 404) ? 'The Github Username is Incorrect' : (
|
||||||
|
error === 403 ? 'Too Many Request.' : `${error}`
|
||||||
|
)}
|
||||||
|
subTitle={
|
||||||
|
(error === 404) ? (
|
||||||
|
<p>
|
||||||
|
Please provide correct github username in <code>src\config.js</code>
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
error === 403 ? (
|
||||||
|
<p>
|
||||||
|
Oh no, you hit the{' '}
|
||||||
|
<a
|
||||||
|
href="https://developer.github.com/v3/rate_limit/"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
rate limit
|
||||||
|
</a>
|
||||||
|
! Try again later{rateLimit && ` ${rateLimit.reset}`}.
|
||||||
|
</p>
|
||||||
|
) : `Something went wrong`
|
||||||
|
)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
|
||||||
|
<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">
|
||||||
|
{
|
||||||
|
!config.themeConfig.disableSwitch && (
|
||||||
|
<ThemeChanger />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
<AvatarCard />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card shadow-lg compact side bg-base-100">
|
||||||
|
<div className="flex-row items-center space-x-4 card-body">
|
||||||
|
<div>
|
||||||
|
<div className="avatar">
|
||||||
|
<div className="rounded-full w-14 h-14 shadow">
|
||||||
|
<img src="https://i.pravatar.cc/500?img=32" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="card-title">Janis Johnson</h2>
|
||||||
|
<p className="text-base-content text-opacity-40">Accounts Agent</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card shadow-lg compact side bg-base-100">
|
||||||
<div className="flex-row items-center space-x-4 card-body">
|
<div className="flex-row items-center space-x-4 card-body">
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<h2 className="card-title">Theme</h2>
|
<h2 className="card-title">Meredith Mayer</h2>
|
||||||
<p className="text-base-content text-opacity-40">Change Theme</p>
|
<p className="text-base-content text-opacity-40">Data Liaison</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-0">
|
<div className="flex-0">
|
||||||
<ThemeChanger />
|
<button className="btn btn-sm">Follow</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="card shadow-lg compact side bg-base-100">
|
||||||
<div className="card shadow-lg compact bg-base-100">
|
<div className="flex-row items-center space-x-4 card-body">
|
||||||
<figure>
|
<div className="flex-1">
|
||||||
<img src="https://picsum.photos/id/1005/600/400" />
|
<h2 className="card-title text-primary">4,600</h2>
|
||||||
</figure>
|
<p className="text-base-content text-opacity-40">Page views</p>
|
||||||
<div className="flex-row items-center space-x-4 card-body">
|
</div>
|
||||||
<div>
|
<div className="flex space-x-2 flex-0">
|
||||||
<h2 className="card-title">Karolann Collins</h2>
|
<button className="btn btn-sm btn-square">
|
||||||
<p className="text-base-content text-opacity-40">Direct Interactions Liaison</p>
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 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>
|
||||||
|
</button>
|
||||||
|
<button className="btn btn-sm btn-square">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card shadow-lg compact side bg-base-100">
|
||||||
|
<div className="flex-row items-center space-x-4 card-body">
|
||||||
|
<label className="flex-0">
|
||||||
|
<input type="checkbox" defaultChecked="checked" className="toggle toggle-primary" />
|
||||||
|
</label>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h2 className="card-title">
|
||||||
|
Enable Notifications
|
||||||
|
</h2>
|
||||||
|
<p className="text-base-content text-opacity-40">
|
||||||
|
To get latest updates
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card col-span-1 row-span-3 shadow-lg xl:col-span-2 bg-base-100">
|
||||||
|
<div className="card-body">
|
||||||
|
<h2 className="my-4 text-4xl font-bold card-title">
|
||||||
|
Top 10 UI Components
|
||||||
|
</h2>
|
||||||
|
<div className="mb-4 space-x-2 card-actions">
|
||||||
|
<div className="badge badge-ghost">
|
||||||
|
Colors
|
||||||
|
</div>
|
||||||
|
<div className="badge badge-ghost">
|
||||||
|
UI Design
|
||||||
|
</div>
|
||||||
|
<div className="badge badge-ghost">
|
||||||
|
Creativity
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p>
|
||||||
|
Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.
|
||||||
|
</p>
|
||||||
|
<div className="justify-end space-x-2 card-actions">
|
||||||
|
<button className="btn btn-primary">
|
||||||
|
Login
|
||||||
|
</button>
|
||||||
|
<button className="btn">
|
||||||
|
Register
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card shadow-lg compact side bg-base-100">
|
||||||
|
<div className="flex-row items-center space-x-4 card-body">
|
||||||
|
<div className="flex-1">
|
||||||
|
<h2 className="flex card-title">
|
||||||
|
<button className="btn btn-ghost btn-sm btn-circle loading" />
|
||||||
|
Downloading...
|
||||||
|
</h2>
|
||||||
|
<progress value={70} max={100} className="progress progress-secondary" />
|
||||||
|
</div>
|
||||||
|
<div className="flex-0">
|
||||||
|
<button className="btn btn-circle">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="card shadow-lg compact side bg-base-100">
|
||||||
|
<div className="flex-row items-center space-x-4 card-body">
|
||||||
|
<label className="cursor-pointer label">
|
||||||
|
<input type="checkbox" defaultChecked="checked" className="checkbox checkbox-accent" />
|
||||||
|
<span className="mx-4 label-text">
|
||||||
|
Enable Autosave
|
||||||
|
</span>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ul className="menu row-span-3 p-4 shadow-lg bg-base-100 text-base-content text-opacity-40 rounded-box">
|
||||||
|
<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>
|
||||||
|
</ul>
|
||||||
|
<div className="alert col-span-1 xl:col-span-2 bg-base-100">
|
||||||
|
<div className="flex-1">
|
||||||
|
<label className="mx-3">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adip!
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex-none">
|
||||||
|
<button className="btn btn-sm btn-ghost mr-2">
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button className="btn btn-sm btn-primary">
|
||||||
|
Apply
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="alert col-span-1 xl:col-span-2 alert-info">
|
||||||
|
<div className="flex-1">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="w-6 h-6 mx-2 stroke-current">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
<label>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adip!
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="alert col-span-1 xl:col-span-2 alert-success">
|
||||||
|
<div className="flex-1">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="w-6 h-6 mx-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>
|
||||||
|
<label>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adip!
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
</div>
|
}
|
||||||
<div className="card shadow-lg compact side bg-base-100">
|
|
||||||
<div className="flex-row items-center space-x-4 card-body">
|
|
||||||
<div>
|
|
||||||
<div className="avatar">
|
|
||||||
<div className="rounded-full w-14 h-14 shadow">
|
|
||||||
<img src="https://i.pravatar.cc/500?img=32" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 className="card-title">Janis Johnson</h2>
|
|
||||||
<p className="text-base-content text-opacity-40">Accounts Agent</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card shadow-lg compact side bg-base-100">
|
|
||||||
<div className="flex-row items-center space-x-4 card-body">
|
|
||||||
<div className="flex-1">
|
|
||||||
<h2 className="card-title">Meredith Mayer</h2>
|
|
||||||
<p className="text-base-content text-opacity-40">Data Liaison</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex-0">
|
|
||||||
<button className="btn btn-sm">Follow</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card shadow-lg compact side bg-base-100">
|
|
||||||
<div className="flex-row items-center space-x-4 card-body">
|
|
||||||
<div className="flex-1">
|
|
||||||
<h2 className="card-title text-primary">4,600</h2>
|
|
||||||
<p className="text-base-content text-opacity-40">Page views</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex space-x-2 flex-0">
|
|
||||||
<button className="btn btn-sm btn-square">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 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>
|
|
||||||
</button>
|
|
||||||
<button className="btn btn-sm btn-square">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card shadow-lg compact side bg-base-100">
|
|
||||||
<div className="flex-row items-center space-x-4 card-body">
|
|
||||||
<label className="flex-0">
|
|
||||||
<input type="checkbox" defaultChecked="checked" className="toggle toggle-primary" />
|
|
||||||
</label>
|
|
||||||
<div className="flex-1">
|
|
||||||
<h2 className="card-title">
|
|
||||||
Enable Notifications
|
|
||||||
</h2>
|
|
||||||
<p className="text-base-content text-opacity-40">
|
|
||||||
To get latest updates
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card col-span-1 row-span-3 shadow-lg xl:col-span-2 bg-base-100">
|
|
||||||
<div className="card-body">
|
|
||||||
<h2 className="my-4 text-4xl font-bold card-title">
|
|
||||||
Top 10 UI Components
|
|
||||||
</h2>
|
|
||||||
<div className="mb-4 space-x-2 card-actions">
|
|
||||||
<div className="badge badge-ghost">
|
|
||||||
Colors
|
|
||||||
</div>
|
|
||||||
<div className="badge badge-ghost">
|
|
||||||
UI Design
|
|
||||||
</div>
|
|
||||||
<div className="badge badge-ghost">
|
|
||||||
Creativity
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<p>
|
|
||||||
Rerum reiciendis beatae tenetur excepturi aut pariatur est eos. Sit sit necessitatibus veritatis sed molestiae voluptates incidunt iure sapiente.
|
|
||||||
</p>
|
|
||||||
<div className="justify-end space-x-2 card-actions">
|
|
||||||
<button className="btn btn-primary">
|
|
||||||
Login
|
|
||||||
</button>
|
|
||||||
<button className="btn">
|
|
||||||
Register
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card shadow-lg compact side bg-base-100">
|
|
||||||
<div className="flex-row items-center space-x-4 card-body">
|
|
||||||
<div className="flex-1">
|
|
||||||
<h2 className="flex card-title">
|
|
||||||
<button className="btn btn-ghost btn-sm btn-circle loading" />
|
|
||||||
Downloading...
|
|
||||||
</h2>
|
|
||||||
<progress value={70} max={100} className="progress progress-secondary" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-0">
|
|
||||||
<button className="btn btn-circle">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="inline-block w-6 h-6 stroke-current">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="card shadow-lg compact side bg-base-100">
|
|
||||||
<div className="flex-row items-center space-x-4 card-body">
|
|
||||||
<label className="cursor-pointer label">
|
|
||||||
<input type="checkbox" defaultChecked="checked" className="checkbox checkbox-accent" />
|
|
||||||
<span className="mx-4 label-text">
|
|
||||||
Enable Autosave
|
|
||||||
</span>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<ul className="menu row-span-3 p-4 shadow-lg bg-base-100 text-base-content text-opacity-40 rounded-box">
|
|
||||||
<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>
|
|
||||||
</ul>
|
|
||||||
<div className="alert col-span-1 xl:col-span-2 bg-base-100">
|
|
||||||
<div className="flex-1">
|
|
||||||
<label className="mx-3">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adip!
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div className="flex-none">
|
|
||||||
<button className="btn btn-sm btn-ghost mr-2">
|
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button className="btn btn-sm btn-primary">
|
|
||||||
Apply
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="alert col-span-1 xl:col-span-2 alert-info">
|
|
||||||
<div className="flex-1">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="w-6 h-6 mx-2 stroke-current">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
||||||
</svg>
|
|
||||||
<label>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adip!
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="alert col-span-1 xl:col-span-2 alert-success">
|
|
||||||
<div className="flex-1">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" className="w-6 h-6 mx-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>
|
|
||||||
<label>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adip!
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Fragment>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default memo(App);
|
||||||
|
|||||||
55
src/components/AvatarCard.js
Normal file
55
src/components/AvatarCard.js
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import { Image } from "antd";
|
||||||
|
import { useSelector } from "react-redux";
|
||||||
|
import { fallbackImage } from "../helpers/utils";
|
||||||
|
|
||||||
|
const imageHeight = 300;
|
||||||
|
|
||||||
|
const AvatarCard = () => {
|
||||||
|
const profile = useSelector(state => state.profile);
|
||||||
|
const loading = useSelector(state => state.loading);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="card shadow-lg compact bg-base-100">
|
||||||
|
<figure>
|
||||||
|
{
|
||||||
|
loading ? (
|
||||||
|
<div className="bg-base-300 w-full animate-pulse" style={{height: imageHeight}}/>
|
||||||
|
) : (
|
||||||
|
<Image
|
||||||
|
className="object-cover"
|
||||||
|
src={profile.avatar ? profile.avatar : fallbackImage}
|
||||||
|
fallback={fallbackImage}
|
||||||
|
alt={profile.name}
|
||||||
|
preview={false}
|
||||||
|
width={'100%'}
|
||||||
|
height={imageHeight}
|
||||||
|
placeholder={
|
||||||
|
<div className="bg-base-300 w-full animate-pulse" style={{height: imageHeight}}/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</figure>
|
||||||
|
<div className="flex-row items-center space-x-4 card-body">
|
||||||
|
<div>
|
||||||
|
<h2 className="card-title">
|
||||||
|
{
|
||||||
|
loading ? (
|
||||||
|
<div className="bg-base-300 w-3/6 h-8 animate-pulse rounded-full" />
|
||||||
|
) : profile.name
|
||||||
|
}
|
||||||
|
</h2>
|
||||||
|
<p className="text-base-content text-opacity-40 text-justify">
|
||||||
|
{
|
||||||
|
loading ? (
|
||||||
|
<div className="bg-base-300 w-48 h-4 animate-pulse rounded-full" />
|
||||||
|
) : profile.bio
|
||||||
|
}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AvatarCard;
|
||||||
22
src/components/ErrorPage.js
Normal file
22
src/components/ErrorPage.js
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import { Result } from 'antd';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
const ErrorPage = (props) => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Result
|
||||||
|
status={props.status}
|
||||||
|
title={props.title}
|
||||||
|
subTitle={props.subTitle}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
ErrorPage.propTypes = {
|
||||||
|
status: PropTypes.string.isRequired,
|
||||||
|
title: PropTypes.string.isRequired,
|
||||||
|
subTitle: PropTypes.string.isRequired
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ErrorPage;
|
||||||
@ -9,21 +9,36 @@ const { Option } = Select;
|
|||||||
const ThemeChanger = () => {
|
const ThemeChanger = () => {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const theme = useSelector(state => state.theme);
|
const theme = useSelector(state => state.theme);
|
||||||
|
const loading = useSelector(state => state.loading);
|
||||||
|
|
||||||
const handleChange = (value) => {
|
const handleChange = (value) => {
|
||||||
dispatch(setTheme(value));
|
dispatch(setTheme(value));
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange} bordered={false} value={theme}>
|
<div className="card shadow-lg compact side bg-base-100">
|
||||||
{
|
<div className="flex-row items-center space-x-4 card-body">
|
||||||
config.themes.map((item, index) => (
|
<div className="flex-1">
|
||||||
<Option key={index} value={item}>
|
<h2 className="card-title">{loading ? <div className="bg-base-300 w-20 h-8 animate-pulse rounded-full" /> : 'Theme'}</h2>
|
||||||
<span className="capitalize text-base-content text-opacity-60">{item === config.defaultTheme ? 'Default' : item}</span>
|
<p className="text-base-content text-opacity-40">{loading ? <div className="bg-base-300 w-24 h-4 animate-pulse rounded-full" /> : 'Change Theme'}</p>
|
||||||
</Option>
|
</div>
|
||||||
))
|
<div className="flex-0">
|
||||||
}
|
{
|
||||||
</Select>
|
loading ? <div className="bg-base-300 w-28 h-8 animate-pulse rounded-full" /> : (
|
||||||
|
<Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange} bordered={false} value={theme}>
|
||||||
|
{
|
||||||
|
config.themeConfig.themes.map((item, index) => (
|
||||||
|
<Option key={index} value={item}>
|
||||||
|
<span className="capitalize text-base-content text-opacity-60">{item === config.themeConfig.default ? 'Default' : item}</span>
|
||||||
|
</Option>
|
||||||
|
))
|
||||||
|
}
|
||||||
|
</Select>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,26 +1,39 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
defaultTheme: 'light',
|
githubUsername: 'arifszn',
|
||||||
themes: [
|
themeConfig: {
|
||||||
'light',
|
default: 'light',
|
||||||
'dark',
|
|
||||||
'cupcake',
|
// Hides the switch in the navbar
|
||||||
'bumblebee',
|
// Useful if you want to support a single color mode
|
||||||
'emerald',
|
disableSwitch: false,
|
||||||
'corporate',
|
|
||||||
'synthwave',
|
// Should we use the prefers-color-scheme media-query,
|
||||||
'retro',
|
// using user system preferences, instead of the hardcoded defaultMode
|
||||||
'cyberpunk',
|
respectPrefersColorScheme: true,
|
||||||
'valentine',
|
|
||||||
'halloween',
|
// Available themes
|
||||||
'garden',
|
themes: [
|
||||||
'forest',
|
'light',
|
||||||
'aqua',
|
'dark',
|
||||||
'lofi',
|
'cupcake',
|
||||||
'pastel',
|
'bumblebee',
|
||||||
'fantasy',
|
'emerald',
|
||||||
'wireframe',
|
'corporate',
|
||||||
'black',
|
'synthwave',
|
||||||
'luxury',
|
'retro',
|
||||||
'dracula'
|
'cyberpunk',
|
||||||
]
|
'valentine',
|
||||||
|
'halloween',
|
||||||
|
'garden',
|
||||||
|
'forest',
|
||||||
|
'aqua',
|
||||||
|
'lofi',
|
||||||
|
'pastel',
|
||||||
|
'fantasy',
|
||||||
|
'wireframe',
|
||||||
|
'black',
|
||||||
|
'luxury',
|
||||||
|
'dracula'
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -1,10 +1,22 @@
|
|||||||
import config from "../config";
|
import config from "../config";
|
||||||
|
|
||||||
export const getThemeValue = () => {
|
export const getThemeValue = () => {
|
||||||
|
if (config.themeConfig.disableSwitch) {
|
||||||
|
return config.themeConfig.default;
|
||||||
|
}
|
||||||
|
|
||||||
if (localStorage.hasOwnProperty('theme')) {
|
if (localStorage.hasOwnProperty('theme')) {
|
||||||
let theme = localStorage.getItem('theme');
|
let theme = localStorage.getItem('theme');
|
||||||
return theme;
|
return theme;
|
||||||
}
|
}
|
||||||
|
|
||||||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : config.defaultTheme;
|
if (config.themeConfig.respectPrefersColorScheme) {
|
||||||
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : config.themeConfig.default;
|
||||||
|
}
|
||||||
|
|
||||||
|
return config.themeConfig.default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const fallbackImage = (
|
||||||
|
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg=="
|
||||||
|
)
|
||||||
19
src/store/slices/loadingSlice.js
Normal file
19
src/store/slices/loadingSlice.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { createSlice } from '@reduxjs/toolkit';
|
||||||
|
|
||||||
|
const initialState = true;
|
||||||
|
|
||||||
|
export const loadingSlice = createSlice({
|
||||||
|
name: 'loading',
|
||||||
|
initialState: initialState,
|
||||||
|
reducers: {
|
||||||
|
setLoading: (state, action) => {
|
||||||
|
state = action.payload;
|
||||||
|
|
||||||
|
return state;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export const { setLoading } = loadingSlice.actions;
|
||||||
|
|
||||||
|
export default loadingSlice.reducer;
|
||||||
@ -1,10 +1,12 @@
|
|||||||
import { combineReducers, configureStore } from '@reduxjs/toolkit';
|
import { combineReducers, configureStore } from '@reduxjs/toolkit';
|
||||||
|
import loadingSlice from './slices/loadingSlice';
|
||||||
import profileSlice from './slices/profileSlice';
|
import profileSlice from './slices/profileSlice';
|
||||||
import themeSlice from './slices/themeSlice';
|
import themeSlice from './slices/themeSlice';
|
||||||
|
|
||||||
const rootReducer = combineReducers({
|
const rootReducer = combineReducers({
|
||||||
profile: profileSlice,
|
profile: profileSlice,
|
||||||
theme: themeSlice,
|
theme: themeSlice,
|
||||||
|
loading: loadingSlice,
|
||||||
})
|
})
|
||||||
|
|
||||||
export const store = configureStore({
|
export const store = configureStore({
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user