feat: refactor UI components and integrate Tailwind CSS for styling
This commit is contained in:
parent
fc3431f8f4
commit
e75e1eb2db
16 changed files with 359 additions and 263 deletions
3
.vscode/extensions.json
vendored
3
.vscode/extensions.json
vendored
|
|
@ -2,6 +2,7 @@
|
|||
"recommendations": [
|
||||
"esbenp.prettier-vscode",
|
||||
"vivaxy.vscode-conventional-commits",
|
||||
"dbaeumer.vscode-eslint"
|
||||
"dbaeumer.vscode-eslint",
|
||||
"bradlc.vscode-tailwindcss"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
21
components.json
Normal file
21
components.json
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{
|
||||
"$schema": "https://ui.shadcn.com/schema.json",
|
||||
"style": "new-york",
|
||||
"rsc": true,
|
||||
"tsx": true,
|
||||
"tailwind": {
|
||||
"config": "",
|
||||
"css": "src/app/globals.css",
|
||||
"baseColor": "gray",
|
||||
"cssVariables": true,
|
||||
"prefix": ""
|
||||
},
|
||||
"aliases": {
|
||||
"components": "@/components",
|
||||
"utils": "@/lib/utils",
|
||||
"ui": "@/components/ui",
|
||||
"lib": "@/lib",
|
||||
"hooks": "@/hooks"
|
||||
},
|
||||
"iconLibrary": "lucide"
|
||||
}
|
||||
|
|
@ -15,10 +15,15 @@
|
|||
"@fortawesome/free-regular-svg-icons": "^6.7.2",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.7.2",
|
||||
"@fortawesome/react-fontawesome": "^0.2.2",
|
||||
"@radix-ui/react-slot": "^1.2.2",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"lucide-react": "^0.508.0",
|
||||
"next": "15.3.2",
|
||||
"next-auth": "^5.0.0-beta.25",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
"react-dom": "^19.0.0",
|
||||
"tailwind-merge": "^3.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "3.3.1",
|
||||
|
|
@ -33,6 +38,7 @@
|
|||
"prettier": "3.5.3",
|
||||
"prisma": "6.7.0",
|
||||
"tailwindcss": "^4.1.5",
|
||||
"tw-animate-css": "^1.2.9",
|
||||
"typescript": "5.8.3"
|
||||
},
|
||||
"packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
|
||||
|
|
|
|||
|
|
@ -1,80 +1,215 @@
|
|||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #3a3a3a;
|
||||
--radius: 0.625rem;
|
||||
|
||||
--neutral: #808080;
|
||||
--background: oklch(1 0 0);
|
||||
|
||||
--primary-50: rgba(59, 130, 246, 0.5);
|
||||
--primary-75: rgba(59, 130, 246, 0.75);
|
||||
--primary-100: rgba(59, 130, 246, 1);
|
||||
--foreground: oklch(0.13 0.028 261.692);
|
||||
|
||||
--warning-50: rgba(245, 158, 11, 0.5);
|
||||
--warning-75: rgba(245, 158, 11, 0.75);
|
||||
--warning-100: rgba(245, 158, 11, 1);
|
||||
--card: oklch(1 0 0);
|
||||
|
||||
--success-50: rgba(22, 163, 74, 0.5);
|
||||
--success-75: rgba(22, 163, 74, 0.75);
|
||||
--success-100: rgba(22, 163, 74, 1);
|
||||
--card-foreground: oklch(0.13 0.028 261.692);
|
||||
|
||||
--danger-50: rgba(220, 38, 38, 0.5);
|
||||
--danger-75: rgba(220, 38, 38, 0.75);
|
||||
--danger-100: rgba(220, 38, 38, 1);
|
||||
--popover: oklch(1 0 0);
|
||||
|
||||
--button-text-size: 18px;
|
||||
--popover-foreground: oklch(0.13 0.028 261.692);
|
||||
|
||||
--neutral-50: rgb(204, 204, 204, 0.5);
|
||||
--neutral-75: rgb(204, 204, 204, 0.75);
|
||||
--neutral-100: rgb(204, 204, 204, 1);
|
||||
--primary: oklch(0.21 0.034 264.665);
|
||||
|
||||
--textbox-50: rgb(204, 204, 204, 0.5);
|
||||
--textbox-75: rgb(204, 204, 204, 0.75);
|
||||
--textbox-100: rgb(204, 204, 204, 1);
|
||||
--primary-foreground: oklch(0.985 0.002 247.839);
|
||||
|
||||
--base-1: #f3f3f3;
|
||||
--secondary: oklch(0.967 0.003 264.542);
|
||||
|
||||
--secondary-foreground: oklch(0.21 0.034 264.665);
|
||||
|
||||
--muted: oklch(0.967 0.003 264.542);
|
||||
|
||||
--muted-foreground: oklch(0.551 0.027 264.364);
|
||||
|
||||
--accent: oklch(0.967 0.003 264.542);
|
||||
|
||||
--accent-foreground: oklch(0.21 0.034 264.665);
|
||||
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
|
||||
--border: oklch(0.928 0.006 264.531);
|
||||
|
||||
--input: oklch(0.928 0.006 264.531);
|
||||
|
||||
--ring: oklch(0.707 0.022 261.325);
|
||||
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
|
||||
--sidebar: oklch(0.985 0.002 247.839);
|
||||
|
||||
--sidebar-foreground: oklch(0.13 0.028 261.692);
|
||||
|
||||
--sidebar-primary: oklch(0.21 0.034 264.665);
|
||||
|
||||
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
|
||||
|
||||
--sidebar-accent: oklch(0.967 0.003 264.542);
|
||||
|
||||
--sidebar-accent-foreground: oklch(0.21 0.034 264.665);
|
||||
|
||||
--sidebar-border: oklch(0.928 0.006 264.531);
|
||||
|
||||
--sidebar-ring: oklch(0.707 0.022 261.325);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #e5e7eb;
|
||||
@theme inline {
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
|
||||
--textbox-50: rgb(75, 85, 99, 0.5);
|
||||
--textbox-75: rgb(75, 85, 99, 0.75);
|
||||
--textbox-100: rgb(75, 85, 99, 1);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
|
||||
--base-1: #111111;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
--radius-lg: var(--radius);
|
||||
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
--color-background: var(--background);
|
||||
|
||||
--color-foreground: var(--foreground);
|
||||
|
||||
--color-card: var(--card);
|
||||
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
|
||||
--color-popover: var(--popover);
|
||||
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
|
||||
--color-primary: var(--primary);
|
||||
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
|
||||
--color-secondary: var(--secondary);
|
||||
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
|
||||
--color-muted: var(--muted);
|
||||
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
|
||||
--color-accent: var(--accent);
|
||||
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
|
||||
--color-destructive: var(--destructive);
|
||||
|
||||
--color-border: var(--border);
|
||||
|
||||
--color-input: var(--input);
|
||||
|
||||
--color-ring: var(--ring);
|
||||
|
||||
--color-chart-1: var(--chart-1);
|
||||
|
||||
--color-chart-2: var(--chart-2);
|
||||
|
||||
--color-chart-3: var(--chart-3);
|
||||
|
||||
--color-chart-4: var(--chart-4);
|
||||
|
||||
--color-chart-5: var(--chart-5);
|
||||
|
||||
--color-sidebar: var(--sidebar);
|
||||
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.13 0.028 261.692);
|
||||
|
||||
--foreground: oklch(0.985 0.002 247.839);
|
||||
|
||||
--card: oklch(0.21 0.034 264.665);
|
||||
|
||||
--card-foreground: oklch(0.985 0.002 247.839);
|
||||
|
||||
--popover: oklch(0.21 0.034 264.665);
|
||||
|
||||
--popover-foreground: oklch(0.985 0.002 247.839);
|
||||
|
||||
--primary: oklch(0.928 0.006 264.531);
|
||||
|
||||
--primary-foreground: oklch(0.21 0.034 264.665);
|
||||
|
||||
--secondary: oklch(0.278 0.033 256.848);
|
||||
|
||||
--secondary-foreground: oklch(0.985 0.002 247.839);
|
||||
|
||||
--muted: oklch(0.278 0.033 256.848);
|
||||
|
||||
--muted-foreground: oklch(0.707 0.022 261.325);
|
||||
|
||||
--accent: oklch(0.278 0.033 256.848);
|
||||
|
||||
--accent-foreground: oklch(0.985 0.002 247.839);
|
||||
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
|
||||
--ring: oklch(0.551 0.027 264.364);
|
||||
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
|
||||
--sidebar: oklch(0.21 0.034 264.665);
|
||||
|
||||
--sidebar-foreground: oklch(0.985 0.002 247.839);
|
||||
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
|
||||
--sidebar-primary-foreground: oklch(0.985 0.002 247.839);
|
||||
|
||||
--sidebar-accent: oklch(0.278 0.033 256.848);
|
||||
|
||||
--sidebar-accent-foreground: oklch(0.985 0.002 247.839);
|
||||
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
|
||||
--sidebar-ring: oklch(0.551 0.027 264.364);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
body:has(.loginContainer) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100svh;
|
||||
}
|
||||
|
||||
.loginContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
padding: 2rem;
|
||||
width: 300px;
|
||||
|
||||
background-color: var(--base-1);
|
||||
border-radius: 1rem;
|
||||
border: 2px solid var(--foreground);
|
||||
}
|
||||
|
||||
.loginContainer h1 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.loginContainer form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
|
@ -3,8 +3,6 @@ import SSOLogin from '@/components/user/sso-login-button';
|
|||
import LoginForm from '@/components/user/login-form';
|
||||
import { redirect } from 'next/navigation';
|
||||
|
||||
import style from './login.module.css';
|
||||
|
||||
import '@/app/globals.css';
|
||||
|
||||
export default async function LoginPage() {
|
||||
|
|
@ -15,16 +13,18 @@ export default async function LoginPage() {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className={style.loginContainer}>
|
||||
<h1>Login</h1>
|
||||
<div className='flex flex-col items-center justify-center h-screen'>
|
||||
<div className='flex flex-col items-center justify-center w-full max-w-sm p-15 gap-10 bg-white border border-gray-300 rounded-lg shadow-md'>
|
||||
<h1>Login</h1>
|
||||
|
||||
<LoginForm></LoginForm>
|
||||
<LoginForm></LoginForm>
|
||||
|
||||
<hr style={{ width: 230 }} />
|
||||
<hr style={{ width: 230 }} />
|
||||
|
||||
{process.env.AUTH_AUTHENTIK_ISSUER && (
|
||||
<SSOLogin provider='authentik' providerDisplayName='SSO' />
|
||||
)}
|
||||
{process.env.AUTH_AUTHENTIK_ISSUER && (
|
||||
<SSOLogin provider='authentik' providerDisplayName='SSO' />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,60 +0,0 @@
|
|||
.button {
|
||||
background-color: var(--color-50);
|
||||
border-radius: 16px;
|
||||
padding: 10px 20px;
|
||||
outline: none;
|
||||
border: 2px solid var(--color-100);
|
||||
transition: background-color 0.3s ease;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: var(--color-75);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
background-color: var(--color-100);
|
||||
}
|
||||
|
||||
.button span {
|
||||
color: var(--foreground);
|
||||
font-size: var(--button-text-size);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.icon {
|
||||
display: grid;
|
||||
grid-template-columns: 25px 1fr;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.style_primary {
|
||||
--color-50: var(--primary-50);
|
||||
--color-75: var(--primary-75);
|
||||
--color-100: var(--primary-100);
|
||||
}
|
||||
|
||||
.style_warning {
|
||||
--color-50: var(--warning-50);
|
||||
--color-75: var(--warning-75);
|
||||
--color-100: var(--warning-100);
|
||||
}
|
||||
|
||||
.style_success {
|
||||
--color-50: var(--success-50);
|
||||
--color-75: var(--success-75);
|
||||
--color-100: var(--success-100);
|
||||
}
|
||||
|
||||
.style_danger {
|
||||
--color-50: var(--danger-50);
|
||||
--color-75: var(--danger-75);
|
||||
--color-100: var(--danger-100);
|
||||
}
|
||||
|
||||
.style_neutral {
|
||||
--color-50: var(--neutral-50);
|
||||
--color-75: var(--neutral-75);
|
||||
--color-100: var(--neutral-100);
|
||||
}
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
import style from './button.module.css';
|
||||
|
||||
import { IconProp } from '@fortawesome/fontawesome-svg-core';
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
|
||||
export default function Button({
|
||||
type,
|
||||
children,
|
||||
mode = 'primary',
|
||||
icon,
|
||||
width,
|
||||
}: {
|
||||
type?: 'button' | 'submit' | 'reset';
|
||||
children?: React.ReactNode;
|
||||
mode?: 'primary' | 'warning' | 'success' | 'danger' | 'neutral';
|
||||
icon?: IconProp;
|
||||
width?: number;
|
||||
}) {
|
||||
if (!icon) {
|
||||
return (
|
||||
<button
|
||||
className={style.button + ' ' + style['style_' + mode]}
|
||||
type={type}
|
||||
style={{
|
||||
width: width ? `${width}px` : '100%',
|
||||
}}
|
||||
>
|
||||
<span>{children}</span>
|
||||
</button>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<button
|
||||
className={
|
||||
style.button + ' ' + style['style_' + mode] + ' ' + style['icon']
|
||||
}
|
||||
type={type}
|
||||
style={{
|
||||
width: width ? `${width}px` : '100%',
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={icon} height={25} />
|
||||
<span>{children}</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
.input,
|
||||
.input * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.input {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.input input {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border: 1px solid var(--textbox-75);
|
||||
border-radius: 16px;
|
||||
padding: 10px 20px;
|
||||
background-color: var(--textbox-50);
|
||||
color: var(--foreground);
|
||||
font-size: 16px;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.input input:hover {
|
||||
background-color: var(--textbox-75);
|
||||
border-color: var(--textbox-100);
|
||||
}
|
||||
|
||||
.input input:focus {
|
||||
outline: none;
|
||||
background-color: var(--textbox-100);
|
||||
border-color: var(--primary-100);
|
||||
box-shadow: 0 0 0 2px var(--primary-50);
|
||||
}
|
||||
|
|
@ -1,5 +1,3 @@
|
|||
import style from './labeled-input.module.css';
|
||||
|
||||
export default function LabeledInput({
|
||||
type,
|
||||
width,
|
||||
|
|
@ -17,8 +15,9 @@ export default function LabeledInput({
|
|||
|
||||
if (!label) {
|
||||
return (
|
||||
<div className={style.input}>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<input
|
||||
className='border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500'
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
defaultValue={value}
|
||||
|
|
@ -30,12 +29,11 @@ export default function LabeledInput({
|
|||
);
|
||||
} else {
|
||||
return (
|
||||
<div className={style.input}>
|
||||
<label htmlFor={randomId} className={style['label']}>
|
||||
{label}
|
||||
</label>
|
||||
<div className='flex flex-col gap-2'>
|
||||
<label htmlFor={randomId}>{label}</label>
|
||||
|
||||
<input
|
||||
className='border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500'
|
||||
id={randomId}
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
|
|
|
|||
59
src/components/ui/button.tsx
Normal file
59
src/components/ui/button.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import * as React from "react"
|
||||
import { Slot } from "@radix-ui/react-slot"
|
||||
import { cva, type VariantProps } from "class-variance-authority"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||
icon: "size-9",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
)
|
||||
|
||||
function Button({
|
||||
className,
|
||||
variant,
|
||||
size,
|
||||
asChild = false,
|
||||
...props
|
||||
}: React.ComponentProps<"button"> &
|
||||
VariantProps<typeof buttonVariants> & {
|
||||
asChild?: boolean
|
||||
}) {
|
||||
const Comp = asChild ? Slot : "button"
|
||||
|
||||
return (
|
||||
<Comp
|
||||
data-slot="button"
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Button, buttonVariants }
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import LabeledInput from '@/components/labeled-input';
|
||||
import Button from '../button';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export default function LoginForm() {
|
||||
return (
|
||||
<div>
|
||||
<form>
|
||||
<form className='flex flex-col gap-4'>
|
||||
<LabeledInput
|
||||
type='email'
|
||||
label='E-Mail'
|
||||
|
|
@ -15,7 +15,7 @@ export default function LoginForm() {
|
|||
label='Password'
|
||||
placeholder='Enter your Password'
|
||||
/>
|
||||
<Button type='submit' mode='neutral' width={250}>
|
||||
<Button type='submit' variant='secondary'>
|
||||
Login
|
||||
</Button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { signIn } from '@/auth';
|
||||
import Button from '../button';
|
||||
import { faOpenid } from '@fortawesome/free-brands-svg-icons';
|
||||
import { Button } from '@/components/ui/button';
|
||||
//import { faOpenid } from '@fortawesome/free-brands-svg-icons';
|
||||
|
||||
export default function SSOLogin({
|
||||
provider,
|
||||
|
|
@ -11,12 +11,17 @@ export default function SSOLogin({
|
|||
}) {
|
||||
return (
|
||||
<form
|
||||
className='flex flex-col items-center gap-4 w-full'
|
||||
action={async () => {
|
||||
'use server';
|
||||
await signIn(provider);
|
||||
}}
|
||||
>
|
||||
<Button type='submit' mode='warning' icon={faOpenid} width={250}>
|
||||
<Button
|
||||
className='w-full'
|
||||
type='submit'
|
||||
variant='default' /*icon={faOpenid}*/
|
||||
>
|
||||
Login with {providerDisplayName}
|
||||
</Button>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { signOut } from '@/auth';
|
||||
import Button from '../button';
|
||||
import { faDoorOpen } from '@fortawesome/free-solid-svg-icons';
|
||||
import { Button } from '@/components/ui/button';
|
||||
//import { faDoorOpen } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
export function Logout() {
|
||||
return (
|
||||
|
|
@ -10,7 +10,7 @@ export function Logout() {
|
|||
await signOut({ redirectTo: '/login' });
|
||||
}}
|
||||
>
|
||||
<Button type='submit' mode='primary' icon={faDoorOpen}>
|
||||
<Button type='submit' variant='destructive' /*icon={faDoorOpen}*/>
|
||||
Sign Out
|
||||
</Button>
|
||||
</form>
|
||||
|
|
|
|||
6
src/lib/utils.ts
Normal file
6
src/lib/utils.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
import { clsx, type ClassValue } from "clsx"
|
||||
import { twMerge } from "tailwind-merge"
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
39
yarn.lock
39
yarn.lock
|
|
@ -578,6 +578,18 @@
|
|||
dependencies:
|
||||
"@prisma/debug" "6.7.0"
|
||||
|
||||
"@radix-ui/react-compose-refs@1.1.2":
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz#a2c4c47af6337048ee78ff6dc0d090b390d2bb30"
|
||||
integrity sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==
|
||||
|
||||
"@radix-ui/react-slot@^1.2.2":
|
||||
version "1.2.2"
|
||||
resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.2.2.tgz#18e6533e778a2051edc2ad0773da8e22f03f626a"
|
||||
integrity sha512-y7TBO4xN4Y94FvcWIOIh18fM4R1A8S4q1jhoz4PNzOoHsFcN8pogcFmZrTYAm4F9VRUrWP/Mw7xSKybIeRI+CQ==
|
||||
dependencies:
|
||||
"@radix-ui/react-compose-refs" "1.1.2"
|
||||
|
||||
"@rtsao/scc@^1.1.0":
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
|
||||
|
|
@ -1169,11 +1181,23 @@ chalk@^4.0.0:
|
|||
ansi-styles "^4.1.0"
|
||||
supports-color "^7.1.0"
|
||||
|
||||
class-variance-authority@^0.7.1:
|
||||
version "0.7.1"
|
||||
resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.7.1.tgz#4008a798a0e4553a781a57ac5177c9fb5d043787"
|
||||
integrity sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==
|
||||
dependencies:
|
||||
clsx "^2.1.1"
|
||||
|
||||
client-only@0.0.1:
|
||||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
|
||||
integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
|
||||
|
||||
clsx@^2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
|
||||
integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
|
||||
|
||||
color-convert@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
|
||||
|
|
@ -2517,6 +2541,11 @@ loose-envify@^1.4.0:
|
|||
dependencies:
|
||||
js-tokens "^3.0.0 || ^4.0.0"
|
||||
|
||||
lucide-react@^0.508.0:
|
||||
version "0.508.0"
|
||||
resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.508.0.tgz#9155465e2051bb42a0ebb2d806f25a8b7125225f"
|
||||
integrity sha512-gcP16PnexqtOFrTtv98kVsGzTfnbPekzZiQfByi2S89xfk7E/4uKE1USZqccIp58v42LqkO7MuwpCqshwSrJCg==
|
||||
|
||||
math-intrinsics@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz#a0dd74be81e2aa5c2f27e65ce283605ee4e2b7f9"
|
||||
|
|
@ -3316,6 +3345,11 @@ supports-preserve-symlinks-flag@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
|
||||
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
|
||||
|
||||
tailwind-merge@^3.2.0:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-3.2.0.tgz#bedcf6a67a8c982da5913afcba9c854f35abb857"
|
||||
integrity sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==
|
||||
|
||||
tailwindcss@4.1.5, tailwindcss@^4.1.5:
|
||||
version "4.1.5"
|
||||
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-4.1.5.tgz#d35607f1a351051bd29cda7e59ab2c222ca8deb6"
|
||||
|
|
@ -3366,6 +3400,11 @@ tslib@^2.4.0, tslib@^2.8.0:
|
|||
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
|
||||
integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
|
||||
|
||||
tw-animate-css@^1.2.9:
|
||||
version "1.2.9"
|
||||
resolved "https://registry.yarnpkg.com/tw-animate-css/-/tw-animate-css-1.2.9.tgz#b25d5fb31fd3c3ec6d91c1d1842c0d7c0fdbd999"
|
||||
integrity sha512-9O4k1at9pMQff9EAcCEuy1UNO43JmaPQvq+0lwza9Y0BQ6LB38NiMj+qHqjoQf40355MX+gs6wtlR6H9WsSXFg==
|
||||
|
||||
type-check@^0.4.0, type-check@~0.4.0:
|
||||
version "0.4.0"
|
||||
resolved "https://registry.yarnpkg.com/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue