Skip to content
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

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

[FEAT] Icon Component #30

wants to merge 1 commit into from

Conversation

CarlosP1e
Copy link

No description provided.

@CarlosP1e CarlosP1e requested a review from jdic November 13, 2024 23:56
@CarlosP1e CarlosP1e linked an issue Nov 13, 2024 that may be closed by this pull request
"text-light-secondary dark:text-dark-secondary group-hover:text-light-text/60 dark:group-hover:text-dark-text/60"
)}
/>
<Icon icon={<UserCircleIcon />} />
Copy link
Member

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.

Suggested change
<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" />
Copy link
Member

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 < />.

Suggested change
<Icon icon={ChevronRightIcon} className="w-4 h-4" />
<Icon
icon={<ChevronRightIcon />}
className={tw(
"transition-transform duration-200",
{ "rotate-90": isOpen }
)}
/>

Comment on lines +1 to +21
'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;
Copy link
Member

@jdic jdic Nov 14, 2024

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.

Suggested change
'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

Comment on lines 5 to +8
import { Generic } from '@/types/global'
import { tw } from '@/lib/utils/tw'
import React from 'react'
import Icon from '@/modules/common/templates/icon'
Copy link
Member

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.

Copy link
Member

@jdic jdic left a 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Icon Component
2 participants