labs/packages/astro-theme/components/LinkButton.astro at 0f5f004cbc179b19bb17712e7c2a48ed884460ef · leaningtech/labs · GitHub

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
---
import { Icon } from "astro-icon/components";
interface Props {
	href: string;
	label: string;
	target?: string;
	type?:
		| "primary"
		| "primary2"
		| "secondary"
		| "primary-cheerp"
		| "secondary-cheerp"
		| "primary-cheerpx"
		| "secondary-cheerpx"
		| "primary-mono"
		| "secondary-mono"
		| "primary-mono-cj"
		| "secondary-mono-cj"
		| "discord";
	iconLeft?: string;
	iconRight?: string;
}
const {
	href,
	label,
	target,
	type = "secondary",
	iconLeft,
	iconRight,
} = Astro.props;
---

<a
	{href}
	{target}
	class:list={[
		"px-6 py-2 font-semibold border-2 rounded-md no-underline text-base transition-colors inline-flex items-center gap-2 whitespace-nowrap",
		{
			"border-primary-400 bg-primary-500 text-white hover:border-primary-200":
				type === "primary",
			"border-white bg-white text-primary-500 hover:border-primary-400":
				type === "primary2",
			"border-white bg-white text-black hover:bg-[#8e88ff] hover:text-white hover:border-[#8e88ff]":
				type === "primary-cheerp",
			"border-bg-600 text-primary-400 hover:border-primary-300":
				type === "secondary",
			"border-white text-white hover:border-[#8e88ff] hover:text-[#8e88ff]":
				type === "secondary-cheerp",
			"border-white bg-white text-black hover:bg-[#909090] hover:text-white hover:border-[#909090]":
				type === "primary-cheerpx",
			"border-white text-white hover:border-[#909090] hover:text-[#909090]":
				type === "secondary-cheerpx",

			"border-white bg-white text-black font-mono hover:bg-primary-300 hover:text-white hover:border-primary-300 hover:drop-shadow-[0px_0px_5px_rgba(240,125,153,0.6)]":
				type === "primary-mono",
			"border-white text-white font-mono hover:border-primary-300 hover:text-primary-300 hover:drop-shadow-[0px_0px_5px_rgba(240,125,153,0.6)]":
				type === "secondary-mono",
			"bg-[#213e77] text-white font-mono hover:bg-[#ff7c00]":
				type === "primary-mono-cj",
			"border-[#213e77] text-[#213e77] font-mono hover:text-[#ff7c00] hover:border-[#ff7c00]":
				type === "secondary-mono-cj",
			"border-white border-opacity-30 bg-blurple text-white hover:border-opacity-80":
				type === "discord",
			"border-white bg-[#2DA682] hover:bg-emerald-400 text-white hover:bg-[#909090] hover:text-white":
				type === "primary-browserpod",
			"bg-white/10 hover:bg-white/20 text-white border border-white/20":
				type === "secondary-browserpod",
		},
	]}
>
	{iconLeft && <Icon name={iconLeft} class="w-5 h-5" />}
	{label}
	{iconRight && <Icon name={iconRight} class="w-5 h-5" />}
</a>