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

Display avatar

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/AvatarCard.js Normal file
View 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
View 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;

33
src/components/ThemeChanger.js
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>
)
}