Alert (Kotak Pemberitahuan)

<div class="mjl-alert mjl-alert--success" role="status">
  <div class="mjl-alert__content">
    <p class="mjl-alert__title">Berkas berhasil terkirim</p>
    <p>Nomor resi Anda: MJL-2026-88192.</p>
  </div>
</div>

<div class="mjl-alert mjl-alert--danger" role="alert">
  <div class="mjl-alert__content">
    <p class="mjl-alert__title">Gagal memproses</p>
    <p>NIK tidak ditemukan dalam basis data.</p>
  </div>
</div>

<script setup lang="ts">
import { ref } from 'vue';
import { MjlAlert } from '@majalengka/vue';

const tampil = ref(true);
</script>

<template>
  <MjlAlert v-if="tampil" variant="success" title="Berkas berhasil terkirim" dismissible @dismiss="tampil = false">
    Nomor resi Anda: MJL-2026-88192.
  </MjlAlert>
  <MjlAlert variant="danger" title="Gagal memproses">NIK tidak ditemukan dalam basis data.</MjlAlert>
</template>

import type { ReactNode } from 'react';

type Variant = 'info' | 'success' | 'warning' | 'danger';

export function MjlAlert({ variant = 'info', title, children }: { variant?: Variant; title?: string; children: ReactNode }) {
  // Pesan error/peringatan diumumkan segera (alert); info/sukses cukup sopan (status).
  const role = variant === 'danger' || variant === 'warning' ? 'alert' : 'status';
  return (
    <div className={`mjl-alert mjl-alert--${variant}`} role={role}>
      <div className="mjl-alert__content">
        {title && <p className="mjl-alert__title">{title}</p>}
        <div>{children}</div>
      </div>
    </div>
  );
}

import { Component, computed, input } from '@angular/core';

@Component({
  selector: 'mjl-alert',
  standalone: true,
  template: `
    <div class="mjl-alert mjl-alert--{{ variant() }}" [attr.role]="role()">
      <div class="mjl-alert__content">
        @if (title()) { <p class="mjl-alert__title">{{ title() }}</p> }
        <ng-content />
      </div>
    </div>
  `,
})
export class MjlAlert {
  variant = input<'info' | 'success' | 'warning' | 'danger'>('info');
  title = input<string>();
  role = computed(() => (this.variant() === 'danger' || this.variant() === 'warning' ? 'alert' : 'status'));
}

{{-- Tampilkan flash message dari controller: return back()->with('sukses', '...') --}}
@if (session('sukses'))
  <div class="mjl-alert mjl-alert--success" role="status">
    <div class="mjl-alert__content">
      <p class="mjl-alert__title">Berhasil</p>
      <p>{{ session('sukses') }}</p>
    </div>
  </div>
@endif

@if ($errors->any())
  <div class="mjl-alert mjl-alert--danger" role="alert">
    <div class="mjl-alert__content">
      <p class="mjl-alert__title">Periksa kembali isian Anda</p>
      <ul>@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
    </div>
  </div>
@endif

<?php session_start(); ?>
<?php if (!empty($_SESSION['pesan_sukses'])): ?>
  <div class="mjl-alert mjl-alert--success" role="status">
    <div class="mjl-alert__content">
      <p class="mjl-alert__title">Berhasil</p>
      <p><?= htmlspecialchars($_SESSION['pesan_sukses'], ENT_QUOTES, 'UTF-8') ?></p>
    </div>
  </div>
  <?php unset($_SESSION['pesan_sukses']); ?>
<?php endif; ?>