-
-
Notifications
You must be signed in to change notification settings - Fork 421
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #18 from mouracamila/avatar-component
Avatar component
- Loading branch information
Showing
6 changed files
with
219 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
import classNames from 'classnames'; | ||
import React, { PropsWithChildren } from 'react'; | ||
|
||
export type AvatarProps = PropsWithChildren<{ | ||
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'; | ||
rounded?: boolean; | ||
bordered?: boolean; | ||
img?: string; | ||
status?: 'offline' | 'online' | 'away' | 'busy'; | ||
statusPosition?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left'; | ||
}>; | ||
|
||
const sizeClasses: Record<AvatarProps['size'] & string, string> = { | ||
xs: 'w-6 h-6', | ||
sm: 'w-8 h-8', | ||
md: 'w-10 h-10', | ||
lg: 'w-20 h-20', | ||
xl: 'w-36 h-36', | ||
}; | ||
|
||
const statusClasses: Record<AvatarProps['status'] & string, string> = { | ||
offline: 'bg-gray-400', | ||
online: 'bg-green-400', | ||
away: 'bg-yellow-400', | ||
busy: 'bg-red-400', | ||
}; | ||
|
||
const statusPositionClasses: Record<AvatarProps['statusPosition'] & string, string> = { | ||
'top-left': '-top-1 -right-1', | ||
'top-right': '-top-1 -left-1', | ||
'bottom-left': '-bottom-1 -right-1', | ||
'bottom-right': '-bottom-1 -left-1', | ||
}; | ||
|
||
export const Avatar: React.FC<AvatarProps> = ({ | ||
img, | ||
status, | ||
children, | ||
statusPosition = 'top-right', | ||
size = 'md', | ||
rounded = false, | ||
bordered = false, | ||
}) => { | ||
return ( | ||
<div className="flex items-center space-x-4"> | ||
<div className="relative"> | ||
{img ? ( | ||
<img | ||
className={classNames(sizeClasses[size], { | ||
rounded: !rounded, | ||
'rounded-full': rounded, | ||
'p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered, | ||
})} | ||
src={img} | ||
alt="Rounded avatar" | ||
/> | ||
) : ( | ||
<div | ||
className={classNames(`relative overflow-hidden bg-gray-100 dark:bg-gray-600`, sizeClasses[size], { | ||
rounded: !rounded, | ||
'rounded-full': rounded, | ||
'p-1 ring-2 ring-gray-300 dark:ring-gray-500': bordered, | ||
})} | ||
> | ||
<svg | ||
className="absolute -bottom-1 h-auto w-auto text-gray-400" | ||
fill="currentColor" | ||
viewBox="0 0 20 20" | ||
xmlns="http://www.w3.org/2000/svg" | ||
> | ||
<path | ||
fillRule="evenodd" | ||
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" | ||
clipRule="evenodd" | ||
></path> | ||
</svg> | ||
</div> | ||
)} | ||
{status && ( | ||
<span | ||
className={classNames( | ||
'absolute h-3.5 w-3.5 rounded-full border-2 border-white dark:border-gray-800', | ||
statusClasses[status], | ||
statusPositionClasses[statusPosition], | ||
)} | ||
></span> | ||
)} | ||
</div> | ||
{children && <div>{children}</div>} | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,108 @@ | ||
import { FC } from 'react'; | ||
|
||
import { Avatar, Dropdown } from '../components'; | ||
import { CodeExample, DemoPage } from './DemoPage'; | ||
|
||
const AvatarPage: FC = () => { | ||
const examples: CodeExample[] = [ | ||
{ | ||
title: 'Default Avatar', | ||
code: ( | ||
<div className="flex flex-wrap gap-2"> | ||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded /> | ||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" /> | ||
</div> | ||
), | ||
}, | ||
{ | ||
title: 'Bordered Avatar', | ||
code: ( | ||
<div className="flex flex-wrap gap-2"> | ||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded bordered /> | ||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" bordered /> | ||
</div> | ||
), | ||
}, | ||
{ | ||
title: 'Placeholder', | ||
code: ( | ||
<div className="flex flex-wrap gap-2"> | ||
<Avatar /> | ||
<Avatar rounded /> | ||
</div> | ||
), | ||
}, | ||
{ | ||
title: 'Dot indicator', | ||
code: ( | ||
<div className="flex flex-wrap gap-2"> | ||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" status="online" /> | ||
<Avatar | ||
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" | ||
rounded | ||
status="busy" | ||
statusPosition="top-left" | ||
/> | ||
<Avatar | ||
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" | ||
status="offline" | ||
statusPosition="bottom-right" | ||
/> | ||
<Avatar | ||
img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" | ||
rounded | ||
status="away" | ||
statusPosition="bottom-left" | ||
/> | ||
</div> | ||
), | ||
}, | ||
{ | ||
title: 'Avatar text', | ||
code: ( | ||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded> | ||
<div className="space-y-1 font-medium dark:text-white"> | ||
<div>Jese Leos</div> | ||
<div className="text-sm text-gray-500 dark:text-gray-400">Joined in August 2014</div> | ||
</div> | ||
</Avatar> | ||
), | ||
}, | ||
{ | ||
title: 'User dropdown', | ||
code: ( | ||
<Dropdown | ||
label={<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" rounded />} | ||
arrowIcon={false} | ||
inline | ||
> | ||
<Dropdown.Header> | ||
<span className="block text-sm">Bonnie Green</span> | ||
<span className="block truncate text-sm font-medium">name@flowbite.com</span> | ||
</Dropdown.Header> | ||
<Dropdown.Item>Dashboard</Dropdown.Item> | ||
<Dropdown.Item>Settings</Dropdown.Item> | ||
<Dropdown.Item>Earnings</Dropdown.Item> | ||
<Dropdown.Divider /> | ||
<Dropdown.Item>Sign out</Dropdown.Item> | ||
</Dropdown> | ||
), | ||
}, | ||
{ | ||
title: 'Sizing', | ||
code: ( | ||
<div className="flex flex-wrap items-center gap-2"> | ||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="xs" /> | ||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="sm" /> | ||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="md" /> | ||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="lg" /> | ||
<Avatar img="https://flowbite.com/docs/images/people/profile-picture-5.jpg" size="xl" /> | ||
</div> | ||
), | ||
}, | ||
]; | ||
|
||
return <DemoPage examples={examples} />; | ||
}; | ||
|
||
export default AvatarPage; |