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

Change theme

Browse Source
This commit is contained in:
MD. Ariful Alam
2021-08-21 15:27:39 +06:00
parent 0229b5e453
commit e6935a32b9
13 changed files with 2563 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/Demo.js
View File

@@ -1,59 +1,34 @@
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="navbar col-span-1 shadow-lg xl:col-span-3 bg-neutral-focus text-neutral-content rounded-box">
<div className="flex-none">
<button className="btn btn-square btn-ghost">
<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="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<div className="flex-none px-2 mx-2">
<span className="text-lg font-bold">
DaisyUI
</span>
</div>
<div className="flex justify-center flex-1 px-2 mx-2">
<div className="items-stretch hidden lg:flex">
<a className="btn btn-ghost btn-sm rounded-btn">
Home
</a>
<a className="btn btn-ghost btn-sm rounded-btn">
Portfolio
</a>
<a className="btn btn-ghost btn-sm rounded-btn">
About
</a>
<a className="btn btn-ghost btn-sm rounded-btn">
Contact
</a>
<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>
<div className="flex-none">
<button className="btn btn-square btn-ghost">
<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 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
</div>
<div className="flex-none">
<button className="btn btn-square btn-ghost">
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</button>
</div>
</div> */}
<div className="card row-span-3 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 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>

30
src/components/ThemeChanger.js Normal file
View File

@@ -0,0 +1,30 @@
import { Fragment } from 'react';
import { Select } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import { setTheme } from '../store/slices/themeSlice';
import config from '../config';
const { Option } = Select;
const ThemeChanger = () => {
const dispatch = useDispatch();
const theme = useSelector(state => state.theme);
const handleChange = (value) => {
dispatch(setTheme(value));
}
return (
<Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange} bordered={false} value={theme}>
{
config.themes.map((item, index) => (
<Option key={index} value={item}>
<span className="capitalize text-base-content text-opacity-60">{item === config.defaultTheme ? 'Default' : item}</span>
</Option>
))
}
</Select>
)
}
export default ThemeChanger;