Alkemy OpenDesign // Workspace Console

Moteur de rendu et previsualisation deterministe local-first
RUNSC // RING 0 SANDBOX
Workspace Files
Source: ComplianceSealBadge.jsx
import React from 'react';

export default function ComplianceSealBadge({
  sealId = 'WORM-2026-44BD8247',
  standard = 'EU AI ACT 2026 // ART. 50',
  retention = '90 JOURS IMMUABLE',
  sha256 = '2cbfa50abfc5d5dc06ec573d0a4a3b9c',
  status = 'VERROUILLÉ RING 0'
}) {
  return (
    <div style={{
      background: '#121214',
      border: '1px solid #27272A',
      borderRadius: '8px',
      padding: '24px',
      maxWidth: '440px',
      color: '#F4F4F5',
      fontFamily: 'Inter Tight, -apple-system, sans-serif'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <span style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#22C55E' }}></span>
          <span style={{ fontSize: '13px', fontWeight: 600, color: '#FFFFFF' }}>SCELLEMENT D'AUDIT LÉGAL</span>
        </div>
        <span style={{ fontSize: '10px', background: '#27272A', color: '#22C55E', padding: '3px 8px', borderRadius: '4px', fontFamily: 'Geist Mono, monospace' }}>
          {status}
        </span>
      </div>

      <div style={{ background: '#0A0A0B', border: '1px solid #27272A', padding: '14px', borderRadius: '6px', marginBottom: '16px' }}>
        <div style={{ fontSize: '10px', color: '#A1A1AA', textTransform: 'uppercase', marginBottom: '4px' }}>Standard de Conformité</div>
        <div style={{ fontSize: '14px', fontWeight: 600, color: '#FFFFFF', fontFamily: 'Geist Mono, monospace' }}>{standard}</div>
        <div style={{ fontSize: '11px', color: '#22C55E', marginTop: '4px', fontFamily: 'Geist Mono, monospace' }}>Régime de rétention : {retention}</div>
      </div>

      <div style={{ borderTop: '1px solid #27272A', paddingTop: '14px', marginBottom: '16px' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '11px', marginBottom: '6px' }}>
          <span style={{ color: '#A1A1AA' }}>Identifiant du Sceau :</span>
          <span style={{ color: '#FFFFFF', fontFamily: 'Geist Mono, monospace' }}>{sealId}</span>
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '11px' }}>
          <span style={{ color: '#A1A1AA' }}>Empreinte SHA-256 :</span>
          <span style={{ color: '#A1A1AA', fontFamily: 'Geist Mono, monospace' }}>{sha256.substring(0, 16)}...</span>
        </div>
      </div>

      <div style={{ background: 'rgba(34, 197, 94, 0.05)', border: '1px solid rgba(34, 197, 94, 0.2)', padding: '10px 12px', borderRadius: '6px', fontSize: '11px', color: '#A1A1AA', textAlign: 'center' }}>
        VALEUR PROBANTE CERTIFIÉE MINIO WORM
      </div>
    </div>
  );
}
Live Preview Sandbox