`app/components/glass/index.tsx`

18 lines
import React from "react";
export const GlassCard: React.FC<React.PropsWithChildren<{className?:string}>> = ({children,className=""}) =>
  <div className={`backdrop-blur-2xl bg-white/[0.06] border border-white/15 rounded-3xl shadow-2xl ${className}`}>{children}</div>;
export const LiquidButton: React.FC<React.PropsWithChildren<{onClick?:()=>void}>> = ({children,onClick}) =>
  <button onClick={onClick} className="px-5 py-2.5 rounded-full bg-gradient-to-br from-cyan-300/30 to-violet-400/30 backdrop-blur-xl border border-white/20 hover:scale-[1.02] transition">{children}</button>;
export const ConnectorTile: React.FC<{name:string;cat:string;status?:string}> = ({name,cat,status="pending"}) =>
  <div className="p-4 rounded-2xl bg-white/[0.08] border border-white/15 backdrop-blur-xl">
    <div className="text-[10px] uppercase tracking-widest opacity-60">{cat}</div>
    <div className="text-sm font-medium mt-1">{name}</div>
    <div className="text-[11px] mt-2 opacity-70">{status}</div>
  </div>;
export const ApprovalBadge: React.FC<{state:"pending"|"approved"|"rejected"}> = ({state}) =>
  <span className={`text-[10px] px-2 py-0.5 rounded-full ${state==="approved"?"bg-emerald-400/20 text-emerald-200":state==="rejected"?"bg-rose-400/20 text-rose-200":"bg-amber-400/20 text-amber-200"}`}>{state}</span>;
export const StatusOrb: React.FC<{state:"ok"|"warn"|"down"|"idle"}> = ({state}) => {
  const c = {ok:"bg-emerald-400",warn:"bg-amber-400",down:"bg-rose-400",idle:"bg-white/40"}[state];
  return <span className={`inline-block w-2.5 h-2.5 rounded-full ${c} shadow-lg`} />;
};