Composants UI

Bibliothèque de composants YaniPay avec exemples visuels et code d'implémentation.

Overview

Les composants YaniPay sont construits sur Radix UI pour l'accessibilité et Tailwind CSS pour le styling. Ils suivent les design tokens définis dans la palette de couleurs avec un focus sur le dark mode.

Buttons

Variantes de boutons pour différents contextes d'utilisation :

Primary (CTA)

Secondary (White)

Outline

Ghost

Sizes

Button Variantstsx

// Primary (CTA)
<Button className="bg-gradient-to-r from-emerald-600 to-cyan-600
                   text-white shadow-lg shadow-emerald-500/20">
  Confirmer
</Button>

// Secondary (White)
<Button className="bg-white text-slate-900 hover:bg-gray-100">
  Action
</Button>

// Outline
<Button className="border border-white/20 bg-white/5 text-white
                   hover:bg-white/10">
  Annuler
</Button>

// With icon
<Button className="...">
  <Save className="w-4 h-4 mr-2" />
  Save
</Button>

Inputs

Champs de saisie avec différents états :

Default Input

With Icon

Error State

Ce champ est requis

Disabled

Textarea

Input Patterntsx

<input
  type="text"
  placeholder="Enter text..."
  className={cn(
    "w-full px-4 py-3 bg-white/5 border rounded-xl text-white",
    "placeholder:text-white/40 outline-none transition-all",
    "focus:border-emerald-500/50 focus:ring-1 focus:ring-emerald-500/20",
    error ? "border-red-500/50" : "border-white/10"
  )}
/>

Selects & Dropdowns

Composants de sélection avec style dark theme :

Select

Select with Radixtsx

<Select value={value} onValueChange={setValue}>
  <SelectTrigger className="border-white/10 bg-white/5 text-white">
    <SelectValue placeholder="Select..." />
  </SelectTrigger>
  <SelectContent className="border-white/10 bg-slate-900/95 backdrop-blur-xl">
    <SelectItem
      value="option1"
      className="text-white/70 hover:bg-white/5 hover:text-white
                 focus:bg-white/5 focus:text-white"
    >
      Option 1
    </SelectItem>
  </SelectContent>
</Select>

Badges

Indicateurs visuels pour statuts et labels :

ActivePendingErrorInfoDefaultPremium

Badge Variantstsx

// Success
<Badge className="bg-emerald-500/10 border-emerald-500/20 text-emerald-400">
  Active
</Badge>

// Warning
<Badge className="bg-amber-500/10 border-amber-500/20 text-amber-400">
  Pending
</Badge>

// Gradient (Premium)
<Badge className="bg-gradient-to-r from-teal-500 to-cyan-500 text-white">
  Premium
</Badge>

Cards & Surfaces

Conteneurs avec effet glassmorphism :

Standard Card

Surface de base avec glassmorphism subtil.

bg-slate-900/60 backdrop-blur-xl border-white/10

Glow Card

Card avec effet glow emerald.

+ border-emerald-500/20 ring-1 ring-emerald-500/30

Gradient Card

Card avec fond gradient subtil.

from-emerald-950/40 via-slate-900/60 to-cyan-950/30

Interactive Card

Card avec hover effect.

hover:bg-white/10 hover:border-emerald-500/30

Icon Badges

Badges d'icônes pour les headers et sections :

Icon Badge Patterntsx

// Primary icon badge (emerald gradient)
<div className="p-3 rounded-xl border border-emerald-500/20
                bg-gradient-to-br from-emerald-500/20 to-cyan-500/20">
  <CreditCard className="w-5 h-5 text-emerald-400" />
</div>

// Subtle icon badge
<div className="p-2 rounded-lg border border-white/10 bg-white/5">
  <Search className="w-4 h-4 text-white/60" />
</div>

Design System