10 fe create custom button component

[filipgrabovac-fer]

jos 2 stvari: trebali bi imati title argument koji nam omogucava da button ima neki tekst koji mi zelimo, a ne da smo limitirani na cancel i logout. tvoj button tag bi sad trebalo izgledati ovako:

<button className={sve sto je navedeno u gornjim komentarima}>{title}</button>

gore u input tip dodaj title:string;

u ulaz funkcije dodaj export const CustomInput = ({variant, onClick, title}: CustomButtonType)...

druga stvar: na buttonu treba povecati border radius na koliko je postavljeno u figmi i makni ovo povecavanje buttona kad se hovera preko njega. Moze se smanjit opacity ali scale nam ne treba

[filipgrabovac-fer]

pls renameaj CustomInputType u CustomButtonType

[filipgrabovac-fer]

if else blok mozemo zamijenit sa jednim button tagom koji u ce u className argumentu koristit cn() funkciju i onda cijeli if-else blok mozes zamijenit sa <button className={cn("ovdje idu klase koje su ti iste za obje varijante gumba", variant == "primary" ? "klase specificne za primary" : "klase specificne za secondary)}

u ovom slucaj u if-else blok smo zamijenili sa jednim button taggom koji samo mijenja klasu ovisno o varijanti koja je unesena

[filipgrabovac-fer]

variant_ argument zamijeni sa variant, ne treba nam dodatna provjera je li uneseno lowercase kad cemo gumbe rucno dodavat mi i uvijek ce bit lowercase tako da i to castanje u lowercase mozes obrisat

[filipgrabovac-fer]

na button tagu moras dodat onClick funkciju, sad je ona dodana gore u ulaz same komponente ali nije stavljena na sami button pa nam trenutno ne radi

export const CustomButton = ({variant, onClick}: CustomInputType)... i <button onClick={onClick}... ti nedostaju

[filipgrabovac-fer]

sve super, samo u CustomButton komponenti stavi onClick funkciju na button tag koji vracas

izgledat ce ti ovako: <button onClick={onClick}...

isto tako povecaj border radius buttona na 20px