.

lyx-ui/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

lyx-ui/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

lyx-ui/app.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="p-10 bg-gray-700">
+    <LyxUiCard>
+      <div class="flex gap-4 items-center">
+        <LyxUiButton type="primary"> primary </LyxUiButton>
+        <LyxUiButton type="secondary"> secondary </LyxUiButton>
+        <LyxUiButton type="outline"> outline </LyxUiButton>
+        <LyxUiButton type="danger"> danger </LyxUiButton>
+      </div>
+    </LyxUiCard>
+  </div>
+</template>

lyx-ui/assets/lyxui.scss

@@ -0,0 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
+.poppins {
+  font-family: 'Poppins' !important;
+}
+
+* {
+  font-family: 'Nunito';
+}

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>

lyx-ui/nuxt.config.ts

@@ -0,0 +1,14 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+
+import path from 'path';
+
+export default defineNuxtConfig({
+  css: [path.join(__dirname, './assets/lyxui.scss')],
+  modules: ['@nuxt/ui'],
+  components: [
+    {
+      path: './components',
+      prefix: 'LyxUi'
+    },
+  ]
+})

lyx-ui/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/ui": "^2.17.0",
+    "nuxt": "^3.12.4",
+    "sass": "^1.77.8",
+    "vue": "latest"
+  }
+}

lyx-ui/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

lyx-ui/tailwind.config.js

@@ -0,0 +1,53 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: [],
+    theme: {
+        extend: {
+            colors: {
+                "lyx-primary": {
+                    DEFAULT: '#5680F8',
+                    dark: '#222A42',
+                    hover: '#2A3450'
+                },
+                "lyx-text": {
+                    DEFAULT: '#FFFFFF',
+                    dark: '#D4D4D4',
+                    darker: '#6A6A6A'
+                },
+                "lyx-widget": {
+                    DEFAULT: '#151515',
+                    light: '#1E1E1E',
+                    lighter: '#262626'
+                },
+                "lyx-background": {
+                    DEFAULT: '#0A0A0A',
+                    light: '#121212',
+                    lighter: '#212121'
+                },
+                "lyx-danger": {
+                    DEFAULT: '#F86956',
+                    dark: '#4A2D29'
+                },
+                "lyx-chart": {
+                    purple: {
+                        DEFAULT: '#5655D7',
+                        dark: '#282844'
+                    },
+                    green: {
+                        DEFAULT: '#1D9B86',
+                        dark: '#213734'
+                    },
+                    cyan: {
+                        DEFAULT: '#4ABDE8',
+                        dark: '#273D48'
+                    },
+                    orange: {
+                        DEFAULT: '#F56524',
+                        dark: '#492C22'
+                    }
+                }
+            },
+        },
+    },
+    plugins: [],
+}

lyx-ui/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}