Refactor app architecture and clean local artifacts
This commit is contained in:
AzuTear
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<Card id="content-socials" class="p-6">
|
||||
<div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-[0.24em] text-violet-500">Community</p>
|
||||
<h2 class="mt-1 text-xl font-bold text-slate-900">Social Links</h2>
|
||||
<p class="mt-2 text-sm leading-6 text-slate-500">Plattform, Label und URL werden auf der Landingpage als Social Icons angezeigt.</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-2 sm:justify-end">
|
||||
<Button variant="ghost" size="sm" class="gap-2 rounded-2xl border border-violet-200 bg-violet-50 px-4 text-violet-700 shadow-none hover:bg-violet-100" @click="addSocialLink">
|
||||
<Plus class="h-4 w-4" />
|
||||
Link hinzufügen
|
||||
</Button>
|
||||
<Button :disabled="saving" size="sm" class="gap-2 rounded-2xl bg-gradient-to-r from-violet-600 to-fuchsia-500 shadow-violet-500/20" @click="onSave">
|
||||
<Save class="h-4 w-4" />
|
||||
{{ saving ? 'Speichert ...' : 'Socials speichern' }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-6 space-y-4">
|
||||
<p v-if="iconUploadError" class="rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm font-semibold text-rose-700">{{ iconUploadError }}</p>
|
||||
<div v-for="(social, index) in form.socialLinks" :key="`${social.platform}-${index}`" class="rounded-[28px] border border-violet-100 bg-gradient-to-br from-white via-violet-50/40 to-white p-5 shadow-[0_16px_42px_rgba(124,92,255,0.08)]">
|
||||
<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="grid h-9 w-9 place-items-center rounded-2xl bg-violet-100 text-sm font-black text-violet-700">{{ index + 1 }}</span>
|
||||
<div>
|
||||
<p class="text-[11px] font-semibold uppercase tracking-[0.22em] text-violet-500">Social Link</p>
|
||||
<h3 class="text-lg font-semibold text-slate-900">{{ social.label || 'Neuer Link' }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" class="h-10 w-10 rounded-2xl border border-rose-100 bg-rose-50 p-0 text-rose-600 shadow-none hover:bg-rose-100" aria-label="Social Link entfernen" @click="removeSocialLink(index)">
|
||||
<Trash2 class="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 xl:grid-cols-[minmax(0,0.85fr)_minmax(0,1fr)_300px]">
|
||||
<label class="space-y-2">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Anzeigename</span>
|
||||
<input v-model="social.label" type="text" class="h-11 min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="Twitch" />
|
||||
</label>
|
||||
<label class="space-y-2">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Plattform auswählen</span>
|
||||
<select :value="selectedSocialIconValue(social)" class="h-11 min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" @change="handleSocialIconSelection($event, index)">
|
||||
<optgroup v-for="group in SOCIAL_ICON_OPTION_GROUPS" :key="group.label" :label="group.label">
|
||||
<option v-for="option in group.options" :key="option.key" :value="option.key">
|
||||
{{ option.label }}
|
||||
</option>
|
||||
</optgroup>
|
||||
<option value="custom">Andere Plattform / eigenes Icon</option>
|
||||
</select>
|
||||
<span class="block text-xs text-slate-400">Bekannte Plattformen nutzen automatisch Bibliotheks-Icons. Neue oder eingestellte Plattformen bleiben über Custom-Key plus Upload möglich.</span>
|
||||
</label>
|
||||
<div class="space-y-2">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Custom Icon</span>
|
||||
<label class="group flex h-11 min-w-0 cursor-pointer items-center justify-between gap-3 rounded-2xl border border-dashed border-violet-300 bg-white px-3 text-sm font-semibold text-violet-700 transition hover:border-violet-500 hover:bg-violet-50">
|
||||
<span class="flex min-w-0 items-center gap-2">
|
||||
<span class="grid h-7 w-7 shrink-0 place-items-center overflow-hidden rounded-xl bg-violet-100 text-violet-600">
|
||||
<Upload class="h-4 w-4" />
|
||||
</span>
|
||||
<span class="truncate">{{ isUploadedIcon(social.icon) ? 'Icon ersetzen' : 'Icon hochladen' }}</span>
|
||||
</span>
|
||||
<input type="file" accept="image/png,image/jpeg,image/webp,image/svg+xml" class="sr-only" @change="handleSocialIconUpload($event, index)" />
|
||||
</label>
|
||||
</div>
|
||||
<label v-if="selectedSocialIconValue(social) === 'custom'" class="space-y-2 xl:col-span-3">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Andere Plattform / eigener Key</span>
|
||||
<input v-model="social.platform" type="text" class="h-11 w-full min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="z.B. cake, booth, neue-plattform" />
|
||||
<span class="block text-xs text-slate-400">Für neue oder nicht mehr gepflegte Plattformen: Key speichern, eigenes Icon hochladen oder Stern-Fallback nutzen.</span>
|
||||
</label>
|
||||
<label class="space-y-2 xl:col-span-3">
|
||||
<span class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">URL</span>
|
||||
<input v-model="social.url" type="url" class="h-11 w-full min-w-0 rounded-2xl border border-violet-200 bg-white px-4 text-sm outline-none transition focus:border-violet-400 focus:ring-4 focus:ring-violet-100" placeholder="https://..." />
|
||||
</label>
|
||||
</div>
|
||||
<div v-if="hasSocialIconPreview(social)" class="mt-4 grid gap-4 rounded-[22px] border border-violet-100 bg-white/82 p-4">
|
||||
<div>
|
||||
<p class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Icon Preview</p>
|
||||
<p class="mt-1 text-xs text-slate-500">Aktives Icon: {{ socialIconModeLabel(social) }}. Unbekannte Plattformen bleiben verlinkt und nutzen ein Fallback, bis du ein Custom Icon hochlädst.</p>
|
||||
</div>
|
||||
<div class="grid gap-3 md:grid-cols-2">
|
||||
<label class="flex items-center justify-between gap-4 rounded-[18px] border border-violet-100 bg-violet-50/60 p-3">
|
||||
<span class="flex items-center gap-3">
|
||||
<span class="grid h-9 w-9 place-items-center rounded-[11px] bg-[#f1ecfb]">
|
||||
<img v-if="isUploadedIcon(social.icon)" :src="social.icon" :alt="`${social.label || social.platform} Host Icon Preview`" class="h-[22px] w-[22px] object-contain" />
|
||||
<svg v-else-if="socialSimpleIconPath(social)" class="h-[22px] w-[22px]" viewBox="0 0 24 24" :fill="socialSimpleIconColor(social)"><path :d="socialSimpleIconPath(social)" /></svg>
|
||||
<span v-else class="text-lg font-black text-violet-600">✦</span>
|
||||
</span>
|
||||
<span class="text-sm font-semibold text-slate-700">Host Größe</span>
|
||||
</span>
|
||||
<input v-model="social.showOnHost" type="checkbox" class="h-4 w-4 rounded border-violet-300 text-violet-600 focus:ring-violet-300" />
|
||||
</label>
|
||||
<label class="flex items-center justify-between gap-4 rounded-[18px] border border-violet-100 bg-white p-3">
|
||||
<span class="flex items-center gap-3">
|
||||
<span class="grid h-[46px] w-[46px] place-items-center rounded-[13px] border border-[#e9e0f8] bg-white shadow-[0_4px_12px_rgba(124,86,196,0.08)]">
|
||||
<img v-if="isUploadedIcon(social.icon)" :src="social.icon" :alt="`${social.label || social.platform} Community Icon Preview`" class="h-6 w-6 object-contain" />
|
||||
<svg v-else-if="socialSimpleIconPath(social)" class="h-6 w-6" viewBox="0 0 24 24" :fill="socialSimpleIconColor(social)"><path :d="socialSimpleIconPath(social)" /></svg>
|
||||
<span v-else class="text-xl font-black text-violet-600">✦</span>
|
||||
</span>
|
||||
<span class="text-sm font-semibold text-slate-700">Community Größe</span>
|
||||
</span>
|
||||
<input v-model="social.showOnCommunity" type="checkbox" class="h-4 w-4 rounded border-violet-300 text-violet-600 focus:ring-violet-300" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-3 text-xs text-slate-500 lg:col-span-4">
|
||||
<span>PNG, JPG, WebP oder SVG · max. 256 KB · max. 512 x 512 px</span>
|
||||
<button v-if="social.icon" type="button" class="font-semibold text-rose-500 transition hover:text-rose-700" @click="clearSocialIcon(index)">Icon entfernen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Plus, Save, Trash2, Upload } from '@lucide/vue'
|
||||
|
||||
import { SOCIAL_ICON_OPTION_GROUPS } from '../../lib/socialIcons'
|
||||
import Button from '../ui/Button.vue'
|
||||
import Card from '../ui/Card.vue'
|
||||
import type { AdminContentForm, SocialLinkForm } from './adminContentTypes'
|
||||
|
||||
const props = defineProps<{
|
||||
form: AdminContentForm
|
||||
saving: boolean
|
||||
iconUploadError: string
|
||||
addSocialLink: () => void
|
||||
removeSocialLink: (index: number) => void
|
||||
isUploadedIcon: (icon: string) => boolean
|
||||
selectedSocialIconValue: (social: SocialLinkForm) => string
|
||||
handleSocialIconSelection: (event: Event, index: number) => void
|
||||
hasSocialIconPreview: (social: SocialLinkForm) => boolean
|
||||
socialIconModeLabel: (social: SocialLinkForm) => string
|
||||
socialSimpleIconPath: (social: SocialLinkForm) => string
|
||||
socialSimpleIconColor: (social: SocialLinkForm) => string
|
||||
handleSocialIconUpload: (event: Event, index: number) => Promise<void>
|
||||
clearSocialIcon: (index: number) => void
|
||||
saveSiteSettings: (sectionLabel?: string) => Promise<void>
|
||||
}>()
|
||||
|
||||
function onSave() {
|
||||
return props.saveSiteSettings('Social Links')
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user