.

lyx-ui/components/Button.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+
+export type ButtonType = 'primary' | 'secondary' | 'outline' | 'danger';
+
+const props = defineProps<{ type: ButtonType, }>();
+
+</script>
+
+<template>
+    <div class="poppins w-fit cursor-pointer px-4 py-1 rounded-md outline outline-[1px] text-text" :class="{
+        'bg-lyx-primary-dark outline-lyx-primary hover:bg-lyx-primary-hover': type === 'primary',
+        'bg-lyx-widget-lighter outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'secondary',
+        'bg-lyx-transparent outline-lyx-widget-lighter hover:bg-lyx-widget-light': type === 'outline',
+        'bg-lyx-danger-dark outline-lyx-danger hover:bg-lyx-danger': type === 'danger',
+    }">
+        <slot></slot>
+    </div>
+</template>

lyx-ui/components/Card.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+
+
+</script>
+
+<template>
+    <div class="w-fit h-fit rounded-md bg-lyx-widget p-4 outline outline-[1px] outline-lyx-background-lighter">
+        <slot></slot>
+    </div>
+</template>

lyx-ui/components/Icon.vue

@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+
+const props = defineProps<{ icon: string }>();
+
+</script>
+
+<template>
+    <span class="material-symbols-outlined">
+        {{ props.icon }}
+    </span>
+</template>

lyx-ui/components/ProjectSelector.vue

@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+
+
+</script>
+
+<template>
+    <LyxUiCard>
+        <div class="flex items-center">
+            <div class="grow">
+                PROJECT_NAME
+            </div>
+            <div>
+                Active
+            </div>
+            <LyxUiIcon icon="drag_indicator"></LyxUiIcon>
+        </div>
+        <div class="flex items-center">
+            <LyxUiButton type="primary">
+                CURRENT_SUBSCRIPTION
+            </LyxUiButton>
+            <div class="poppins font-light text-lyx-text-dark">
+                next billing: NEXT_BILLING_DATE
+            </div>
+        </div>
+    </LyxUiCard>
+</template>