rename: client -> frontend

packages/frontend/src/components/form/link.vue

@@ -0,0 +1,95 @@
+<template>
+<div class="ffcbddfc" :class="{ inline }">
+	<a v-if="external" class="main _button" :href="to" target="_blank">
+		<span class="icon"><slot name="icon"></slot></span>
+		<span class="text"><slot></slot></span>
+		<span class="right">
+			<span class="text"><slot name="suffix"></slot></span>
+			<i class="ti ti-external-link icon"></i>
+		</span>
+	</a>
+	<MkA v-else class="main _button" :class="{ active }" :to="to" :behavior="behavior">
+		<span class="icon"><slot name="icon"></slot></span>
+		<span class="text"><slot></slot></span>
+		<span class="right">
+			<span class="text"><slot name="suffix"></slot></span>
+			<i class="ti ti-chevron-right icon"></i>
+		</span>
+	</MkA>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { } from 'vue';
+
+const props = defineProps<{
+	to: string;
+	active?: boolean;
+	external?: boolean;
+	behavior?: null | 'window' | 'browser' | 'modalWindow';
+	inline?: boolean;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.ffcbddfc {
+	display: block;
+
+	&.inline {
+		display: inline-block;
+	}
+
+	> .main {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		box-sizing: border-box;
+		padding: 10px 14px;
+		background: var(--buttonBg);
+		border-radius: 6px;
+		font-size: 0.9em;
+
+		&:hover {
+			text-decoration: none;
+			background: var(--buttonHoverBg);
+		}
+
+		&.active {
+			color: var(--accent);
+			background: var(--buttonHoverBg);
+		}
+
+		> .icon {
+			margin-right: 0.75em;
+			flex-shrink: 0;
+			text-align: center;
+			color: var(--fgTransparentWeak);
+
+			&:empty {
+				display: none;
+
+				& + .text {
+					padding-left: 4px;
+				}
+			}
+		}
+
+		> .text {
+			flex-shrink: 1;
+			white-space: normal;
+			padding-right: 12px;
+			text-align: center;
+		}
+
+		> .right {
+			margin-left: auto;
+			opacity: 0.7;
+			white-space: nowrap;
+
+			> .text:not(:empty) {
+				margin-right: 0.75em;
+			}
+		}
+	}
+}
+</style>