@tanglemedia/svelte-starter-auth-shadcn 0.0.1 → 0.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +3 -3
  2. package/src/lib/components/ui/auth-layout/auth-layout.svelte +37 -31
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanglemedia/svelte-starter-auth-shadcn",
3
- "version": "0.0.1",
3
+ "version": "0.0.2",
4
4
  "main": "src/index.ts",
5
5
  "types": "src/index.ts",
6
6
  "description": "Auth features and components for use in svelte websites",
@@ -82,9 +82,9 @@
82
82
  "typescript-eslint": "^8.20.0",
83
83
  "vite": "^6.0.0",
84
84
  "vitest": "^3.0.0",
85
- "@tanglemedia/svelte-starter-ui-shadcn": "0.0.1",
86
85
  "@internal/eslint-config": "0.0.0",
87
- "@tanglemedia/svelte-starter-core": "2.0.0"
86
+ "@tanglemedia/svelte-starter-core": "2.0.0",
87
+ "@tanglemedia/svelte-starter-ui-shadcn": "0.0.1"
88
88
  },
89
89
  "dependencies": {},
90
90
  "peerDependencies": {
package/src/lib/components/ui/auth-layout/auth-layout.svelte CHANGED
@@ -3,31 +3,33 @@
3
3
  // import { getConfig } from '@tanglemedia/svelte-starter-core';
4
4
 
5
5
  interface Props {
6
- logo?: string;
7
- name?: string;
8
- quote?: string;
9
- quoteAuthor?: string;
10
- layoutMode?: string;
11
- leftSideBackground?: string;
12
- rightSideBackground?: string;
13
- opacity?: number;
14
- logoClass?: string;
15
- filterClass?: string;
16
- imageClass?: string;
6
+ logo?: string | null;
7
+ backgroundImage?: string | null;
8
+ name?: string | null;
9
+ quote?: string | null;
10
+ quoteAuthor?: string | null;
11
+ layoutMode?: string | null;
12
+ leftSideBackground?: string | null;
13
+ rightSideBackground?: string | null;
14
+ opacity?: number | null;
15
+ logoClass?: string | null;
16
+ filterClass?: string | null;
17
+ backgroundImageClass?: string | null;
17
18
  }
18
19
 
19
20
  let {
20
- logo,
21
- name,
22
- quote,
23
- quoteAuthor,
21
+ logo = null,
22
+ backgroundImage = "https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80",
23
+ name = "Tangle Media Inc.",
24
+ quote = "",
25
+ quoteAuthor = "",
24
26
  layoutMode,
25
27
  leftSideBackground,
26
28
  rightSideBackground,
27
29
  opacity,
28
- logoClass,
30
+ logoClass = "",
29
31
  filterClass,
30
- imageClass,
32
+ backgroundImageClass = "",
31
33
  children
32
34
  }: Props = $props();
33
35
  </script>
@@ -37,41 +39,45 @@
37
39
  >
38
40
  <div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
39
41
  <div
40
- class="absolute inset-0 bg-background"
42
+ class="absolute inset-0 bg-background {backgroundImageClass}"
41
43
  style="
42
44
  background-image:
43
- url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1376&q=80);"
45
+ url({backgroundImage});"
44
46
  ></div>
45
47
  <div class="relative z-20 flex items-center text-lg font-medium text-shadow-lg">
46
- Acme Inc
48
+ {#if logo}
49
+ <img src={logo} alt="logo" class={logoClass} />
50
+ {:else}
51
+ {name}
52
+ {/if}
47
53
  </div>
48
54
  <div class="relative z-20 mt-auto">
49
55
  <blockquote class="space-y-2">
50
56
  <p class="text-lg text-shadow-lg">
51
- &ldquo;This library has saved me countless hours of work and helped me deliver
52
- stunning designs to my clients faster than ever before. Highly
53
- recommended!&rdquo;
57
+ {quote}
54
58
  </p>
55
- <footer class="text-sm text-shadow-lg">Sofia Davis</footer>
59
+ <footer class="text-sm text-shadow-lg">{quoteAuthor}</footer>
56
60
  </blockquote>
57
61
  </div>
58
62
  <div class="absolute top-0 bottom-0 left-0 right-0 bg-primary-500/10 filter blur(2px)"></div>
59
63
  </div>
60
- <div class="lg:hidden absolute top-0 left-0 right-0 bottom-1/2 z-[-1]" style="
64
+ <div class="lg:hidden absolute top-0 left-0 right-0 bottom-1/2 z-[-1] {backgroundImageClass}" style="
61
65
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
62
66
  background-image:
63
- url(https://images.unsplash.com/photo-1590069261209-f8e9b8642343?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx);
67
+ url({backgroundImage});
64
68
  background-size: cover;
65
69
  background-position: center">
66
70
  <div class="text-white top-6 left-6 absolute text-lg font-medium z-20 text-shadow-lg">
67
- Acme Inc
71
+ {#if logo}
72
+ <img src={logo} alt="logo" class={logoClass} />
73
+ {:else}
74
+ {name}
75
+ {/if}
68
76
  <blockquote class="space-y-2 mt-2 mr-4">
69
77
  <p class="text-sm text-shadow-lg">
70
- &ldquo;This library has saved me countless hours of work and helped me deliver
71
- stunning designs to my clients faster than ever before. Highly
72
- recommended!&rdquo;
78
+ {quote}
73
79
  </p>
74
- <footer class="text-xs text-shadow-lg">Sofia Davis</footer>
80
+ <footer class="text-xs text-shadow-lg">{quoteAuthor}</footer>
75
81
  </blockquote>
76
82
  </div>
77
83
  <div class="absolute top-0 bottom-0 left-0 right-0 bg-primary-500/10 filter blur(2px)"></div>