Thiết kế website giá rẻ

Question

I’m trying to create a reusable components for a button that may have an icon and label. I’m using React+Next and Tailwind for my project. The default / idle state is correct, but the hover state is not. When I hovered my mouse on top of it, it only changed the button’s bg color, not the icon and label. However, when I tried it in Tailwind Play, it worked just fine.

This is the class for the general button:

button-schemes.tsx:

'use client'
export type HexColor = `#${string}`;

export enum ButtonType {
    PRIMARY,
    SECONDARY,
    PRIMARY_ICON,
}

export enum ButtonWidth {
    FIT = 'w-fit',
    REG = 'w-[115px]'
}

export enum ButtonHeight {
    FIT = 'h-fit',
    MINI = 'h-[20px]',
    REG = 'h-[40px]'
}

export enum FontSize {
    SMALL = 'text-sm',
    BASE = 'text-base'
}

export interface ButtonColors {
    bgColorIdle: HexColor
    bgColorHover: HexColor
    bgColorDisable: HexColor
    labelColorIdle: HexColor
    labelColorHover: HexColor
    labelColorDisable: HexColor
}

export interface ButtonSizes {
    width: ButtonWidth
    height: ButtonHeight
    fontSize: FontSize
}

export const buttonSizeSchemes: { [type: string]: ButtonSizes; } = {
    [ButtonType.PRIMARY]: {
        width: ButtonWidth.REG,
        height: ButtonHeight.REG,
        fontSize: FontSize.BASE
    },
    [ButtonType.SECONDARY]: {
        width: ButtonWidth.REG,
        height: ButtonHeight.REG,
        fontSize: FontSize.BASE
    },
    [ButtonType.PRIMARY_ICON]: {
        width: ButtonWidth.FIT,
        height: ButtonHeight.REG,
        fontSize: FontSize.BASE
    },
}

export const buttonColorSchemes: { [type: string]: ButtonColors; } = {
    [ButtonType.PRIMARY]: {
        bgColorIdle: '#FA8A0A',
        bgColorHover: '#E37900',
        bgColorDisable: '#EEF0F3',
        labelColorIdle: '#FFFFFF',
        labelColorHover: '#FFFFFF',
        labelColorDisable: '#CDD2DB'
    },
    [ButtonType.SECONDARY]: {
        bgColorIdle: '#F3F6F9',
        bgColorHover: '#DDE1E7',
        bgColorDisable: '#EEF0F3',
        labelColorIdle: '#333333',
        labelColorHover: '#333333',
        labelColorDisable: '#CDD2DB'
    },
    [ButtonType.PRIMARY_ICON]: {
        bgColorIdle: '#F3F6F9',
        bgColorHover: '#576887',
        bgColorDisable: '#EEF0F3',
        labelColorIdle: '#576887',
        labelColorHover: '#FFFFFF',
        labelColorDisable: '#CDD2DB'
    },
}

button-general.tsx:

'use client'
import React, { SVGProps } from "react"
import { ButtonType, ButtonWidth, ButtonHeight, ButtonColors, buttonColorSchemes, buttonSizeSchemes } from "./button-schemes"

export interface ButtonGeneralProperties {
    type: ButtonType
    title?: string
    icon?: any
    onClick?: () => void
    disableWhen?: () => boolean
}

export const ButtonGeneral = (props: ButtonGeneralProperties) => {
    const { type, title, icon, onClick, disableWhen } = props

    const { bgColorIdle, bgColorHover, bgColorDisable, labelColorIdle, labelColorHover, labelColorDisable } = buttonColorSchemes[type]
    const { width, height, fontSize } = buttonSizeSchemes[type]

    return (
        <button
            className={`group ${width ? width : 'w-fit'} ${height ? height : 'h-fit'} p-[15px] bg-[${bgColorIdle}] hover:bg-[${bgColorHover}] disabled:bg-[${bgColorDisable}] rounded-3xl justify-center items-center gap-2.5 flex`}
            onClick={onClick}
            disabled={disableWhen && disableWhen()}
        >
            {icon ? icon : ''}
            <div className={`text-[${labelColorIdle}] group-hover:text-[${labelColorHover}] disabled:text-[${labelColorDisable}] ${fontSize} font-semibold leading-none tracking-wide`}>
                {title}
            </div>
        </button>
    )
}

