58 lines
1.6 KiB
TypeScript
58 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { motion, type HTMLMotionProps } from 'framer-motion';
|
|
import { ZapOff } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export type DemoReadOnlyNoticeProps = {
|
|
title: string;
|
|
copy: string;
|
|
hint?: string;
|
|
ctaLabel?: string;
|
|
onCta?: () => void;
|
|
radius?: number;
|
|
bodyFont?: string;
|
|
motionProps?: HTMLMotionProps<'div'>;
|
|
};
|
|
|
|
export default function DemoReadOnlyNotice({
|
|
title,
|
|
copy,
|
|
hint,
|
|
ctaLabel,
|
|
onCta,
|
|
radius,
|
|
bodyFont,
|
|
motionProps,
|
|
}: DemoReadOnlyNoticeProps) {
|
|
return (
|
|
<motion.div
|
|
className="rounded-[28px] border border-white/15 bg-black/70 p-5 text-white shadow-2xl backdrop-blur"
|
|
style={{ borderRadius: radius, fontFamily: bodyFont }}
|
|
{...motionProps}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-white/10">
|
|
<ZapOff className="h-5 w-5 text-amber-200" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-semibold">{title}</p>
|
|
<p className="text-xs text-white/80">{copy}</p>
|
|
{hint ? <p className="text-[11px] text-white/60">{hint}</p> : null}
|
|
</div>
|
|
</div>
|
|
{ctaLabel && onCta ? (
|
|
<div className="mt-4 flex flex-wrap gap-3">
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
className="rounded-full bg-white/90 text-slate-900 hover:bg-white"
|
|
onClick={onCta}
|
|
>
|
|
{ctaLabel}
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</motion.div>
|
|
);
|
|
}
|