added basic data for event list, md editor and viewer

apps/hub/app/_components/PaginatedTable.tsx

@@ -90,9 +90,9 @@ export function PaginatedTable<TData>({
 
   return (
     <div className="space-y-4 m-4">
-      {searchFields.length > 0 && (
-        <div className="flex items-center  gap-2">
-          <div className="flex-1">{leftOfSearch}</div>
+      <div className="flex items-center  gap-2">
+        <div className="flex-1">{leftOfSearch}</div>
+        {searchFields.length > 0 && (
           <input
             type="text"
             placeholder="Suchen..."
@@ -103,9 +103,9 @@ export function PaginatedTable<TData>({
             }}
             className="input input-bordered w-full max-w-xs justify-end"
           />
-          <div className="flex justify-center">{rightOfSearch}</div>
-        </div>
-      )}
+        )}
+        <div className="flex justify-center">{rightOfSearch}</div>
+      </div>
       <SortableTable
         data={data}
         prismaModel={prismaModel}

apps/hub/app/_components/ui/MDEditor.tsx

@@ -0,0 +1,46 @@
+'use client';
+import MDEditor from '@uiw/react-md-editor';
+import {
+  FieldValues,
+  Path,
+  RegisterOptions,
+  UseFormReturn,
+} from 'react-hook-form';
+import { cn } from '../../../helper/cn';
+
+interface MarkdownEditorProps<T extends FieldValues> {
+  name: Path<T>;
+  form: UseFormReturn<T>;
+  formOptions?: RegisterOptions<T>;
+  label?: string;
+  placeholder?: string;
+  className?: string;
+}
+
+export const MarkdownEditor = <T extends FieldValues>({
+  name,
+  label = name,
+  placeholder = label,
+  form,
+  className,
+}: MarkdownEditorProps<T>) => {
+  return (
+    <label className="floating-label w-full mt-5">
+      <span className="text-lg flex items-center gap-2">{label}</span>
+      <div className={cn('border rounded-lg p-2 w-full', className)}>
+        <MDEditor
+          value={form.watch(name)}
+          onChange={(value) =>
+            form.setValue(name, value as any, { shouldValidate: true })
+          }
+          textareaProps={{ placeholder }}
+        />
+      </div>
+      {form.formState.errors[name] && (
+        <p className="text-error">
+          {form.formState.errors[name].message as string}
+        </p>
+      )}
+    </label>
+  );
+};

apps/hub/app/_components/ui/Switch.tsx

@@ -23,9 +23,11 @@ export const Switch = <T extends FieldValues>({
   ...inputProps
 }: InputProps<T>) => {
   return (
-    <div className="form-control">
-      <label className="label cursor-pointer">
-        <span className={cn('label-text', className)}>{label}</span>
+    <div className="form-control ">
+      <label className="label cursor-pointer w-full">
+        <span className={cn('label-text text-left w-full', className)}>
+          {label}
+        </span>
         <input type="checkbox" className="toggle" {...form.register(name)} />
       </label>
     </div>