1<template>
  2  <div class="card">
  3    <div class="icon">{{ pluginIcon }}</div>
  4    <h3 class="cardTitle">{{ plugin.title }}</h3>
  5    <p class="cardDescription">{{ plugin.description }}</p>
  6    <div class="installBox">
  7      <div class="installRow">
  8        <code class="installCommand">{{ cmd }}</code>
  9        <CopyButton :text="cmd" />
 10      </div>
 11    </div>
 12  </div>
 13</template>
 14
 15<script setup>
 16import { computed } from "vue";
 17import CopyButton from "./CopyButton.vue";
 18
 19const props = defineProps({
 20  plugin: {
 21    type: Object,
 22    required: true,
 23  },
 24});
 25
 26const RAW_BASE =
 27  "https://raw.githubusercontent.com/floatpane/matcha/master/plugins/";
 28
 29const pluginUrl = computed(() => props.plugin.url || `${RAW_BASE}${props.plugin.file}`);
 30const cmd = computed(() => `matcha install ${pluginUrl.value}`);
 31const pluginIcon = computed(() => props.plugin.title.charAt(0).toUpperCase());
 32</script>
 33
 34<style scoped>
 35.card {
 36  border: 1px solid var(--border);
 37  border-radius: 16px;
 38  padding: 1.5rem;
 39  background: var(--vp-c-bg);
 40  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
 41  display: flex;
 42  flex-direction: column;
 43}
 44
 45.card:hover {
 46  border-color: var(--accent);
 47  box-shadow: 0 8px 30px rgba(74, 222, 128, 0.12);
 48  transform: translateY(-2px);
 49}
 50
 51.icon {
 52  width: 44px;
 53  height: 44px;
 54  border-radius: 10px;
 55  background: linear-gradient(135deg, rgba(74, 222, 128, 0.2), rgba(34, 197, 94, 0.15));
 56  color: var(--accent);
 57  display: flex;
 58  align-items: center;
 59  justify-content: center;
 60  font-weight: 700;
 61  font-size: 1.1rem;
 62  margin-bottom: 1rem;
 63}
 64
 65.cardTitle {
 66  font-size: 1.15rem;
 67  font-weight: 600;
 68  color: var(--text);
 69  margin: 0 0 0.5rem 0;
 70}
 71
 72.cardDescription {
 73  color: var(--muted);
 74  font-size: 0.9rem;
 75  margin-bottom: 1.25rem;
 76  line-height: 1.5;
 77  flex: 1;
 78}
 79
 80.installBox {
 81  background: var(--code-bg);
 82  border-radius: 10px;
 83  padding: 0.75rem;
 84}
 85
 86.installRow {
 87  display: flex;
 88  align-items: center;
 89  gap: 0.5rem;
 90}
 91
 92.installCommand {
 93  background: transparent;
 94  border-radius: 6px;
 95  padding: 0.25rem 0;
 96  font-family: var(--font-mono);
 97  font-size: 0.75rem;
 98  overflow-x: auto;
 99  white-space: nowrap;
100  color: var(--text);
101  flex: 1;
102  min-width: 0;
103}
104</style>