27 lines
772 B
TypeScript
27 lines
772 B
TypeScript
import React from 'react';
|
|
|
|
interface VerticalBarProps {
|
|
intent?: 'primary' | 'secondary' | 'success' | 'warning' | 'critical';
|
|
height?: string | number;
|
|
}
|
|
|
|
/**
|
|
* VerticalBar - A semantic decorative bar.
|
|
*/
|
|
export function VerticalBar({ intent = 'primary', height = '2rem' }: VerticalBarProps) {
|
|
const intentClasses = {
|
|
primary: 'bg-[var(--ui-color-intent-primary)]',
|
|
secondary: 'bg-[var(--ui-color-intent-secondary)]',
|
|
success: 'bg-[var(--ui-color-intent-success)]',
|
|
warning: 'bg-[var(--ui-color-intent-warning)]',
|
|
critical: 'bg-[var(--ui-color-intent-critical)]',
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`w-1 ${intentClasses[intent]}`}
|
|
style={{ height: typeof height === 'number' ? `${height * 0.25}rem` : height }}
|
|
/>
|
|
);
|
|
}
|