icon-schemes.tsx:

import { HexColor } from "../buttons/button-schemes";

export enum IconType {
    PRIMARY,
    SECONDARY,
    TERTIARY,
}

export interface IconColors {
    fillColor: HexColor
    hoverColor: HexColor
}

export interface SvgIconProperties {
    name: string;
    type: IconType;
    size?: string | number;
}

export const iconColorSchemes: { [type: string]: IconColors; } = {
    [IconType.PRIMARY]: {
        fillColor: '#576887',
        hoverColor: '#F89D1D'
    },
}

edit-icon.tsx:

import { SvgIconProperties, iconColorSchemes } from "./icon-schemes";

const EditIcon = (props: SvgIconProperties) => {
    const { name, type, size } = props
    const colors = iconColorSchemes[type]

    return (
        <svg
            width={size ?? '18'}
            height={size ?? '18'}
            viewBox={`0 0 ${size} ${size}`}
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            <path
                className={`fill-[${colors.fillColor}] group-hover:fill-[${colors.hoverColor}]`}
                d="M16 0C16.5304 0 17.0391 0.210714 17.4142 0.585786C17.7893 0.960859 18 1.46957 18 2V16C18 17.11 17.1 18 16 18H2C1.46957 18 0.960859 17.7893 0.585786 17.4142C0.210714 17.0391 0 16.5304 0 16V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0H16ZM13.7 6.35C13.92 6.14 13.92 5.79 13.7 5.58L12.42 4.3C12.21 4.08 11.86 4.08 11.65 4.3L10.65 5.3L12.7 7.35L13.7 6.35ZM4 11.94V14H6.06L12.12 7.94L10.06 5.88L4 11.94Z"
            />
        </svg>
    )
}

export default EditIcon

this is how I use it:

            <ButtonGeneral
                type={ButtonType.PRIMARY_ICON}
                title='Edit User'
                icon={<EditIcon
                  name='Edit'
                  type={IconType.PRIMARY}
                  size='18'
                />}
                onClick={() =>
                  router.push(
                    `/admin-center/user-management/${userDetail?.user_id}/edit`
                  )
                }
              />

and this is the inspected element in the browser which worked flawlessly in Tailwind Play:

<button class="group flex h-[40px] w-fit items-center justify-center gap-2.5 rounded-3xl bg-[#F3F6F9] p-[15px] hover:bg-[#576887] disabled:bg-[#EEF0F3]">
  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path class="fill-[#576887] group-hover:fill-[#F89D1D]" d="M16 0C16.5304 0 17.0391 0.210714 17.4142 0.585786C17.7893 0.960859 18 1.46957 18 2V16C18 17.11 17.1 18 16 18H2C1.46957 18 0.960859 17.7893 0.585786 17.4142C0.210714 17.0391 0 16.5304 0 16V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0H16ZM13.7 6.35C13.92 6.14 13.92 5.79 13.7 5.58L12.42 4.3C12.21 4.08 11.86 4.08 11.65 4.3L10.65 5.3L12.7 7.35L13.7 6.35ZM4 11.94V14H6.06L12.12 7.94L10.06 5.88L4 11.94Z"></path>
  </svg>
  <div class="text-base font-semibold leading-none tracking-wide text-[#576887] disabled:text-[#CDD2DB] group-hover:text-[#FFFFFF]">
    Edit User
  </div>
</button>

Can anybody help me? Thank you.

Thiết kế website giá rẻ

Danh mục

Element is working fine in Tailwind Play but not in the actual page