added invitations

2026-06-16 16:29:17 +02:00
parent 5404b1a535
commit 06cd53fe91
12 changed files with 509 additions and 7 deletions
@@ -14,3 +14,4 @@
@import './components/auth-layout.css';
@import './components/chat.css';
@import './components/lightbox.css';
+@import './components/invite-form.css';
@@ -0,0 +1,67 @@
+/* 13. InviteForm Component */
+.c-invite-form {
+    @apply mt-8;
+
+    .c-invite-form__card {
+        @apply overflow-hidden;
+        background-color: var(--card);
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+
+        .c-invite-form__body {
+            @apply p-6;
+            color: var(--foreground);
+
+            .c-invite-form__title {
+                @apply text-lg font-medium;
+            }
+
+            .c-invite-form__form {
+                @apply mt-6 space-y-6;
+
+                .c-invite-form__field {
+                    @apply block;
+
+                    .c-invite-form__label {
+                        @apply block text-sm font-medium;
+                        color: var(--foreground);
+                    }
+
+                    .c-invite-form__input {
+                        @apply mt-1 block w-full rounded-md border shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
+                        border-color: var(--border);
+                        background-color: var(--background);
+                        color: var(--foreground);
+                    }
+
+                    .c-invite-form__select {
+                        @apply mt-1 block w-full rounded-md border p-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:focus:border-indigo-600 dark:focus:ring-indigo-600;
+                        border-color: var(--border);
+                        background-color: var(--background);
+                        color: var(--foreground);
+                    }
+
+                    .c-invite-form__error {
+                        @apply text-sm;
+                        color: var(--destructive);
+                    }
+                }
+
+                .c-invite-form__actions {
+                    @apply flex items-center gap-4;
+
+                    .c-invite-form__submit-btn {
+                        @apply inline-flex items-center border border-transparent px-4 py-2 text-xs font-semibold tracking-widest uppercase transition duration-150 ease-in-out focus:ring-2 focus:outline-none;
+                        border-radius: var(--radius);
+                        background-color: var(--primary);
+                        color: var(--primary-foreground);
+
+                        &:hover {
+                            opacity: 0.9;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}