ccb0169622
- UI components: FAB (removed scale transforms), tabs (removed decorative shadow) - Upload components: FileUploadZone, MetadataEditor, BulkUploadModal (removed scale transforms and decorative gradient) - Search: SearchBar (removed decorative shadow) - PWA: PWAInstallBanner (removed decorative shadow) - Social: ExploreView (removed decorative shadow and image zoom) - Live: LiveStreamDetailView (removed decorative shadow) - Player: VisualizerSettingsModal (removed scale transform) - Marketplace: ReviewProductModal, ProductDetailView (removed scale transforms) - Library: PlaylistsView (removed scale transform) - Settings: AppearanceSettingsView (removed scale transform) - Theme: ThemeSwitcher (removed scale transform) - Studio: ProjectsManager, CloudFileBrowser (removed scale transforms) - Social: GroupCard (removed image zoom) - Seller: CreateProductView (removed scale transform) - Modals: CreatorModal (removed scale transform) - Replaced decorative scale transforms with subtle opacity changes or removed entirely - Action 11.5.1.6: Apply direction to all components - Batch 1 complete (17 components)
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-4',
|
|
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',
|
|
'active:opacity-80',
|
|
sizeClasses[size],
|
|
className,
|
|
)}
|
|
{...buttonProps}
|
|
>
|
|
{children}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|