Naredil boš komponento <LightSwitch>, ki bo preklapljala med light/dark mode tvoje spletne strani.
- Naloži
<Switch />komponento iz ui.shadcn.com - Odpri datoteko
src/components/LightSwitch.jsx - Z Reactovim
useStatenaredi nov stateisDark, ki bo imel vrednosttruealifalse. Na začetku naj bofalse, torej naj bo svetla tema. - Prikaži
<Switch />komponento v<LightSwitch />komponenti in ji nastavi vrednost glede namode.<Switch />ima atributacheckedinonCheckedChange. Prvi je boolean, ki določa, če je stikalo vklopljeno, drugi pa je funkcija, ki se pokliče, ko se stikalo preklopi. Te to spominja nauseState?- Da bomo lahko spremljali vrednost stikala, moramo povezati svoj state
isDarks stikalom. To naredimo tako, dacheckednastavimo naisDarkinonCheckedChangenasetIsDark.
- Uporabi
useEffect, da boš ob spremembiisDark<html>znački dodal classlightalidark
// To kodo daj v useEffect
const root = document.documentElement; // najde <html> značko
root.classList.remove("light", "dark"); // odstrani prejšnji class
root.classList.add(isDark ? "dark" : "light"); // dodaj nov class glede na vrednost isDarkNaredil boš komponento <TextLengthCounter>, ki bo štela število znakov v vnosnem polju in ti povedala, če imaš preveč znakov.
- Odpri datoteko
src/components/TextLengthCounter.jsx - Naredi nov state
texts privzeto vrednostjo"" - Naredi nov state
maxCharss privzeto vrednostjo100 - Naredi nov state
isOverLimits privzeto vrednostjofalse - Za vnost besedila uporabi TextArea.
- Kot pri LightSwitch, moraš povezati besedilo v TextArea s statom
text
- Kot pri LightSwitch, moraš povezati besedilo v TextArea s statom
- Za spreminjanje
maxCharsuporabi Slider - Ko bo dolžina teksta (
text.length) večja odmaxChars, naj se prikaže tekst, ki te opozori, da imaš predolg tekst.