mirror of
https://github.com/modrinth/code.git
synced 2026-08-26 09:34:50 +00:00
Calum H.andProspector
bb2193b6f5
* feat: refactor button components
* fix: qa
* fix: storybook
* a11y: pass
* fix: build
* fix: rename default ->md
* fix: lint
* docs: buttons.md
* refactor part 1
* refactor part 2
* fix: undo refactor for fresh restart
* refactor
* Revert "refactor"
This reverts commit 96d65902d7.
* refactor: part 1
* fix: qa
* fix: qa
* fix: qa
* fix: qa
* fix: qa
* fix: qa
* fix: qa
* fix: qa
* fix: remove text-contrast
* fix: qa
* fix: v-tooltip
* fix: lint
* fix: split broken
* fix: passkey qa
* fix: qa
* fix: qa
* fix: prepr
* fix: splitbutton
* improve button group seam
---------
Signed-off-by: Calum H. <calum@modrinth.com>
Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { ModrinthIcon, RightArrowIcon, XIcon } from '@modrinth/assets'
|
|
|
|
import { ButtonLink, IconButton } from '#ui/components/base/buttons'
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'close'): void
|
|
}>()
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
link: string
|
|
closable?: boolean
|
|
}>(),
|
|
{
|
|
closable: true,
|
|
},
|
|
)
|
|
</script>
|
|
<template>
|
|
<div
|
|
class="brand-gradient-bg card-shadow bg-bg relative p-4 border-[1px] border-solid border-brand rounded-2xl grid grid-cols-[1fr_auto] overflow-hidden"
|
|
>
|
|
<ModrinthIcon
|
|
class="absolute -top-12 -right-12 size-48 text-brand-highlight opacity-25"
|
|
fill="none"
|
|
stroke="var(--color-brand)"
|
|
stroke-width="4"
|
|
/>
|
|
<div class="flex flex-col gap-2">
|
|
<span class="text-lg leading-tight font-extrabold text-contrast"
|
|
>Want to play with <br />
|
|
<span class="text-brand">your friends?</span></span
|
|
>
|
|
<span class="text-sm font-medium">Create a server with Modrinth in just a few clicks.</span>
|
|
</div>
|
|
<div class="flex flex-col items-end justify-end z-10">
|
|
<ButtonLink type="colored" color="brand" :to="link">
|
|
View plans <RightArrowIcon />
|
|
</ButtonLink>
|
|
</div>
|
|
<div class="absolute top-2 right-2 z-10">
|
|
<IconButton
|
|
v-if="closable"
|
|
v-tooltip="`Don't show again`"
|
|
class="!size-6"
|
|
size="xs"
|
|
:label="`Don't show again`"
|
|
@click="emit('close')"
|
|
>
|
|
<XIcon aria-hidden="true" />
|
|
</IconButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped>
|
|
.brand-gradient-bg {
|
|
background-image: linear-gradient(
|
|
to top right,
|
|
var(--color-brand-highlight) -80%,
|
|
var(--color-bg)
|
|
);
|
|
--color-button-bg: var(--brand-gradient-button);
|
|
}
|
|
</style>
|