Pređi na sadržaj
Pitaj.io

JSX DSL Komponente

Pitaj.io koristi strogo definisanu i sigurnu JSX biblioteku komponenti (DSL). Ova biblioteka garantuje da će svaki kreirani widget izgledati prelijepo, biti potpuno responzivan i siguran za prikazivanje unutar web preglednika.

Pregled osnovnih komponenti

1. Elementi rasporeda (Layout)

  • <Container>: Glavni okvir widgeta sa automatskim paddingom i zaobljenim ivicama.
  • <Card>: Kontejner za grupu informacija sa suptilnim okvirom i sjenom.
  • <Stack direction="row|column" gap={4}>: Fleksibilni raspored elemenata u red ili kolonu.
  • <Grid cols={2} gap={4}>: Responzivna mreža u više kolona.

2. Unos podataka i kontrole (Inputs & Forms)

  • <Input type="text|number|email" label="..." value={...} onChange={...} />: Polje za unos teksta sa labelom i validacijom grešaka.
  • <Slider min={0} max={100} step={1} value={...} onChange={...} />: Klizač za brzo biranje numeričkih vrijednosti.
  • <Select options={[...]} value={...} onChange={...} />: Padajući meni sa predefinisanim stavkama.
  • <Switch checked={...} onChange={...} label="..." />: Prekidač za uključivanje/isključivanje opcija.
  • <Button variant="primary|secondary|outline" onClick={...}>: Interaktivno dugme sa podrškom za ikone i stanja učitavanja.

3. Prikaz podataka i metrike (Data Display)

  • <Metric label="Mjesečna Rata" value="482.50 KM" trend="+2.4%" />: Veliki istaknuti broj sa opisom — idealan za rezultate izračuna.
  • <Badge variant="success|warning|info">: Mala statusna oznaka.
  • <Progress value={65} max={100} />: Traka napretka (npr. popunjenost ankete).

Primjer koda: Interaktivna Kalkulator Komponenta

Evo kako izgleda kompletna struktura jednog Pitaj JSX widgeta:

<Container className="space-y-4 p-4 bg-slate-900 border border-slate-800 rounded-2xl text-white">
  <Stack direction="column" gap={2}>
    <h3 className="text-lg font-semibold">Kalkulator Uštede Solarne Energije</h3>
    <p className="text-sm text-slate-400">Izračunajte godišnji povrat investicije na osnovu potrošnje.</p>
  </Stack>


  <Card className="p-4 bg-slate-800/50 border border-slate-700/60 rounded-xl space-y-3">
    <div className="flex justify-between text-sm">
      <span className="text-slate-300">Mjesečni račun za struju</span>
      <span className="font-bold text-blue-400">{state.monthlyBill} KM</span>
    </div>
    <Slider
      min={50}
      max={500}
      step={10}
      value={state.monthlyBill}
      onChange={(val) => setState({ ...state, monthlyBill: val })}
    />
  </Card>


  <Grid cols={2} gap={3}>
    <Metric
      label="Godišnja ušteda"
      value={`${Math.round(state.monthlyBill * 12 * 0.75)} KM`}
      className="bg-emerald-950/40 border border-emerald-800/50 p-3 rounded-xl"
    />
    <Metric
      label="Povrat investicije"
      value="4.2 god"
      className="bg-blue-950/40 border border-blue-800/50 p-3 rounded-xl"
    />
  </Grid>


  <Button
    variant="primary"
    className="w-full justify-center py-2.5 bg-blue-600 hover:bg-blue-500 rounded-xl font-medium"
    onClick={() => emit('submit_quote', { savings: state.monthlyBill * 12 * 0.75 })}
  >
    Zatražite besplatnu studiju izvodljivosti
  </Button>
</Container>