tipscode.github.io/src/course-python/Button.njs at master · TipsCode/tipscode.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
function PrimaryButton(text) {
    const colorStyle = 'bg-[#5FE2FF]'
    text = text.text

    return (
        <>
            {/* Renderizar apenas em mobile */}
            <div class="lg:hidden">
                <div class={`flex w-fit items-center ${colorStyle} h-[37px] px-[22px] py-[8px] rounded-full hover:bg-[#96ECFF] hover:shadow-[0px_0px_4px_rgba(95,266,255,0.15)] hover:cursor-pointer`}>
                    <p class='text-[14px] font-[500]'>{text}</p>
                </div>
            </div>

            {/* Renderizar apenas em telas tablet) */}
            <div class="hidden xl:hidden lg:block">
                <div class={`flex w-fit items-center ${colorStyle} h-[54px] px-[26px] py-[12px] rounded-full hover:bg-[#96ECFF] hover:shadow-[0px_0px_4px_rgba(95,266,255,0.15)] hover:cursor-pointer`}>
                    <p class='text-[20px] font-[500]'>{text}</p>
                </div>
            </div>

            {/* Renderizar apenas em telas desktop */}
            <div class="hidden xl:block">
                <div class={`flex w-fit items-center ${colorStyle} h-[60px] px-[28px] py-[12px] rounded-full hover:bg-[#5FE2FF] hover:shadow-[0px_0px_8px_rgba(95,266,255,0.3)] hover:cursor-pointer`}>
                    <p class='text-[24px] font-[500]'>{text}</p>
                </div>
            </div>
        </>
    )
}

function SecondaryButton(text) {
    const colorStyle = 'bg-[#69B7FF]'
    text = text.text

    return (
        <>
            {/* Renderizar apenas em mobile */}
            <div class="lg:hidden">
                <div class={`flex w-fit items-center ${colorStyle} h-[30px] px-[20px] py-[6px] rounded-full hover:bg-[#8AC7FF] hover:shadow-[0px_0px_4px_rgba(105,183,255,0.15)] hover:cursor-pointer`}>
                    <p class='text-[12px] font-[500]'>{text}</p>
                </div>
            </div>

            {/* Renderizar apenas em telas tablet) */}
            <div class="hidden xl:hidden lg:block">
                <div class={`flex w-fit items-center ${colorStyle} h-[44px] px-[26px] py-[12px] rounded-full hover:bg-[#8AC7FF] hover:shadow-[0px_0px_4px_rgba(105,183,255,0.15)] hover:cursor-pointer`}>
                    <p class='text-[16px] font-[500]'>{text}</p>
                </div>
            </div>

            {/* Renderizar apenas em telas desktop */}
            <div class="hidden xl:block">
                <div class={`flex w-fit items-center ${colorStyle} h-[51px] px-[28px] py-[12px] rounded-full hover:bg-[#69B7FF] hover:shadow-[0px_0px_8px_rgba(105,183,255,0.30)] hover:cursor-pointer`}>
                    <p class='text-[18px] font-[600]'>{text}</p>
                </div>
            </div>
        </>
    )
}

function WhatsappButton(text, href) {
    const colorStyle = 'bg-[#2BFF59]'
    text = text.text

    return (
        <>
            {/* Renderizar apenas em mobile */}
            <div class="lg:hidden">
                <a href={href} class={`flex w-fit items-center ${colorStyle} text-[12px] font-[500] text-black  h-[30px] px-[35px] py-[6px]  my-4 rounded-full hover:bg-[#66FF88] hover:shadow-[0px_0px_4px_rgba(43,255,89,0.15)] hover:cursor-pointer`}>
                    {text}
                </a>
            </div>

            {/* Renderizar apenas em telas tablet) */}
            <div class="hidden xl:hidden lg:block">
                <a href={href} class={`flex w-fit items-center ${colorStyle} text-[16px] font-[500] text-black h-[44px] px-[26px] py-[12px] rounded-full hover:bg-[#66FF88] hover:shadow-[0px_0px_4px_rgba(43,255,89,0.15)] hover:cursor-pointer`}>
                    {text}
                </a>
            </div>

            {/* Renderizar apenas em telas desktop */}
            <div class="hidden xl:block">
                <a href={href} class={`flex w-fit items-center ${colorStyle} text-[19px] font-[500] text-black h-[51px] px-[28px] py-[12px] rounded-full hover:bg-[#2AFF59] hover:shadow-[0px_0px_8px_rgba(43,255,89,0.30)] hover:cursor-pointer`}>
                   {text}
                </a>
            </div>
        </>
    )
}

function Button(props) {
    // O componente botão tem 3 tipos de variação. ['primary', 'secondary', 'whatsapp']
    const type = props.type;
    const text = props.text

    let buttonComponent;

    if (type === 'primary') {
        buttonComponent = <PrimaryButton text={text}/>;
    } else if (type === 'secondary') {
        buttonComponent = <SecondaryButton text={text}/>;
    } else if (type === 'whatsapp') {
        buttonComponent = <WhatsappButton text={text}/>;
    } else {
        buttonComponent = null; // Ou um componente padrão/placeholder
    }

   return (
    <>
        {buttonComponent}
    </>
    )
}

export default Button