-
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
[FEAT] Icon Component #30
base: dev
Are you sure you want to change the base?
Conversation
"text-light-secondary dark:text-dark-secondary group-hover:text-light-text/60 dark:group-hover:text-dark-text/60" | ||
)} | ||
/> | ||
<Icon icon={<UserCircleIcon />} /> |
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 forgot to put back the classes that already had the icon before.
<Icon icon={<UserCircleIcon />} /> | |
<Icon | |
icon={<UserCircleIcon />} | |
className={tw( | |
"size-6 flex-shrink-0", | |
"group-hover:text-light-text/60 dark:group-hover:text-dark-text/60" | |
)} | |
/> |
{ "rotate-90": isOpen } | ||
)} | ||
/> | ||
<Icon icon={ChevronRightIcon} className="w-4 h-4" /> |
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 forgot to put back the classes that already had the icon before.
Remember that you have to pass a created object, however, you are passing an unbuilt object, use < />
.
<Icon icon={ChevronRightIcon} className="w-4 h-4" /> | |
<Icon | |
icon={<ChevronRightIcon />} | |
className={tw( | |
"transition-transform duration-200", | |
{ "rotate-90": isOpen } | |
)} | |
/> |
'use client' | ||
|
||
import { tw } from "@/lib/utils/tw"; | ||
import { IconProps } from "@/types/templates"; | ||
import React from "react"; | ||
|
||
const Icon: React.FC<IconProps> = ({ className, icon }) => | ||
{ | ||
return ( | ||
<span | ||
className={tw( | ||
"font-bold size-4", | ||
"text-light-text dark:text-dark-text", | ||
className | ||
)}> | ||
{icon} | ||
</span> | ||
); | ||
} | ||
|
||
export default Icon; |
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 must maintain a similar structure to the rest of the project, making use of '
when you are not in an HTML based structure and keep an order in the imports based on their size, also you must use a 2 spaces ident, not 4 spaces.
'use client' | |
import { tw } from "@/lib/utils/tw"; | |
import { IconProps } from "@/types/templates"; | |
import React from "react"; | |
const Icon: React.FC<IconProps> = ({ className, icon }) => | |
{ | |
return ( | |
<span | |
className={tw( | |
"font-bold size-4", | |
"text-light-text dark:text-dark-text", | |
className | |
)}> | |
{icon} | |
</span> | |
); | |
} | |
export default Icon; | |
'use client' | |
import { IconProps } from '@/types/templates' | |
import { tw } from '@/lib/utils/tw' | |
import React from 'react' | |
const Icon: React.FC<IconProps> = ({ className, icon }) => | |
{ | |
return ( | |
<span | |
className={tw( | |
"size-4", | |
"text-light-text dark:text-dark-text", | |
className | |
)}> | |
{icon} | |
</span> | |
) | |
} | |
export default Icon |
import { Generic } from '@/types/global' | ||
import { tw } from '@/lib/utils/tw' | ||
import React from 'react' | ||
import Icon from '@/modules/common/templates/icon' |
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 must maintain an order in the imports based on their size.
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.
I have left you improvement and correction obersavations, you should apply them before combining with the dev branch.
No description provided.