f8655ebaed
- Removed neon, glass, premium, and link variants from Button component - Replaced variant="link" in PostCard with variant="ghost" (with underline) - Replaced variant="premium" in LibraryPage and FAB with variant="default" - Updated COMPONENT_USAGE.md to reflect removed variants - Remaining variants: default, destructive, outline, secondary, ghost - Action 9.3.1.2 complete
113 lines
2.5 KiB
TypeScript
113 lines
2.5 KiB
TypeScript
import * as React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
import { Button, ButtonProps } from './button';
|
|
|
|
export interface FABProps extends Omit<ButtonProps, 'size' | 'variant'> {
|
|
/**
|
|
* Position of the FAB on the screen
|
|
* @default 'bottom-right'
|
|
*/
|
|
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
|
|
|
|
/**
|
|
* Size of the FAB
|
|
* @default 'lg'
|
|
*/
|
|
size?: 'sm' | 'md' | 'lg';
|
|
|
|
/**
|
|
* Whether to show a label next to the FAB
|
|
* @default false
|
|
*/
|
|
showLabel?: boolean;
|
|
|
|
/**
|
|
* Label text (only shown if showLabel is true)
|
|
*/
|
|
label?: string;
|
|
|
|
/**
|
|
* Additional CSS classes for the container
|
|
*/
|
|
containerClassName?: string;
|
|
}
|
|
|
|
const positionClasses = {
|
|
'bottom-right': 'bottom-6 right-6',
|
|
'bottom-left': 'bottom-6 left-6',
|
|
'top-right': 'top-6 right-6',
|
|
'top-left': 'top-6 left-6',
|
|
};
|
|
|
|
const sizeClasses = {
|
|
sm: 'h-12 w-12 text-base',
|
|
md: 'h-14 w-14 text-lg',
|
|
lg: 'h-16 w-16 text-xl',
|
|
};
|
|
|
|
/**
|
|
* FAB (Floating Action Button) - Floating action button component
|
|
*
|
|
* A prominent floating button that appears fixed on the screen, typically
|
|
* used for primary actions like upload, create, or add.
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <FAB onClick={() => handleUpload()}>
|
|
* <Plus className="w-6 h-6" />
|
|
* </FAB>
|
|
* ```
|
|
*
|
|
* @example
|
|
* ```tsx
|
|
* <FAB
|
|
* position="bottom-right"
|
|
* size="lg"
|
|
* showLabel
|
|
* label="Upload Track"
|
|
* onClick={() => navigate('/upload')}
|
|
* >
|
|
* <Upload className="w-6 h-6" />
|
|
* </FAB>
|
|
* ```
|
|
*/
|
|
export function FAB({
|
|
position = 'bottom-right',
|
|
size = 'lg',
|
|
showLabel = false,
|
|
label,
|
|
className,
|
|
containerClassName,
|
|
children,
|
|
...buttonProps
|
|
}: FABProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'fixed z-50 flex items-center gap-3',
|
|
positionClasses[position],
|
|
containerClassName,
|
|
)}
|
|
>
|
|
{showLabel && label && (
|
|
<span className="text-sm font-semibold text-white bg-kodo-ink/90 backdrop-blur-md px-4 py-2 rounded-lg border border-white/10 shadow-lg whitespace-nowrap">
|
|
{label}
|
|
</span>
|
|
)}
|
|
<Button
|
|
variant="default"
|
|
className={cn(
|
|
'rounded-full aspect-square p-0',
|
|
'shadow-[0_0_30px_rgba(102,252,241,0.5)] hover:shadow-[0_0_40px_rgba(102,252,241,0.7)]',
|
|
'transition-all duration-300',
|
|
'hover:scale-110 active:scale-95',
|
|
sizeClasses[size],
|
|
className,
|
|
)}
|
|
{...buttonProps}
|
|
>
|
|
{children}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|