blob: e1126912bfeaf0808983953e3a36d22a4866a163 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
---
interface Props {
type: 'badges' | 'logos' | 'mods'
name: string
nameFormatted?: string
altText?: string
extensions?: ('png' | 'svg')[]
maxWidth?: number
background?: string
}
const {
name,
type,
altText,
nameFormatted,
background = 'white',
maxWidth = 300,
extensions = ['png', 'svg'],
} = Astro.props;
const path = `/media/branding/${type}/${name}`;
---
<div class={`relative rounded-md bg-${background} border border-1 border-gray-400 flex flex-col justify-center items-center p-8`}>
<div class="absolute top-0 right-0 flex flex-row gap-x-2">
{extensions.map(ext => (
<a target="_blank" class="text-xs px-0.5 hover:underline" href={`${path}.${ext}`}>.{ext.toUpperCase()}</a>
))}
</div>
<img style={`max-width: ${maxWidth}px;`} src={`${path}.svg`} alt={altText}>
{nameFormatted && <span class="absolute bottom-0 left-1/2 -translate-x-1/2 opacity-50 text-xxs">{nameFormatted}</span>}
</div>
|
