Rocketmc/packages/ui/src/components/base/RadialHeader.vue

<template>
  <div>
    <div :style="colorClasses" class="radial-header relative" v-bind="$attrs">
      <slot />
    </div>
    <div class="radial-header-divider" />
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'

defineOptions({
  inheritAttrs: false,
})

const props = withDefaults(
  defineProps<{
    color?: 'brand' | 'red' | 'orange' | 'green' | 'blue' | 'purple' | 'gray'
  }>(),
  {
    color: 'brand',
  },
)

const colorClasses = computed(
  () =>
    `--_radial-bg: var(--color-${props.color}-highlight);--_radial-border: var(--color-${props.color});`,
)
</script>
<style scoped lang="scss">
.radial-header {
  background-image: radial-gradient(50% 100% at 50% 100%, var(--_radial-bg) 10%, #ffffff00 100%);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: linear-gradient(
      90deg,
      #ffffff00 0%,
      var(--_radial-border) 50%,
      #ffffff00 100%
    );
    width: 100%;
    height: 1px;
    opacity: 0.8;
  }
}
</style>