Skip to content

Commit

Permalink
refactor(components): refactor GradientCard for thin,link props
Browse files Browse the repository at this point in the history
  • Loading branch information
taskylizard committed Mar 31, 2024
1 parent 1c043d4 commit d0f5eb6
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 35 deletions.
5 changes: 5 additions & 0 deletions .changeset/ten-chefs-try.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@fmhy/components": patch
---

refactor GradientCard to add `thin`,`link` props
10 changes: 9 additions & 1 deletion docs/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,12 @@
## `GradientCard`

<GradientCard theme="cerise" title="title" description="Lorem ipsum dolor sit amet, qui minim labore
adipisicing minim sint cillum sint consectetur cupidatat." tag="tag or link" />
adipisicing minim sint cillum sint consectetur cupidatat." tag="tag" />

Or, it's `thin` variant:

<GradientCard theme="turquoise" title="title" description="Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat." tag="tag" variant="thin"/>

You can also pass a `link`:

<GradientCard theme="meadow" title="title" description="Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat." tag="tag" link="https://ui.fmhy.net"/>
99 changes: 65 additions & 34 deletions packages/components/src/components/GradientCard.vue
Original file line number Diff line number Diff line change
@@ -1,49 +1,80 @@
<script setup lang="ts">
defineProps<{
title: string
tag: string
description: string
theme: string
}>()
import { computed } from 'vue'
const props = withDefaults(
defineProps<{
variant?: 'default' | 'thin'
link?: string
title: string
tag: string
description: string
theme: string
}>(),
{
variant: 'default'
}
)
const theme = computed(() => {
return {
title: `text-${props.theme}-100`,
bgleft: `bg-${props.theme}-800`,
bgright: `bg-${props.theme}-700`,
link: `text-${props.theme}-300`,
description: `text-${props.theme}-100`
}
})
const classes = computed(() => {
if (props.variant === 'thin') {
return {
container: 'h-40 text-sm',
bgleft: 'h-40 w-40 blur-2xl -left-20',
bgright: 'h-60 w-60 blur-2xl -top-24',
tag: 'text-3xl',
icon: 'top-12 left-4',
description: 'mt-2 text-sm'
}
} else {
return {
container: 'h-96',
bgleft: 'h-80 w-80 blur-3xl -left-32',
bgright: 'h-96 w-96 blur-3xl -top-56',
tag: 'text-6xl',
icon: 'top-36 left-6',
description: 'mt-4'
}
}
})
</script>

<template>
<div
style="box-shadow: 0 10px 40px -12px rgba(16, 24, 40, 0.1)"
:class="`rounded-2xl h-96 border border-amber overflow-hidden flex flex-col relative text-color bg-zinc-900`"
>
<div style="box-shadow: 0 10px 40px -12px rgba(16, 24, 40, 0.1)" :class="classes.container"
class="rounded-2xl border border-amber overflow-hidden flex flex-col relative text-color bg-zinc-900">
<div class="p-4 sticky top-0 z-10">
<div class="flex items-center gap-1.5">
<div :class="`font-medium text-${theme}-100`">
{{ title }}
<div :class="theme.title" class="font-medium">
{{ props.title }}
</div>
</div>
</div>
<div
:class="`bg-${theme}-800 absolute top-1/3 -left-32 -translate-y-1/2 rounded-full w-80 h-80 blur-3xl mix-blend`"
></div>
<div
:class="`bg-${theme}-700 absolute -top-56 left-1/2 -translate-x-1/2 rounded-full w-96 h-96 blur-3xl mix-blend`"
></div>
<div class="absolute top-36 left-6">
<div :class="`${theme.bgleft} ${classes.bgleft} absolute top-1/3 -translate-y-1/2 rounded-full mix-blend`"></div>
<div :class="`${theme.bgright} ${classes.bgright} absolute left-1/2 -translate-x-1/2 rounded-full mix-blend`"></div>
<div :class="`absolute ${classes.icon}`">
<div class="flex items-start">
<div class="text-6xl font-normal tracking-tighter text-color-50">
{{ tag }}
<div :class="classes.tag" class="font-normal tracking-tighter text-color-50">
{{ props.tag }}
</div>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
:class="`text-${theme}-300 w-8 h-8 ml-3`"
>
<path
fill-rule="evenodd"
d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z"
clip-rule="evenodd"
></path>
</svg>
<a v-if="props.link" :href="props.link" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" :class="theme.link"
class="w-8 h-8 ml-3">
<path fill-rule="evenodd"
d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z"
clip-rule="evenodd"></path>
</svg>
</a>
</div>
<div :class="`mt-4 text-color-muted text-${theme}-100`">
<div :class="`text-color-muted ${theme.description} ${classes.description}`">
{{ description }}
</div>
</div>
Expand Down

0 comments on commit d0f5eb6

Please sign in to comment.