mejorar login y sidebar: SVG logo, arreglar card estilo docs, corregir Label, agregar componentes de tipografia

src/components/AppSidebar.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
 import {
   LayoutDashboard,
   Calendar,
@@ -40,20 +39,10 @@ function setTab(tab: string) {
 
 <template>
   <Sidebar collapsible="icon" variant="inset">
-    <SidebarHeader>
-      <SidebarMenu>
-        <SidebarMenuItem>
-          <SidebarMenuButton size="lg" as="button" @click="setTab('dashboard')">
-            <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-              <span class="font-bold text-sm">A</span>
-            </div>
-            <div class="grid flex-1 text-left text-sm leading-tight">
-              <span class="truncate font-semibold">Alpha</span>
-              <span class="truncate text-xs">Alpha</span>
-            </div>
-          </SidebarMenuButton>
-        </SidebarMenuItem>
-      </SidebarMenu>
+    <SidebarHeader class="px-4 pt-5 pb-3">
+      <div class="flex items-center h-8">
+        <img src="/Alpha.svg" alt="Alpha" class="h-full w-auto dark:invert" />
+      </div>
     </SidebarHeader>
 
     <SidebarContent>

src/components/ui/label/Label.vue

@@ -1,11 +1,21 @@
 <script setup lang="ts">
-defineProps<{
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
   for?: string
+  class?: HTMLAttributes["class"]
 }>()
 </script>
 
 <template>
-  <label>
+  <label
+    :for="props.for"
+    :class="cn(
+      'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+      props.class,
+    )"
+  >
     <slot />
   </label>
-</template>
+</template>

src/components/ui/typography/TypographyBlockquote.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <blockquote :class="cn('mt-6 border-l-2 pl-6 italic', props.class)">
+    <slot />
+  </blockquote>
+</template>

src/components/ui/typography/TypographyH1.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h1 :class="cn('scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl', props.class)">
+    <slot />
+  </h1>
+</template>

src/components/ui/typography/TypographyH2.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h2 :class="cn('scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0', props.class)">
+    <slot />
+  </h2>
+</template>

src/components/ui/typography/TypographyH3.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h3 :class="cn('scroll-m-20 text-2xl font-semibold tracking-tight', props.class)">
+    <slot />
+  </h3>
+</template>

src/components/ui/typography/TypographyH4.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <h4 :class="cn('scroll-m-20 text-xl font-semibold tracking-tight', props.class)">
+    <slot />
+  </h4>
+</template>

src/components/ui/typography/TypographyInlineCode.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <code :class="cn('relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold', props.class)">
+    <slot />
+  </code>
+</template>

src/components/ui/typography/TypographyLarge.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('text-lg font-semibold', props.class)">
+    <slot />
+  </div>
+</template>

src/components/ui/typography/TypographyLead.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-xl text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

src/components/ui/typography/TypographyList.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <ul :class="cn('my-6 ml-6 list-disc [&>li]:mt-2', props.class)">
+    <slot />
+  </ul>
+</template>

src/components/ui/typography/TypographyMuted.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

src/components/ui/typography/TypographyP.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p :class="cn('leading-7 [&:not(:first-child)]:mt-6', props.class)">
+    <slot />
+  </p>
+</template>

src/components/ui/typography/TypographySmall.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <small :class="cn('text-sm font-medium leading-none', props.class)">
+    <slot />
+  </small>
+</template>

src/components/ui/typography/TypographyTable.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn('my-6 w-full overflow-y-auto', props.class)">
+    <table class="w-full">
+      <slot />
+    </table>
+  </div>
+</template>

src/components/ui/typography/index.ts

@@ -0,0 +1,13 @@
+export { default as TypographyH1 } from './TypographyH1.vue'
+export { default as TypographyH2 } from './TypographyH2.vue'
+export { default as TypographyH3 } from './TypographyH3.vue'
+export { default as TypographyH4 } from './TypographyH4.vue'
+export { default as TypographyP } from './TypographyP.vue'
+export { default as TypographyBlockquote } from './TypographyBlockquote.vue'
+export { default as TypographyTable } from './TypographyTable.vue'
+export { default as TypographyList } from './TypographyList.vue'
+export { default as TypographyInlineCode } from './TypographyInlineCode.vue'
+export { default as TypographyLead } from './TypographyLead.vue'
+export { default as TypographyLarge } from './TypographyLarge.vue'
+export { default as TypographySmall } from './TypographySmall.vue'
+export { default as TypographyMuted } from './TypographyMuted.vue'

src/views/LoginView.vue

@@ -4,7 +4,8 @@ import { useAuthStore } from '@/stores/auth'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Checkbox } from '@/components/ui/checkbox'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Label } from '@/components/ui/label'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Eye, EyeOff } from 'lucide-vue-next'
 
 const auth = useAuthStore()
