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

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

Inline Code (Glass)

Строчный фрагмент кода с полупрозрачным фоном, рамкой и моноширинным шрифтом.

Inline Code (Glass)

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

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

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

<CodeInlineGlass>Content</CodeInlineGlass>

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

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

CodeInlineGlass.tsx
'use client';

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

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

export function CodeInlineGlass({ children }: CodeInlineGlassProps) {
  return (
    <>
      <code className="glass-code" data-rk-8ec09e="">{children}</code>
    </>
  );
}

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

.glass-code:where([data-rk-8ec09e]) { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); padding: 0.2rem 0.4rem; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; color: #e2e8f0; font-size: 0.9em; }

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

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