feat: inisialisasi project kit v2

2026-05-21 15:57:29 +07:00
commit d4fd478e1f
271 changed files with 35300 additions and 0 deletions
@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface AlertProps {
+    type?: 'info' | 'danger' | 'warning' | 'success';
+    title: string;
+    message: string;
+    className?: string;
+}
+
+export function Alert({ type = 'info', title, message, className = '' }: AlertProps) {
+    const styles = {
+        info: 'bg-[#E3EBE8]/50 border-gray-200 text-[#3D4E4B]',
+        danger: 'bg-red-50 border-red-100 text-red-700',
+        warning: 'bg-amber-50 border-amber-100 text-amber-800',
+        success: 'bg-teal-50 border-teal-100 text-teal-800'
+    };
+
+    const icons = {
+        info: <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>,
+        danger: <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>,
+        warning: <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>,
+        success: <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}><path strokeLinecap="round" strokeLinejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+    };
+
+    return (
+        <div className={`p-4 rounded-2xl border flex gap-4 items-start anim-fade font-sans ${styles[type]} ${className}`}>
+            <div className={`shrink-0 mt-0.5 ${type === 'info' ? 'text-[#D4A017]' : ''}`}>{icons[type]}</div>
+            <div>
+                <h4 className="text-sm font-bold tracking-tight leading-tight">{title}</h4>
+                <p className="text-xs font-semibold mt-1 leading-relaxed opacity-70 tracking-tight">{message}</p>
+            </div>
+        </div>
+    );
+}