-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[#32] Avatar component #46
Conversation
To update and custom avatar styles
To fix error with es5
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for your hard working.
I left a few comment.
src/components/ui/avatar/Avatar.tsx
Outdated
import { forwardRef } from 'react'; | ||
import { avatar, type AvatarVariantProps } from '@/styled/recipes'; | ||
|
||
export interface AvatarProps extends ArkAvatarProps, AvatarVariantProps { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You should new file name: types.ts and move interface and type into it.
src/components/ui/avatar/Avatar.tsx
Outdated
import { avatar, type AvatarVariantProps } from '@/styled/recipes'; | ||
|
||
export interface AvatarProps extends ArkAvatarProps, AvatarVariantProps { | ||
name?: string; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You should note comment for name property. example:
/** name is plalala */
src?: string; | ||
} | ||
|
||
export const Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You should write a description for the function and param of us. Example:
/**
* @description This function render style for Avatar.
*/
src/components/ui/avatar/Avatar.tsx
Outdated
</svg> | ||
); | ||
|
||
const getInitials = (name = '') => |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What is a util?
If this is a util, you can move it into util file
src/components/ui/avatar/Avatar.tsx
Outdated
|
||
Avatar.displayName = 'Avatar'; | ||
|
||
const UserIcon = () => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You should we will create 1 file manage Icons.
Example
Import {UserIcon} from 'icons'.
Refactor file structure
To divide icons into seperate folder
I updated. Please help me check it before I update others. Thanks a lot @vitran12 |
What this PR does / why we need it:
Special notes for your reviewer:
Which issue(s) this PR fixes:
Fixes #32
Screenshoots:
Checklist: