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

Поставить звезду
Навигация retronavigationgame

Retro Arcade Menu

Ретро-меню в стиле аркадных игр с пиксельным шрифтом и неоновым маркером.

▶ LOAD GAME
OPTIONS
EXIT

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

Скопируйте и вставьте этот код на вашу страницу Astro:

astro 
---
import { RetroArcadeMenu } from 'astro-component-kit';
---

<RetroArcadeMenu>Content</RetroArcadeMenu>
--- import { RetroArcadeMenu } from 'astro-component-kit'; --- <RetroArcadeMenu>Content</RetroArcadeMenu>

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

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

astro 
---
---
<div class="retro-menu">
  <div class="item selected">▶ LOAD GAME</div>
  <div class="item">OPTIONS</div>
  <div class="item">EXIT</div>
</div>
<style>
  .retro-menu { background: #000; border: 4px solid #fff; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; width: fit-content; }
  .item { font-family: 'Courier New', monospace; font-weight: 900; color: #fff; font-size: 1.2rem; cursor: pointer; }
  .item.selected { color: #facc15; }
</style>
--- --- <div class="retro-menu"> <div class="item selected">▶ LOAD GAME</div> <div class="item">OPTIONS</div> <div class="item">EXIT</div> </div> <style> .retro-menu { background: #000; border: 4px solid #fff; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; width: fit-content; } .item { font-family: 'Courier New', monospace; font-weight: 900; color: #fff; font-size: 1.2rem; cursor: pointer; } .item.selected { color: #facc15; } </style>

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

Категория
Навигация
Имя файла
RetroArcadeMenu.astro
Зависимости
Нет — чистый Astro + CSS
Теги
retronavigationgame