Refactor codes
This commit is contained in:
MD. Ariful Alam
parent
3b48d147d1
commit
9bf4c1fd38
94
src/App.js
94
src/App.js
@ -1,5 +1,5 @@
|
||||
import axios from "axios";
|
||||
import { Fragment, memo, useEffect, useState } from "react";
|
||||
import { Fragment, memo, useCallback, useEffect, useState } from "react";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import AvatarCard from "./components/AvatarCard";
|
||||
import ErrorPage from "./components/ErrorPage";
|
||||
@ -29,56 +29,24 @@ function App() {
|
||||
}
|
||||
}, [theme])
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [])
|
||||
|
||||
const loadData = () => {
|
||||
const loadData = useCallback(() => {
|
||||
axios.get(`https://api.github.com/users/${config.githubUsername}`)
|
||||
.then(response => {
|
||||
let data = response.data;
|
||||
.then(response => {
|
||||
let data = response.data;
|
||||
|
||||
let profileData = {
|
||||
avatar: data.avatar_url,
|
||||
name: data.name,
|
||||
bio: data.bio,
|
||||
location: data.location,
|
||||
company: data.company,
|
||||
twitter: data.twitter_username,
|
||||
}
|
||||
let profileData = {
|
||||
avatar: data.avatar_url,
|
||||
name: data.name,
|
||||
bio: data.bio,
|
||||
location: data.location,
|
||||
company: data.company,
|
||||
twitter: data.twitter_username,
|
||||
}
|
||||
|
||||
dispatch(setProfile(profileData));
|
||||
})
|
||||
.then(() => {
|
||||
loadRepo();
|
||||
})
|
||||
.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 (error2) {
|
||||
setError(500);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
dispatch(setLoading(false));
|
||||
});
|
||||
}
|
||||
|
||||
const loadRepo = () => {
|
||||
axios.get(`https://api.github.com/search/repositories?q=user:${config.githubUsername}+&s=stars&type=Repositories`)
|
||||
dispatch(setProfile(profileData));
|
||||
})
|
||||
.then(() => {
|
||||
axios.get(`https://api.github.com/search/repositories?q=user:${config.githubUsername}+&s=stars&type=Repositories`)
|
||||
.then(response => {
|
||||
let data = response.data;
|
||||
|
||||
@ -98,7 +66,35 @@ function App() {
|
||||
console.error('Error:', error2);
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
.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 (error2) {
|
||||
setError(500);
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
dispatch(setLoading(false));
|
||||
});
|
||||
}, [dispatch])
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [loadData])
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
|
||||
@ -11,8 +11,8 @@ const AvatarCard = () => {
|
||||
return (
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<div className="grid place-items-center py-8">
|
||||
<div class="avatar">
|
||||
<div class={`mb-8 rounded-full w-32 h-32${!loading ? ' ring ring-primary ring-offset-base-100 ring-offset-2' : ''}`}>
|
||||
<div className="avatar">
|
||||
<div className={`mb-8 rounded-full w-32 h-32${!loading ? ' ring ring-primary ring-offset-base-100 ring-offset-2' : ''}`}>
|
||||
{
|
||||
loading ? (
|
||||
skeleton({
|
||||
@ -39,7 +39,7 @@ const AvatarCard = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center mx-8">
|
||||
<span class="opacity-60">
|
||||
<span className="opacity-60">
|
||||
<h5 className="card-title font-extrabold">
|
||||
{
|
||||
loading ? (
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { getDevtoArticle, getMediumArticle } from "article-api";
|
||||
import moment from "moment";
|
||||
import { Fragment, memo, useEffect, useState } from "react";
|
||||
import { memo, useEffect, useState } from "react";
|
||||
import { CgHashtag } from 'react-icons/cg';
|
||||
import config from "../config";
|
||||
import { skeleton } from "../helpers/utils";
|
||||
@ -35,7 +35,6 @@ const Blog = () => {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="col-span-1 lg:col-span-2">
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="col-span-2">
|
||||
@ -65,25 +64,25 @@ const Blog = () => {
|
||||
{
|
||||
articles && articles.slice(0, 5).map((article, index) => (
|
||||
<a href={article.link} target="_blank" rel="noreferrer" className="card shadow-lg compact bg-base-100" key={index}>
|
||||
<div class="p-8 h-full w-full">
|
||||
<a class="flex items-center flex-col md:flex-row" href={article.link} target="_blank">
|
||||
<div class="avatar mb-5 md:mb-0">
|
||||
<div class="w-24 h-24 mask mask-squircle">
|
||||
<img src={article.thumbnail} />
|
||||
<div className="p-8 h-full w-full">
|
||||
<div className="flex items-center flex-col md:flex-row">
|
||||
<div className="avatar mb-5 md:mb-0">
|
||||
<div className="w-24 h-24 mask mask-squircle">
|
||||
<img src={article.thumbnail} alt={'thumbnail'}/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div class="flex items-start px-4">
|
||||
<div class="text-center md:text-left">
|
||||
<h2 class="text-lg font-semibold text-gray-900 -mt-1">{article.title}</h2>
|
||||
<p class="text-gray-700">{moment(article.publishedAt).fromNow()}</p>
|
||||
<p class="mt-3 text-gray-700 text-sm">
|
||||
<div className="flex items-start px-4">
|
||||
<div className="text-center md:text-left">
|
||||
<h2 className="text-lg font-semibold text-gray-900 -mt-1">{article.title}</h2>
|
||||
<p className="text-gray-700">{moment(article.publishedAt).fromNow()}</p>
|
||||
<p className="mt-3 text-gray-700 text-sm">
|
||||
{article.description}
|
||||
</p>
|
||||
<div class="mt-4 flex items-center flex-wrap justify-center md:justify-start">
|
||||
<div className="mt-4 flex items-center flex-wrap justify-center md:justify-start">
|
||||
{
|
||||
article.categories.map((category, index2) => (
|
||||
<div class="flex text-gray-700 text-sm mr-3 items-center">
|
||||
<div key={index2} className="flex text-gray-700 text-sm mr-3 items-center">
|
||||
<CgHashtag/>
|
||||
<span>{category}</span>
|
||||
</div>
|
||||
@ -93,7 +92,7 @@ const Blog = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@ -103,60 +102,6 @@ const Blog = () => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <div className="card shadow-lg compact bg-base-100 col-span-1 lg:col-span-2">
|
||||
<div className="flex flex-col p-8 h-full w-full">
|
||||
<div className="mb-2">
|
||||
<div className="opacity-60">
|
||||
<span>
|
||||
<h5 className="card-title">
|
||||
Recent Posts
|
||||
</h5>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{
|
||||
articles && articles.slice(0, 5).map((article, index) => (
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<a class="flex items-center flex-col md:flex-row" href={article.link} target="_blank">
|
||||
<div class="avatar">
|
||||
<div class="w-24 h-24 mask mask-squircle">
|
||||
<img src={article.thumbnail} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full">
|
||||
<div class="flex items-start px-4">
|
||||
<div class="">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-lg font-semibold text-gray-900 -mt-1">{article.title}</h2>
|
||||
</div>
|
||||
<p class="text-gray-700">{moment(article.publishedAt).fromNow()}</p>
|
||||
<p class="mt-3 text-gray-700 text-sm">
|
||||
{article.description}
|
||||
</p>
|
||||
<div class="mt-4 flex items-center">
|
||||
{
|
||||
article.categories.map((category, index2) => (
|
||||
<div class="flex text-gray-700 text-sm mr-3">
|
||||
# {category}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@ -1,225 +0,0 @@
|
||||
import ThemeChanger from "./ThemeChanger";
|
||||
|
||||
const Demo = () => {
|
||||
return (
|
||||
<div className="p-4 lg:p-10 bg-base-200">
|
||||
<div className="grid grid-cols-1 gap-6 xl:grid-cols-3 lg:bg-base-200 rounded-box">
|
||||
<div className="row-span-3">
|
||||
<div class="grid grid-cols-1 gap-6">
|
||||
<div className="card shadow-lg compact side bg-base-100">
|
||||
<div>
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<div className="flex-1">
|
||||
<h2 className="card-title">Theme</h2>
|
||||
<p className="text-base-content text-opacity-40">Change Theme</p>
|
||||
</div>
|
||||
<div className="flex-0">
|
||||
<ThemeChanger/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card shadow-lg compact bg-base-100">
|
||||
<figure>
|
||||
<img src="https://picsum.photos/id/1005/600/400" />
|
||||
</figure>
|
||||
<div className="flex-row items-center space-x-4 card-body">
|
||||
<div>
|
||||
<h2 className="card-title">Karolann Collins</h2>
|
||||
<p className="text-base-content text-opacity-40">Direct Interactions Liaison</p>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
export default Demo;
|
||||
@ -1,4 +1,3 @@
|
||||
import { AiFillGithub } from "react-icons/ai";
|
||||
import { useSelector } from "react-redux";
|
||||
import config from "../config";
|
||||
import { skeleton } from "../helpers/utils";
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { AiFillGithub } from "react-icons/ai";
|
||||
import { useSelector } from "react-redux";
|
||||
import config from "../config";
|
||||
import { skeleton } from "../helpers/utils";
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useState, Fragment, useEffect } from 'react';
|
||||
|
||||
const LazyImage = ({ placeholder, src, ...rest }) => {
|
||||
const LazyImage = ({ placeholder, src, alt, ...rest }) => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
@ -10,7 +10,7 @@ const LazyImage = ({ placeholder, src, ...rest }) => {
|
||||
imageToLoad.onload = () => {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [])
|
||||
}, [src])
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
@ -18,6 +18,7 @@ const LazyImage = ({ placeholder, src, ...rest }) => {
|
||||
loading ? placeholder : (
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
{...rest}
|
||||
/>
|
||||
)
|
||||
|
||||
@ -23,10 +23,10 @@ const Project = () => {
|
||||
</h5>
|
||||
</span>
|
||||
</div>
|
||||
<p className="mb-5 mt-1 text-base-content text-opacity-40 text-sm">
|
||||
<div className="mb-5 mt-1 text-base-content text-opacity-40 text-sm">
|
||||
{skeleton({width: 'w-full', height: 'h-4', className: 'mb-2'})}
|
||||
{skeleton({width: 'w-full', height: 'h-4'})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-between text-sm text-base-content text-opacity-40">
|
||||
<div className="flex flex-grow">
|
||||
|
||||
@ -2,7 +2,6 @@ import { useDispatch, useSelector } from 'react-redux';
|
||||
import { setTheme } from '../store/slices/themeSlice';
|
||||
import config from '../config';
|
||||
import { skeleton } from '../helpers/utils';
|
||||
import { IoColorPaletteOutline } from 'react-icons/io5';
|
||||
import { memo } from 'react';
|
||||
|
||||
const ThemeChanger = () => {
|
||||
@ -31,7 +30,7 @@ const ThemeChanger = () => {
|
||||
loading ? skeleton({ width: 'w-14 md:w-28', height: 'h-10' }) : (
|
||||
<div title="Change Theme" className="dropdown dropdown-end">
|
||||
<div tabIndex={0} className="btn btn-ghost m-1 normal-case opacity-50">
|
||||
<svg class="inline-block w-5 h-5 stroke-current md:mr-2" stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" stroke-miterlimit="10" stroke-width="32" d="M430.11 347.9c-6.6-6.1-16.3-7.6-24.6-9-11.5-1.9-15.9-4-22.6-10-14.3-12.7-14.3-31.1 0-43.8l30.3-26.9c46.4-41 46.4-108.2 0-149.2-34.2-30.1-80.1-45-127.8-45-55.7 0-113.9 20.3-158.8 60.1-83.5 73.8-83.5 194.7 0 268.5 41.5 36.7 97.5 55 152.9 55.4h1.7c55.4 0 110-17.9 148.8-52.4 14.4-12.7 11.99-36.6.1-47.7z"></path><circle cx="144" cy="208" r="32"></circle><circle cx="152" cy="311" r="32"></circle><circle cx="224" cy="144" r="32"></circle><circle cx="256" cy="367" r="48"></circle><circle cx="328" cy="144" r="32"></circle></svg>
|
||||
<svg className="inline-block w-5 h-5 stroke-current md:mr-2" stroke="currentColor" fill="currentColor" strokeWidth="0" viewBox="0 0 512 512" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill="none" strokeMiterlimit="10" strokeWidth="32" d="M430.11 347.9c-6.6-6.1-16.3-7.6-24.6-9-11.5-1.9-15.9-4-22.6-10-14.3-12.7-14.3-31.1 0-43.8l30.3-26.9c46.4-41 46.4-108.2 0-149.2-34.2-30.1-80.1-45-127.8-45-55.7 0-113.9 20.3-158.8 60.1-83.5 73.8-83.5 194.7 0 268.5 41.5 36.7 97.5 55 152.9 55.4h1.7c55.4 0 110-17.9 148.8-52.4 14.4-12.7 11.99-36.6.1-47.7z"></path><circle cx="144" cy="208" r="32"></circle><circle cx="152" cy="311" r="32"></circle><circle cx="224" cy="144" r="32"></circle><circle cx="256" cy="367" r="48"></circle><circle cx="328" cy="144" r="32"></circle></svg>
|
||||
<span className="hidden md:inline">
|
||||
Change Theme
|
||||
</span>
|
||||
@ -45,12 +44,12 @@ const ThemeChanger = () => {
|
||||
config.themeConfig.themes.map((item, index) => (
|
||||
<li key={index}>
|
||||
<a
|
||||
href="#"
|
||||
href="/#"
|
||||
onClick={(e) => changeTheme(e, item)}
|
||||
className={`${theme === item ? 'active' : ''}`}
|
||||
>
|
||||
<span className="opacity-60 capitalize flex items-center">
|
||||
<svg className="inline-block w-4 h-4 stroke-current mr-2" stroke="currentColor" fill="none" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.20348 2.00378C9.46407 2.00378 10.5067 3.10742 10.6786 4.54241L19.1622 13.0259L11.384 20.8041C10.2124 21.9757 8.31291 21.9757 7.14134 20.8041L2.8987 16.5615C1.72713 15.3899 1.72713 13.4904 2.8987 12.3188L5.70348 9.51404V4.96099C5.70348 3.32777 6.82277 2.00378 8.20348 2.00378ZM8.70348 4.96099V6.51404L7.70348 7.51404V4.96099C7.70348 4.63435 7.92734 4.36955 8.20348 4.36955C8.47963 4.36955 8.70348 4.63435 8.70348 4.96099ZM8.70348 10.8754V9.34247L4.31291 13.733C3.92239 14.1236 3.92239 14.7567 4.31291 15.1473L8.55555 19.3899C8.94608 19.7804 9.57924 19.7804 9.96977 19.3899L16.3337 13.0259L10.7035 7.39569V10.8754C10.7035 10.9184 10.7027 10.9612 10.7012 11.0038H8.69168C8.69941 10.9625 8.70348 10.9195 8.70348 10.8754Z" fill="currentColor"></path><path d="M16.8586 16.8749C15.687 18.0465 15.687 19.946 16.8586 21.1175C18.0302 22.2891 19.9297 22.2891 21.1013 21.1175C22.2728 19.946 22.2728 18.0465 21.1013 16.8749L18.9799 14.7536L16.8586 16.8749Z" fill="currentColor"></path></svg>
|
||||
<svg className="inline-block w-4 h-4 stroke-current mr-2" stroke="currentColor" fill="none" strokeWidth="0" viewBox="0 0 24 24" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path fillRule="evenodd" clipRule="evenodd" d="M8.20348 2.00378C9.46407 2.00378 10.5067 3.10742 10.6786 4.54241L19.1622 13.0259L11.384 20.8041C10.2124 21.9757 8.31291 21.9757 7.14134 20.8041L2.8987 16.5615C1.72713 15.3899 1.72713 13.4904 2.8987 12.3188L5.70348 9.51404V4.96099C5.70348 3.32777 6.82277 2.00378 8.20348 2.00378ZM8.70348 4.96099V6.51404L7.70348 7.51404V4.96099C7.70348 4.63435 7.92734 4.36955 8.20348 4.36955C8.47963 4.36955 8.70348 4.63435 8.70348 4.96099ZM8.70348 10.8754V9.34247L4.31291 13.733C3.92239 14.1236 3.92239 14.7567 4.31291 15.1473L8.55555 19.3899C8.94608 19.7804 9.57924 19.7804 9.96977 19.3899L16.3337 13.0259L10.7035 7.39569V10.8754C10.7035 10.9184 10.7027 10.9612 10.7012 11.0038H8.69168C8.69941 10.9625 8.70348 10.9195 8.70348 10.8754Z" fill="currentColor"></path><path d="M16.8586 16.8749C15.687 18.0465 15.687 19.946 16.8586 21.1175C18.0302 22.2891 19.9297 22.2891 21.1013 21.1175C22.2728 19.946 22.2728 18.0465 21.1013 16.8749L18.9799 14.7536L16.8586 16.8749Z" fill="currentColor"></path></svg>
|
||||
{item === config.themeConfig.default ? 'Default' : item}
|
||||
</span>
|
||||
</a>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user