Display avatar

This commit is contained in:
MD. Ariful Alam
2021-08-21 21:57:26 +06:00
parent e6935a32b9
commit ec5344f0c9
9 changed files with 454 additions and 12977 deletions

View File

@@ -9,21 +9,36 @@ const { Option } = Select;
const ThemeChanger = () => {
const dispatch = useDispatch();
const theme = useSelector(state => state.theme);
const loading = useSelector(state => state.loading);
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>
<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">{loading ? <div className="bg-base-300 w-20 h-8 animate-pulse rounded-full" /> : 'Theme'}</h2>
<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>
</div>
<div className="flex-0">
{
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>
)
}