2405ac279d
- Add formatTimeAgo utility function for relative time display - Show "Published X ago" at bottom of each tool card using npmPublishedAt - Center CodeBlock copy button vertically for better alignment - Update Tool interface to include npmPublishedAt from API
85 lines
1.6 KiB
TypeScript
85 lines
1.6 KiB
TypeScript
import { createVariants } from '../system/variants';
|
|
|
|
/**
|
|
* CodeBlock container variant definitions
|
|
*/
|
|
export const codeBlockContainerVariants = createVariants({
|
|
base: [
|
|
// Layout
|
|
'relative',
|
|
// Background
|
|
'bg-background',
|
|
// Border
|
|
'border border-border rounded-lg',
|
|
// Overflow
|
|
'overflow-hidden',
|
|
].join(' '),
|
|
|
|
variants: {},
|
|
|
|
compoundVariants: [],
|
|
|
|
defaultVariants: {},
|
|
});
|
|
|
|
/**
|
|
* CodeBlock code element variant definitions
|
|
*/
|
|
export const codeBlockCodeVariants = createVariants({
|
|
base: [
|
|
// Display
|
|
'block',
|
|
// Font
|
|
'font-mono',
|
|
// Color
|
|
'text-foreground-secondary',
|
|
// Overflow
|
|
'overflow-x-auto',
|
|
// Whitespace
|
|
'whitespace-pre',
|
|
].join(' '),
|
|
|
|
variants: {
|
|
size: {
|
|
sm: 'text-xs p-3', // 12px font, 12px padding
|
|
md: 'text-sm p-4', // 14px font, 16px padding
|
|
lg: 'text-base p-6', // 16px font, 24px padding
|
|
},
|
|
},
|
|
|
|
compoundVariants: [],
|
|
|
|
defaultVariants: {
|
|
size: 'md',
|
|
},
|
|
});
|
|
|
|
/**
|
|
* CodeBlock copy button variant definitions
|
|
*/
|
|
export const codeBlockCopyButtonVariants = createVariants({
|
|
base: [
|
|
// Position - vertically centered on right side
|
|
'absolute right-2 top-1/2 -translate-y-1/2',
|
|
// Display
|
|
'flex items-center justify-center',
|
|
// Size
|
|
'w-7 h-7',
|
|
// Background
|
|
'bg-surface-elevated hover:bg-accent',
|
|
// Border
|
|
'border border-border rounded',
|
|
// Color
|
|
'text-foreground-secondary hover:text-foreground',
|
|
// Cursor
|
|
'cursor-pointer',
|
|
// Transition
|
|
'transition-colors duration-200',
|
|
].join(' '),
|
|
|
|
variants: {},
|
|
|
|
compoundVariants: [],
|
|
|
|
defaultVariants: {},
|
|
});
|