mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-29 18:13:47 +00:00
feat: Linear-style UI redesign with improved mobile experience
Major changes: - Redesign cabinet with Linear-style components and top navigation - Replace detail modals with dedicated pages (users, broadcasts, email templates) - Add email channel support for broadcasts - Remove pull-to-refresh, improve drag-and-drop on touch devices - Fix Telegram Mini App: fullscreen, back button, scroll restoration - Unify admin pages color scheme to design system - Mobile-first improvements: horizontal tabs for settings, better touch targets
This commit is contained in:
c0mrade
@@ -1,5 +1,6 @@
|
||||
import { Link } from 'react-router-dom';
|
||||
import { forwardRef } from 'react';
|
||||
import { forwardRef, useCallback } from 'react';
|
||||
import { useHaptic } from '@/platform';
|
||||
|
||||
export type BentoSize = 'sm' | 'md' | 'lg' | 'xl';
|
||||
|
||||
@@ -63,6 +64,7 @@ const glowClasses = `
|
||||
|
||||
export const BentoCard = forwardRef<HTMLDivElement, BentoCardProps>((props, ref) => {
|
||||
const { size = 'sm', children, className = '', hover = false, glow = false } = props;
|
||||
const haptic = useHaptic();
|
||||
|
||||
const classes = [
|
||||
baseClasses,
|
||||
@@ -74,10 +76,27 @@ export const BentoCard = forwardRef<HTMLDivElement, BentoCardProps>((props, ref)
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
// Wrap click handlers to trigger haptic feedback when hover is enabled
|
||||
const withHaptic = useCallback(
|
||||
(onClick?: () => void) => {
|
||||
if (!hover || !onClick) return onClick;
|
||||
return () => {
|
||||
haptic.impact('light');
|
||||
onClick();
|
||||
};
|
||||
},
|
||||
[hover, haptic],
|
||||
);
|
||||
|
||||
if (props.as === 'link') {
|
||||
const { to, state } = props as BentoCardLinkProps;
|
||||
return (
|
||||
<Link to={to} state={state} className={classes}>
|
||||
<Link
|
||||
to={to}
|
||||
state={state}
|
||||
className={classes}
|
||||
onClick={hover ? () => haptic.impact('light') : undefined}
|
||||
>
|
||||
{children}
|
||||
</Link>
|
||||
);
|
||||
@@ -89,7 +108,7 @@ export const BentoCard = forwardRef<HTMLDivElement, BentoCardProps>((props, ref)
|
||||
<button
|
||||
ref={ref as React.Ref<HTMLButtonElement>}
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
onClick={withHaptic(onClick)}
|
||||
disabled={disabled}
|
||||
className={classes}
|
||||
>
|
||||
@@ -100,7 +119,7 @@ export const BentoCard = forwardRef<HTMLDivElement, BentoCardProps>((props, ref)
|
||||
|
||||
const { onClick } = props as BentoCardDivProps;
|
||||
return (
|
||||
<div ref={ref} onClick={onClick} className={classes}>
|
||||
<div ref={ref} onClick={withHaptic(onClick)} className={classes}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
396
src/components/ui/Sheet.tsx
Normal file
396
src/components/ui/Sheet.tsx
Normal file
@@ -0,0 +1,396 @@
|
||||
import { useEffect, useRef, useCallback, useState, type ReactNode } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { useBackButton } from '@/platform';
|
||||
import { useHaptic } from '@/platform';
|
||||
|
||||
export interface SheetProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
/**
|
||||
* Snap points as fractions of viewport height (0-1)
|
||||
* @default [1] - Full height
|
||||
*/
|
||||
snapPoints?: number[];
|
||||
/**
|
||||
* Initial snap point index
|
||||
* @default 0
|
||||
*/
|
||||
initialSnap?: number;
|
||||
/**
|
||||
* Whether to close when dragged below threshold
|
||||
* @default true
|
||||
*/
|
||||
closeOnDragDown?: boolean;
|
||||
/**
|
||||
* Threshold to close (fraction of sheet height)
|
||||
* @default 0.3
|
||||
*/
|
||||
closeThreshold?: number;
|
||||
/**
|
||||
* Whether to show drag handle
|
||||
* @default true
|
||||
*/
|
||||
showHandle?: boolean;
|
||||
/**
|
||||
* Whether backdrop click closes sheet
|
||||
* @default true
|
||||
*/
|
||||
closeOnBackdropClick?: boolean;
|
||||
/**
|
||||
* Whether Escape key closes sheet
|
||||
* @default true
|
||||
*/
|
||||
closeOnEscape?: boolean;
|
||||
/**
|
||||
* Custom class for the sheet container
|
||||
*/
|
||||
className?: string;
|
||||
/**
|
||||
* Custom class for the content area
|
||||
*/
|
||||
contentClassName?: string;
|
||||
/**
|
||||
* Title shown in the header
|
||||
*/
|
||||
title?: string;
|
||||
/**
|
||||
* Children content
|
||||
*/
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
interface DragState {
|
||||
startY: number;
|
||||
currentY: number;
|
||||
startHeight: number;
|
||||
isDragging: boolean;
|
||||
velocity: number;
|
||||
lastY: number;
|
||||
lastTime: number;
|
||||
}
|
||||
|
||||
const VELOCITY_THRESHOLD = 0.5; // px/ms - fast swipe closes regardless of position
|
||||
const ANIMATION_DURATION = 300;
|
||||
|
||||
export function Sheet({
|
||||
isOpen,
|
||||
onClose,
|
||||
snapPoints = [1],
|
||||
initialSnap = 0,
|
||||
closeOnDragDown = true,
|
||||
closeThreshold = 0.3,
|
||||
showHandle = true,
|
||||
closeOnBackdropClick = true,
|
||||
closeOnEscape = true,
|
||||
className = '',
|
||||
contentClassName = '',
|
||||
title,
|
||||
children,
|
||||
}: SheetProps) {
|
||||
const sheetRef = useRef<HTMLDivElement>(null);
|
||||
const dragState = useRef<DragState>({
|
||||
startY: 0,
|
||||
currentY: 0,
|
||||
startHeight: 0,
|
||||
isDragging: false,
|
||||
velocity: 0,
|
||||
lastY: 0,
|
||||
lastTime: 0,
|
||||
});
|
||||
|
||||
const [currentSnapIndex, setCurrentSnapIndex] = useState(initialSnap);
|
||||
const [isAnimating, setIsAnimating] = useState(false);
|
||||
const [translateY, setTranslateY] = useState(0);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
const haptic = useHaptic();
|
||||
|
||||
// BackButton integration
|
||||
useBackButton(isOpen ? onClose : null);
|
||||
|
||||
// Calculate current height based on snap point
|
||||
const currentHeight = `${snapPoints[currentSnapIndex] * 100}vh`;
|
||||
|
||||
// Handle keyboard events
|
||||
useEffect(() => {
|
||||
if (!isOpen || !closeOnEscape) return;
|
||||
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
e.preventDefault();
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, [isOpen, closeOnEscape, onClose]);
|
||||
|
||||
// Handle body scroll lock
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
const scrollY = window.scrollY;
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.body.style.position = 'fixed';
|
||||
document.body.style.top = `-${scrollY}px`;
|
||||
document.body.style.width = '100%';
|
||||
|
||||
return () => {
|
||||
document.body.style.overflow = '';
|
||||
document.body.style.position = '';
|
||||
document.body.style.top = '';
|
||||
document.body.style.width = '';
|
||||
window.scrollTo(0, scrollY);
|
||||
};
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// Animation on open/close
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
// Small delay to ensure portal is mounted
|
||||
requestAnimationFrame(() => {
|
||||
setIsVisible(true);
|
||||
});
|
||||
} else {
|
||||
setIsVisible(false);
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
// Find closest snap point
|
||||
const findClosestSnap = useCallback(
|
||||
(currentTranslate: number, velocity: number): number => {
|
||||
const viewportHeight = window.innerHeight;
|
||||
const sheetHeight = sheetRef.current?.offsetHeight ?? viewportHeight;
|
||||
|
||||
// If velocity is high enough, snap in direction of movement
|
||||
if (Math.abs(velocity) > VELOCITY_THRESHOLD) {
|
||||
if (velocity > 0) {
|
||||
// Swiping down - go to lower snap or close
|
||||
if (closeOnDragDown && currentTranslate > sheetHeight * 0.1) {
|
||||
return -1; // Close
|
||||
}
|
||||
return Math.min(currentSnapIndex + 1, snapPoints.length - 1);
|
||||
} else {
|
||||
// Swiping up - go to higher snap
|
||||
return Math.max(currentSnapIndex - 1, 0);
|
||||
}
|
||||
}
|
||||
|
||||
// Otherwise, find closest snap based on position
|
||||
const currentPosition = currentTranslate / viewportHeight;
|
||||
|
||||
// Check if should close
|
||||
if (closeOnDragDown && currentPosition > closeThreshold) {
|
||||
return -1; // Close
|
||||
}
|
||||
|
||||
// Find closest snap point
|
||||
let closestIndex = currentSnapIndex;
|
||||
let minDistance = Infinity;
|
||||
|
||||
snapPoints.forEach((snap, index) => {
|
||||
const snapPosition = (1 - snap) * viewportHeight;
|
||||
const distance = Math.abs(currentTranslate - snapPosition);
|
||||
if (distance < minDistance) {
|
||||
minDistance = distance;
|
||||
closestIndex = index;
|
||||
}
|
||||
});
|
||||
|
||||
return closestIndex;
|
||||
},
|
||||
[currentSnapIndex, snapPoints, closeOnDragDown, closeThreshold],
|
||||
);
|
||||
|
||||
// Handle drag start
|
||||
const handleDragStart = useCallback(
|
||||
(clientY: number) => {
|
||||
if (isAnimating) return;
|
||||
|
||||
const state = dragState.current;
|
||||
state.startY = clientY;
|
||||
state.currentY = clientY;
|
||||
state.startHeight = sheetRef.current?.offsetHeight ?? 0;
|
||||
state.isDragging = true;
|
||||
state.velocity = 0;
|
||||
state.lastY = clientY;
|
||||
state.lastTime = Date.now();
|
||||
},
|
||||
[isAnimating],
|
||||
);
|
||||
|
||||
// Handle drag move
|
||||
const handleDragMove = useCallback((clientY: number) => {
|
||||
const state = dragState.current;
|
||||
if (!state.isDragging) return;
|
||||
|
||||
const deltaY = clientY - state.startY;
|
||||
const now = Date.now();
|
||||
const timeDelta = now - state.lastTime;
|
||||
|
||||
// Calculate velocity
|
||||
if (timeDelta > 0) {
|
||||
state.velocity = (clientY - state.lastY) / timeDelta;
|
||||
}
|
||||
|
||||
state.lastY = clientY;
|
||||
state.lastTime = now;
|
||||
state.currentY = clientY;
|
||||
|
||||
// Only allow dragging down (positive translateY)
|
||||
const newTranslateY = Math.max(0, deltaY);
|
||||
setTranslateY(newTranslateY);
|
||||
}, []);
|
||||
|
||||
// Handle drag end
|
||||
const handleDragEnd = useCallback(() => {
|
||||
const state = dragState.current;
|
||||
if (!state.isDragging) return;
|
||||
|
||||
state.isDragging = false;
|
||||
setIsAnimating(true);
|
||||
|
||||
const targetSnap = findClosestSnap(translateY, state.velocity);
|
||||
|
||||
if (targetSnap === -1) {
|
||||
// Close the sheet
|
||||
haptic.notification('warning');
|
||||
setTranslateY(window.innerHeight);
|
||||
setTimeout(() => {
|
||||
onClose();
|
||||
setTranslateY(0);
|
||||
setIsAnimating(false);
|
||||
}, ANIMATION_DURATION);
|
||||
} else {
|
||||
// Snap to position
|
||||
if (targetSnap !== currentSnapIndex) {
|
||||
haptic.impact('light');
|
||||
}
|
||||
setCurrentSnapIndex(targetSnap);
|
||||
setTranslateY(0);
|
||||
setTimeout(() => {
|
||||
setIsAnimating(false);
|
||||
}, ANIMATION_DURATION);
|
||||
}
|
||||
}, [translateY, findClosestSnap, currentSnapIndex, haptic, onClose]);
|
||||
|
||||
// Touch event handlers
|
||||
const handleTouchStart = useCallback(
|
||||
(e: React.TouchEvent) => {
|
||||
handleDragStart(e.touches[0].clientY);
|
||||
},
|
||||
[handleDragStart],
|
||||
);
|
||||
|
||||
const handleTouchMove = useCallback(
|
||||
(e: React.TouchEvent) => {
|
||||
handleDragMove(e.touches[0].clientY);
|
||||
},
|
||||
[handleDragMove],
|
||||
);
|
||||
|
||||
const handleTouchEnd = useCallback(() => {
|
||||
handleDragEnd();
|
||||
}, [handleDragEnd]);
|
||||
|
||||
// Mouse event handlers (for desktop)
|
||||
const handleMouseDown = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
handleDragStart(e.clientY);
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
handleDragMove(e.clientY);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
handleDragEnd();
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
},
|
||||
[handleDragStart, handleDragMove, handleDragEnd],
|
||||
);
|
||||
|
||||
// Backdrop click handler
|
||||
const handleBackdropClick = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
if (closeOnBackdropClick && e.target === e.currentTarget) {
|
||||
haptic.impact('light');
|
||||
onClose();
|
||||
}
|
||||
},
|
||||
[closeOnBackdropClick, haptic, onClose],
|
||||
);
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
const sheet = (
|
||||
<div
|
||||
className={`fixed inset-0 z-50 flex items-end justify-center ${
|
||||
isVisible ? 'opacity-100' : 'opacity-0'
|
||||
} transition-opacity duration-300`}
|
||||
onClick={handleBackdropClick}
|
||||
>
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className={`absolute inset-0 bg-black/60 backdrop-blur-sm transition-opacity duration-300 ${
|
||||
isVisible ? 'opacity-100' : 'opacity-0'
|
||||
}`}
|
||||
/>
|
||||
|
||||
{/* Sheet */}
|
||||
<div
|
||||
ref={sheetRef}
|
||||
className={`relative w-full max-w-lg overflow-hidden rounded-t-3xl bg-dark-900 shadow-2xl ${
|
||||
isAnimating ? 'transition-transform duration-300 ease-out' : ''
|
||||
} ${isVisible ? 'translate-y-0' : 'translate-y-full'} ${className}`}
|
||||
style={{
|
||||
maxHeight: currentHeight,
|
||||
transform: `translateY(${isVisible ? translateY : '100%'}px)`,
|
||||
paddingBottom: 'env(safe-area-inset-bottom)',
|
||||
}}
|
||||
>
|
||||
{/* Drag handle area */}
|
||||
{showHandle && (
|
||||
<div
|
||||
className="flex cursor-grab touch-none items-center justify-center py-3 active:cursor-grabbing"
|
||||
onTouchStart={handleTouchStart}
|
||||
onTouchMove={handleTouchMove}
|
||||
onTouchEnd={handleTouchEnd}
|
||||
onMouseDown={handleMouseDown}
|
||||
>
|
||||
<div className="h-1 w-10 rounded-full bg-dark-600" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Title */}
|
||||
{title && (
|
||||
<div className="border-b border-dark-700/50 px-6 pb-4">
|
||||
<h2 className="text-lg font-semibold text-dark-100">{title}</h2>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<div
|
||||
className={`overflow-y-auto overscroll-contain ${contentClassName}`}
|
||||
style={{
|
||||
maxHeight: `calc(${currentHeight} - ${showHandle ? '44px' : '0px'} - ${title ? '60px' : '0px'})`,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return createPortal(sheet, document.body);
|
||||
}
|
||||
|
||||
// Light theme styles applied via CSS
|
||||
// Add to globals.css:
|
||||
// .light .sheet-backdrop { @apply bg-black/40; }
|
||||
// .light .sheet-container { @apply bg-champagne-100; }
|
||||
199
src/components/ui/Skeleton.tsx
Normal file
199
src/components/ui/Skeleton.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
import { type CSSProperties } from 'react';
|
||||
|
||||
export type SkeletonVariant = 'text' | 'avatar' | 'card' | 'list' | 'bento';
|
||||
|
||||
export interface SkeletonProps {
|
||||
/**
|
||||
* Variant of skeleton
|
||||
* - text: Single line of text
|
||||
* - avatar: Circular avatar
|
||||
* - card: Full card with header and content
|
||||
* - list: Multiple list items
|
||||
* - bento: Bento card style (original BentoSkeleton)
|
||||
*/
|
||||
variant?: SkeletonVariant;
|
||||
/**
|
||||
* Number of skeleton items to render
|
||||
*/
|
||||
count?: number;
|
||||
/**
|
||||
* Width (for text variant)
|
||||
*/
|
||||
width?: string | number;
|
||||
/**
|
||||
* Height (for custom sizing)
|
||||
*/
|
||||
height?: string | number;
|
||||
/**
|
||||
* Additional CSS classes
|
||||
*/
|
||||
className?: string;
|
||||
/**
|
||||
* Whether to animate
|
||||
* @default true
|
||||
*/
|
||||
animate?: boolean;
|
||||
}
|
||||
|
||||
const baseClasses = 'bg-dark-800/50 rounded';
|
||||
const animateClasses = 'animate-pulse';
|
||||
|
||||
export function Skeleton({
|
||||
variant = 'text',
|
||||
count = 1,
|
||||
width,
|
||||
height,
|
||||
className = '',
|
||||
animate = true,
|
||||
}: SkeletonProps) {
|
||||
const animation = animate ? animateClasses : '';
|
||||
|
||||
const renderSkeleton = (index: number) => {
|
||||
const style: CSSProperties = {
|
||||
'--stagger': index,
|
||||
width: width,
|
||||
height: height,
|
||||
} as CSSProperties;
|
||||
|
||||
switch (variant) {
|
||||
case 'text':
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`${baseClasses} ${animation} h-4 ${className}`}
|
||||
style={{ ...style, width: width ?? '100%' }}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'avatar':
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`${baseClasses} ${animation} rounded-full ${className}`}
|
||||
style={{ ...style, width: width ?? 40, height: height ?? 40 }}
|
||||
/>
|
||||
);
|
||||
|
||||
case 'card':
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`${baseClasses} ${animation} rounded-[var(--bento-radius,24px)] border border-dark-700/30 p-4 ${className}`}
|
||||
style={style}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<div className="h-10 w-10 rounded-full bg-dark-700/50" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-4 w-3/4 rounded bg-dark-700/50" />
|
||||
<div className="h-3 w-1/2 rounded bg-dark-700/50" />
|
||||
</div>
|
||||
</div>
|
||||
{/* Content */}
|
||||
<div className="space-y-2">
|
||||
<div className="h-3 w-full rounded bg-dark-700/50" />
|
||||
<div className="h-3 w-5/6 rounded bg-dark-700/50" />
|
||||
<div className="h-3 w-4/6 rounded bg-dark-700/50" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'list':
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`${baseClasses} ${animation} flex items-center gap-3 p-3 ${className}`}
|
||||
style={style}
|
||||
>
|
||||
<div className="h-10 w-10 shrink-0 rounded-lg bg-dark-700/50" />
|
||||
<div className="flex-1 space-y-2">
|
||||
<div className="h-4 w-3/4 rounded bg-dark-700/50" />
|
||||
<div className="h-3 w-1/2 rounded bg-dark-700/50" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
case 'bento':
|
||||
default:
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`${baseClasses} ${animation} min-h-[160px] w-full rounded-[var(--bento-radius,24px)] border border-dark-700/30 ${className}`}
|
||||
style={style}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
if (count > 1) {
|
||||
return <>{Array.from({ length: count }).map((_, i) => renderSkeleton(i))}</>;
|
||||
}
|
||||
|
||||
return renderSkeleton(0);
|
||||
}
|
||||
|
||||
// Convenience components for common use cases
|
||||
export function TextSkeleton({
|
||||
lines = 1,
|
||||
className = '',
|
||||
lastLineWidth = '60%',
|
||||
}: {
|
||||
lines?: number;
|
||||
className?: string;
|
||||
lastLineWidth?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={`space-y-2 ${className}`}>
|
||||
{Array.from({ length: lines }).map((_, i) => (
|
||||
<Skeleton key={i} variant="text" width={i === lines - 1 ? lastLineWidth : '100%'} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function AvatarSkeleton({
|
||||
size = 40,
|
||||
className = '',
|
||||
}: {
|
||||
size?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
return <Skeleton variant="avatar" width={size} height={size} className={className} />;
|
||||
}
|
||||
|
||||
export function CardSkeleton({
|
||||
count = 1,
|
||||
className = '',
|
||||
}: {
|
||||
count?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
return <Skeleton variant="card" count={count} className={className} />;
|
||||
}
|
||||
|
||||
export function ListSkeleton({
|
||||
count = 3,
|
||||
className = '',
|
||||
}: {
|
||||
count?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={`space-y-2 ${className}`}>
|
||||
<Skeleton variant="list" count={count} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function BentoSkeleton({
|
||||
count = 1,
|
||||
className = '',
|
||||
}: {
|
||||
count?: number;
|
||||
className?: string;
|
||||
}) {
|
||||
return <Skeleton variant="bento" count={count} className={className} />;
|
||||
}
|
||||
|
||||
// Default export for backwards compatibility
|
||||
export default BentoSkeleton;
|
||||
Reference in New Issue
Block a user