feat(events): add event creation form components

src/components/custom-ui/labeled-input.tsx

@@ -1,4 +1,4 @@
-import { Input } from '@/components/ui/input';
+import { Input, Textarea } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 
 export default function LabeledInput({
@@ -7,6 +7,7 @@ export default function LabeledInput({
   placeholder,
   value,
   name,
+  variantSize = 'default',
   autocomplete,
   error,
   ...rest
@@ -16,22 +17,37 @@ export default function LabeledInput({
   placeholder?: string;
   value?: string;
   name?: string;
+  variantSize?: 'default' | 'big' | 'textarea';
   autocomplete?: string;
   error?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>) {
   return (
     <div className='grid grid-cols-1 gap-1'>
       <Label htmlFor={name}>{label}</Label>
-
-      <Input
-        type={type}
-        placeholder={placeholder}
-        defaultValue={value}
-        id={name}
-        name={name}
-        autoComplete={autocomplete}
-        {...rest}
-      />
+      {variantSize === 'textarea' ? (
+        <Textarea
+          placeholder={placeholder}
+          defaultValue={value}
+          id={name}
+          name={name}
+          rows={3}
+        />
+      ) : (
+        <Input
+          type={type}
+          placeholder={placeholder}
+          defaultValue={value}
+          id={name}
+          name={name}
+          className={
+            variantSize === 'big'
+              ? 'h-12 file:h-10 text-lg gplaceholder:text-lg sm:text-2xl sm:placeholder:text-2xl'
+              : ''
+          }
+          autoComplete={autocomplete}
+          {...rest}
+        />
+      )}
       {error && <p className='text-red-500 text-sm mt-1'>{error}</p>}
     </div>
   );

src/components/custom-ui/participant-list-entry.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Image from 'next/image';
+import { user_default_dark } from '@/assets/usericon/default/defaultusericon-export';
+import { user_default_light } from '@/assets/usericon/default/defaultusericon-export';
+import { useTheme } from 'next-themes';
+
+type ParticipantListEntryProps = {
+  participant: string;
+  imageSrc?: string | null;
+};
+
+export default function ParticipantListEntry({
+  participant,
+  imageSrc,
+}: ParticipantListEntryProps) {
+  const { resolvedTheme } = useTheme();
+  const defaultImage =
+    resolvedTheme === 'dark' ? user_default_dark : user_default_light;
+
+  const finalImageSrc = imageSrc ?? defaultImage;
+
+  return (
+    <div className='flex items-center gap-2 py-1 ml-5'>
+      <Image src={finalImageSrc} alt='Avatar' width={30} height={30} />
+      <span>{participant}</span>
+    </div>
+  );
+}