ะšะพะผะฟะพะฝะตะฝั‚ั‹ะะพะฒะพะต

ะŸะพะธัะบ ัะพ ัะฒะตั‡ะตะฝะธะตะผ

ะขั‘ะผะฝะฐั ัั‚ั€ะพะบะฐ ะฟะพะธัะบะฐ ัะพ ัะฒะตั‚ะพะผ ะธะท ะดะฒัƒั… ัƒะณะปะพะฒ ะธ ะผัะณะบะธะผ ะพั€ะตะพะปะพะผ, ะบะพั‚ะพั€ั‹ะน ัั€ั‡ะต ะฟั€ะธ ั„ะพะบัƒัะต. ะกะฟั€ะฐะฒะฐ ะบะฝะพะฟะบะฐ ั„ะธะปัŒั‚ั€ะพะฒ.

ะะฐัั‚ั€ะพะนะบะธ

glowFrom
glowTo

ะžัะฝะพะฒะฐะฝะพ ะฝะฐ lazy-frog-59 by Cobp (MIT ะปะธั†ะตะฝะทะธั) ยท ะฃัะปะพะฒะธั ะธัะฟะพะปัŒะทะพะฒะฐะฝะธั

ะŸะฐั€ะฐะผะตั‚ั€ั‹

9 ะฟะฐั€ะฐะผะตั‚ั€ะพะฒ
ะŸะฐั€ะฐะผะตั‚ั€ะขะธะฟะŸะพ ัƒะผะพะปั‡ะฐะฝะธัŽะžะฟะธัะฐะฝะธะต
placeholderstring"Search..."ะŸะพะดัะบะฐะทะบะฐ ะฒ ะฟัƒัั‚ะพะผ ะฟะพะปะต.
onSearch(query: string) => voidโ€”ะ’ั‹ะทั‹ะฒะฐะตั‚ัั ั ั‚ะตะบัั‚ะพะผ ะฟะพ ะฝะฐะถะฐั‚ะธัŽ Enter.
onFilterClick() => voidโ€”ะ’ั‹ะทั‹ะฒะฐะตั‚ัั ะฟะพ ะฝะฐะถะฐั‚ะธัŽ ะบะฝะพะฟะบะธ ั„ะธะปัŒั‚ั€ะพะฒ.
showFilterbooleantrueะŸะพะบะฐะทั‹ะฒะฐั‚ัŒ ะบะฝะพะฟะบัƒ ั„ะธะปัŒั‚ั€ะพะฒ.
glowFromstring"#ffffff"ะกะฒะตั‚ ะธะท ะปะตะฒะพะณะพ ะฒะตั€ั…ะฝะตะณะพ ัƒะณะปะฐ.
glowTostring"#8a8a8a"ะกะฒะตั‚ ะธะท ะฟั€ะฐะฒะพะณะพ ะฝะธะถะฝะตะณะพ ัƒะณะปะฐ.
widthnumber300ะจะธั€ะธะฝะฐ ัั‚ั€ะพะบะธ ะฒ ะฟะธะบัะตะปัั….
labelstring"Search"ะะฐะทะฒะฐะฝะธะต ะฟะพะปั ะดะปั ัะบั€ะฐะฝะฝั‹ั… ั‡ะธั‚ะฐะปะพะบ.
classNamestringโ€”ะšะปะฐััั‹ ะดะปั ะพะฑั‘ั€ั‚ะบะธ.

ะ—ะฐะฒะธัะธะผะพัั‚ะธ

ะŸะฐะบะตั‚ะพะฒ: 2

npm install clsx tailwind-merge

ะŸะพั…ะพะถะธะต ะบะพะผะฟะพะฝะตะฝั‚ั‹

ะกะผะพั‚ั€ะตั‚ัŒ ะฒัะต