Skip to content

Commit 727d213

Browse files
ErwanDecosterErwanDecoster
committed
feat: update Quick Start section with new components for starters and sandboxes
1 parent a7c961f commit 727d213

File tree

7 files changed

+283
-309
lines changed

7 files changed

+283
-309
lines changed

‎.vitepress/theme/style.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,39 @@
4545
* in custom container, badges, etc.
4646
* -------------------------------------------------------------------------- */
4747

48+
@theme {
49+
--color-primary: var(--vp-c-brand-2);
50+
--color-primary2: var(--vp-c-brand-1);
51+
52+
--color-soft-bg: var(--vp-c-bg-soft);
53+
--color-border: var(--vp-c-border);
54+
--color-bg: var(--vp-c-bg);
55+
56+
--color-text1: var(--vp-c-text-1);
57+
--color-text2: var(--vp-c-text-2);
58+
--color-text3: var(--vp-c-text-3);
59+
60+
--color-success-1: var(--vp-c-green-1);
61+
--color-success-2: var(--vp-c-green-2);
62+
--color-success-3: var(--vp-c-green-3);
63+
--color-success-soft: var(--vp-c-green-soft);
64+
65+
--color-important-1: var(--vp-c-purple-1);
66+
--color-important-2: var(--vp-c-purple-2);
67+
--color-important-3: var(--vp-c-purple-3);
68+
--color-important-soft: var(--vp-c-purple-soft);
69+
70+
--color-warning-1: var(--vp-c-yellow-1);
71+
--color-warning-2: var(--vp-c-yellow-2);
72+
--color-warning-3: var(--vp-c-yellow-3);
73+
--color-warning-soft: var(--vp-c-yellow-soft);
74+
75+
--color-danger-1: var(--vp-c-red-1);
76+
--color-danger-2: var(--vp-c-red-2);
77+
--color-danger-3: var(--vp-c-red-3);
78+
--color-danger-soft: var(--vp-c-red-soft);
79+
}
80+
4881
:root {
4982
--vp-c-default-1: var(--vp-c-gray-1);
5083
--vp-c-default-2: var(--vp-c-gray-2);
@@ -66,6 +99,11 @@
6699
--vp-c-warning-3: var(--vp-c-yellow-3);
67100
--vp-c-warning-soft: var(--vp-c-yellow-soft);
68101

102+
--vp-c-important-1: var(--vp-c-purple-1);
103+
--vp-c-important-2: var(--vp-c-purple-2);
104+
--vp-c-important-3: var(--vp-c-purple-3);
105+
--vp-c-important-soft: var(--vp-c-purple-soft);
106+
69107
--vp-c-danger-1: var(--vp-c-red-1);
70108
--vp-c-danger-2: var(--vp-c-red-2);
71109
--vp-c-danger-3: var(--vp-c-red-3);

‎src/components/ActionButton.vue‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<template>
2+
<component
3+
:is="component"
4+
:href="href"
5+
:target="target"
6+
:rel="rel"
7+
:disabled="disabled"
8+
:class="buttonClasses"
9+
>
10+
<Icon :icon="icon" :height="16" />
11+
{{ label }}
12+
</component>
13+
</template>
14+
15+
<script setup lang="ts">
16+
import { Icon } from '@iconify/vue';
17+
import { computed } from 'vue';
18+
19+
interface Props {
20+
variant: 'primary' | 'disabled';
21+
label: string;
22+
icon: string;
23+
href?: string;
24+
target?: string;
25+
rel?: string;
26+
disabled?: boolean;
27+
}
28+
29+
const props = defineProps<Props>();
30+
31+
const component = computed(() => {
32+
return props.href ? 'a' : 'button';
33+
});
34+
35+
const buttonClasses = computed(() => {
36+
const baseClasses =
37+
'inline-flex items-center justify-center gap-2 px-5 py-2.5 rounded-md text-sm font-medium w-full transition-all duration-200';
38+
39+
if (props.variant === 'primary') {
40+
return `${baseClasses} bg-blue-600 hover:bg-blue-700 text-white hover:-translate-y-0.5`;
41+
} else {
42+
return `${baseClasses} bg-gray-50 text-gray-400 border border-gray-200 cursor-not-allowed`;
43+
}
44+
});
45+
</script>

‎src/components/QuickStartCard.vue‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<template>
2+
<div
3+
class="relative flex h-full min-h-[220px] bg-soft-bg flex-col rounded-lg border border-border p-5 transition-all duration-300 hover:-translate-y-0.5 hover:border-primary hover:shadow-lg"
4+
>
5+
<!-- Icon -->
6+
<div class="flex gap-2 items-start">
7+
<div
8+
class="flex h-14 w-14 items-center justify-center rounded-xl border border-border bg-bg"
9+
>
10+
<Icon :icon="icon" height="24" />
11+
</div>
12+
<div>
13+
<h3 class="mt-0! mb-1! text-lg font-semibold">{{ title }}</h3>
14+
<StatusBadge :status="status" :label="statusLabel" />
15+
</div>
16+
</div>
17+
18+
<!-- Content -->
19+
<div class="flex-1">
20+
<p
21+
class="mb-3 h-14 overflow-hidden text-sm leading-relaxed text-text2"
22+
>
23+
{{ description }}
24+
</p>
25+
26+
<!-- Status Badge -->
27+
</div>
28+
<!-- Actions -->
29+
<div class="mt-auto">
30+
<Button
31+
:disabled="buttonDisabled"
32+
class="w-full"
33+
buttonTarget="_blank"
34+
buttonRel="noreferrer"
35+
>
36+
<Icon :icon="buttonIcon" :height="16" />
37+
{{ buttonLabel }}
38+
</Button>
39+
</div>
40+
</div>
41+
</template>
42+
43+
<script setup lang="ts">
44+
import { Icon } from '@iconify/vue';
45+
import StatusBadge from './StatusBadge.vue';
46+
import Button from './ui/Button.vue';
47+
48+
interface Props {
49+
title: string;
50+
description: string;
51+
icon: string;
52+
status: 'available' | 'coming-soon' | 'interactive';
53+
statusLabel: string;
54+
buttonVariant: 'primary' | 'disabled';
55+
buttonLabel: string;
56+
buttonIcon: string;
57+
buttonHref?: string;
58+
buttonTarget?: string;
59+
buttonRel?: string;
60+
buttonDisabled?: boolean;
61+
}
62+
63+
withDefaults(defineProps<Props>(), {});
64+
</script>

‎src/components/QuickStartGrid.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div class="my-8 grid grid-cols-1 gap-6 md:grid-cols-2">
3+
<slot />
4+
</div>
5+
</template>

‎src/components/StatusBadge.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<div :class="badgeClasses">
3+
<Icon :icon="iconName" />
4+
{{ label }}
5+
</div>
6+
</template>
7+
8+
<script setup lang="ts">
9+
import { Icon } from '@iconify/vue';
10+
import { computed } from 'vue';
11+
12+
interface Props {
13+
status: 'available' | 'coming-soon' | 'interactive';
14+
label: string;
15+
}
16+
17+
const props = withDefaults(defineProps<Props>(), {});
18+
19+
const iconName = computed(() => {
20+
return props.status === 'available'
21+
? 'mdi:check-circle-outline'
22+
: props.status === 'interactive'
23+
? 'mdi:play-circle-outline'
24+
: 'mdi:clock-outline';
25+
});
26+
27+
const badgeClasses = computed(() => {
28+
const baseClasses =
29+
'inline-flex items-center gap-1.5 px-3 py-1 rounded-2xl text-xs font-medium border';
30+
31+
switch (props.status) {
32+
case 'available':
33+
return `${baseClasses} bg-success-soft text-success-3 border-success-3`;
34+
case 'coming-soon':
35+
return `${baseClasses} bg-warning-soft text-warning-3 border-warning-3`;
36+
default:
37+
return `${baseClasses} bg-important-soft text-important-3 border-important-3`;
38+
}
39+
});
40+
</script>

‎src/components/ui/Button.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<component
33
:is="as || 'button'"
44
:type="as === 'button' || !as ? 'button' : undefined"
5-
class="inline-flex h-11 cursor-pointer items-center justify-center rounded-lg border-none bg-[#fcd15a]! px-5! py-2 text-base font-medium text-[#1e1e1e]! no-underline! transition-all! duration-200 hover:-translate-y-0.5 hover:transform hover:bg-[#ffb74d]! hover:shadow-md focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
5+
class="inline-flex h-11 cursor-pointer gap-1.5 items-center justify-center rounded-lg border-none bg-primary! px-5! py-2 text-base font-medium text-[#1e1e1e]! no-underline! transition-all! duration-200 not-disabled:hover:-translate-y-0.5 not-disabled:hover:transform not-disabled:hover:shadow-md focus:shadow-[0_0_0_2px_rgba(252,209,90,0.3)] focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
66
v-bind="$attrs"
77
>
88
<slot />

0 commit comments

Comments
 (0)