1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Типографикаtypographymetricscode

Monospace Metrics

Строка технической статистики с моноширинным шрифтом для консолей и метрик.

Monospace Metrics

Использование

Скопируйте и вставьте этот код в ваш React-компонент:

tsx
import { MonospaceStatLine } from 'react-component-kit-ui/typography';

<MonospaceStatLine>Content</MonospaceStatLine>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/MonospaceStatLine.tsx + MonospaceStatLine.css:

MonospaceStatLine.tsx
'use client';

import type { ReactNode } from 'react';
import './MonospaceStatLine.css';

/** MonospaceStatLine — ported from astro-component-kit. */
export interface MonospaceStatLineProps {
  children?: ReactNode;
}

export function MonospaceStatLine({ children }: MonospaceStatLineProps) {
  return (
    <>
      <div className="mono-stat" data-rk-f4a3f2="">{children}</div>
    </>
  );
}

export default MonospaceStatLine;
MonospaceStatLine.css
/* MonospaceStatLine — ported from astro-component-kit (typography/MonospaceStatLine.astro) */

.mono-stat:where([data-rk-f4a3f2]) { background: #000; color: #00ff00; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; padding: 0.75rem 1.25rem; border-left: 3px solid #00ff00; font-size: 0.8rem; border-radius: 4px; border: 1px solid rgba(0, 255, 0, 0.1); }

Краткая информация

Категория
Типографика
Имя файла
MonospaceStatLine.tsx
Зависимости
Нет — чистый React + CSS
Теги
typographymetricscode