@@ -35,29 +36,27 @@ async function handleLogin() {
 </script>
 
 <template>
-  <div class="flex min-h-svh flex-col items-center justify-center bg-background p-6">
-    <Card class="w-full max-w-[400px]">
-      <CardHeader class="text-center pb-4">
-        <div class="flex aspect-square size-12 items-center justify-center rounded-xl bg-primary text-primary-foreground mx-auto mb-3">
-          <span class="font-bold text-xl">A</span>
-        </div>
-        <CardTitle class="text-2xl font-bold tracking-tight">Alpha</CardTitle>
-        <CardDescription class="text-xs mt-1">Alpha</CardDescription>
+  <div class="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6">
+    <img src="/Alpha.svg" alt="Alpha" class="h-10 w-auto dark:invert" />
+
+    <Card class="w-full max-w-sm">
+      <CardHeader>
+        <CardTitle class="text-2xl">Iniciar sesión</CardTitle>
       </CardHeader>
 
       <CardContent>
-        <form @submit.prevent="handleLogin" class="flex flex-col gap-4">
-          <div class="space-y-1.5">
-            <label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Email</label>
-            <Input v-model="email" name="email" type="email" placeholder="ricardo@..." autocomplete="email" />
+        <form @submit.prevent="handleLogin" class="grid gap-4">
+          <div class="grid gap-2">
+            <Label for="email">Email</Label>
+            <Input id="email" v-model="email" type="email" placeholder="ricardo@..." autocomplete="email" />
           </div>
-          <div class="space-y-1.5">
-            <label class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Contraseña</label>
+          <div class="grid gap-2">
+            <Label for="password">Contraseña</Label>
             <div class="relative">
               <Input
+                id="password"
                 v-model="password"
                 :type="showPassword ? 'text' : 'password'"
-                name="password"
                 placeholder="••••••••"
                 autocomplete="current-password"
                 class="pr-10"
@@ -75,19 +74,19 @@ async function handleLogin() {
 
           <div class="flex items-center gap-2">
             <Checkbox id="remember" v-model:checked="rememberMe" />
-            <label for="remember" class="text-xs text-muted-foreground cursor-pointer select-none">Recordarme</label>
+            <Label for="remember" class="text-sm font-normal cursor-pointer">Recordarme</Label>
           </div>
 
-          <div v-if="auth.error" class="text-xs text-destructive bg-destructive/10 rounded-md px-3 py-2">
+          <div v-if="auth.error" class="text-sm text-destructive bg-destructive/10 rounded-md px-3 py-2">
             {{ auth.error }}
           </div>
 
-          <Button type="submit" class="w-full mt-2" :disabled="auth.loading">
+          <Button type="submit" class="w-full" :disabled="auth.loading">
             {{ auth.loading ? 'Ingresando...' : 'Iniciar sesión' }}
           </Button>
         </form>
 
-        <p class="text-center text-[11px] text-muted-foreground/40 mt-6">
+        <p class="text-center text-xs text-muted-foreground/40 mt-6">
           kappa.lambdaanalytics.co
         </p>
       </CardContent>