51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Text } from './Text';
|
|
|
|
interface FeatureQuoteProps {
|
|
children: string;
|
|
intent?: 'primary' | 'aqua' | 'amber' | 'low';
|
|
}
|
|
|
|
/**
|
|
* FeatureQuote - A semantic quote component for features.
|
|
*/
|
|
export function FeatureQuote({ children, intent = 'primary' }: FeatureQuoteProps) {
|
|
const borderColor = {
|
|
primary: 'var(--ui-color-intent-primary)',
|
|
aqua: 'var(--ui-color-intent-telemetry)',
|
|
amber: 'var(--ui-color-intent-warning)',
|
|
low: 'var(--ui-color-border-default)',
|
|
}[intent];
|
|
|
|
const bgColor = {
|
|
primary: 'rgba(25, 140, 255, 0.05)',
|
|
aqua: 'rgba(78, 212, 224, 0.05)',
|
|
amber: 'rgba(255, 190, 77, 0.05)',
|
|
low: 'rgba(255, 255, 255, 0.02)',
|
|
}[intent];
|
|
|
|
return (
|
|
<Box
|
|
borderLeft
|
|
borderStyle="solid"
|
|
borderWidth="2px"
|
|
borderColor={borderColor}
|
|
paddingLeft={4}
|
|
paddingY={2}
|
|
bg={bgColor}
|
|
>
|
|
<Text
|
|
variant="low"
|
|
font="mono"
|
|
size="xs"
|
|
uppercase
|
|
letterSpacing="widest"
|
|
leading="relaxed"
|
|
>
|
|
{children}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
}
|