feat: tickets categories management and display (#20)

## Description

Added ticket categories creation, management, and display
- Added the possibility to create edit or delete a ticket category
- Added the tickets categories section inside the event details
- Cleaned up some code
- Minor fixes

Closes: BON-732

<!-- Add a description of the changes that this PR introduces and the
files that
are the most critical to review. -->

---

### Author Checklist

*All items are required. Please add a note to the item if the item is
not applicable and
please add links to any relevant follow up issues.*

I have...

- [x] included the correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
  in the PR title
- [ ] targeted the correct branch
- [ ] provided a link to the relevant issue or specification
- [ ] reviewed "Files changed" and left comments if necessary
- [ ] confirmed all CI checks have passed

### Reviewers Checklist

*All items are required. Please add a note if the item is not applicable
and please add
your handle next to the items reviewed if you only reviewed selected
items.*

I have...

- [ ] confirmed the
correct [type
prefix](https://github.com/commitizen/conventional-commit-types/blob/v3.0.0/index.json)
in the PR title
- [ ] confirmed all author checklist items have been addressed

app/components/BondscapeButton.tsx

@@ -3,6 +3,7 @@ import { Button } from "primereact/button";
 
 interface Props {
   readonly text: string;
+  readonly outlined?: boolean;
   readonly type?: "submit" | "reset" | "button" | undefined;
   readonly disabled?: boolean;
   readonly loading?: boolean;
@@ -13,6 +14,7 @@ interface Props {
 
 const BondscapeButton = ({
   text,
+  outlined,
   type = "button",
   loading,
   disabled,
@@ -23,15 +25,16 @@ const BondscapeButton = ({
   return (
     <Button
       type={type}
+      outlined={outlined}
       disabled={disabled}
       onClick={onClick}
       loading={loading}
       className={`${className} ${
         disabled && "opacity-[0.5]"
-      } h-12 self-center bg-bondscape-primary justify-center items-center gap-2 inline-flex transition ease-in-out cursor-pointer`}
+      } h-12 self-center justify-center items-center gap-2 inline-flex transition ease-in-out cursor-pointer`}
     >
       <div
-        className={`${textClassName} text-center text-white font-semibold leading-normal`}
+        className={`${textClassName} text-center font-semibold leading-normal`}
       >
         {text}
       </div>

app/components/CreateEventHeader.tsx

@@ -5,16 +5,23 @@ import { useRouter } from "next/navigation";
 interface Props {
   readonly editMode?: boolean;
   readonly editButtonHref?: string;
+  readonly statusBarBackOverride?: () => void;
 }
 
-const CreateEventHeader = ({ editMode, editButtonHref }: Props) => {
+const CreateEventHeader = ({
+  editMode,
+  editButtonHref,
+  statusBarBackOverride,
+}: Props) => {
   const router = useRouter();
   return (
     <div className="inline-flex items-center mb-[40px]">
       <div className="flex flex-1 flex-row justify-between">
         <button
           className="self-start py-1 justify-center items-center gap-2 flex text-bondscape-primary fill-bondscape-primary hover:text-[#654A9C] hover:fill-[#654A9C] transition ease-in-out"
-          onClick={() => router.back()}
+          onClick={
+            statusBarBackOverride ? statusBarBackOverride : () => router.back()
+          }
         >
           <div className="w-4 h-4 p-0.5 justify-center items-center flex">
             <div className="w-3 h-3 relative">

app/components/NavigationBar.tsx

@@ -19,6 +19,7 @@ interface Props {
   readonly forceNavbarBgVisible?: boolean;
   readonly goBackStatusBar?: boolean;
   readonly detailsStatusBar?: boolean;
+  readonly statusBarBackOverride?: () => void;
   readonly editButtonHref?: string;
 }
 
@@ -27,6 +28,7 @@ const NavigationBar = ({
   forceNavbarBgVisible,
   goBackStatusBar,
   detailsStatusBar,
+  statusBarBackOverride,
   editButtonHref,
 }: Props) => {
   const activeTab = useActiveTab();
@@ -111,14 +113,19 @@ const NavigationBar = ({
         )}
         {goBackStatusBar && (
           <div className="flex flex-1 flex-col w-[70rem] xl:w-[90rem] self-center">
-            <CreateEventHeader />
+            <CreateEventHeader
+              editMode={false}
+              editButtonHref={undefined}
+              statusBarBackOverride={statusBarBackOverride}
+            />
           </div>
         )}
         {detailsStatusBar && (
           <div className="flex flex-1 flex-col w-[70rem] xl:w-[90rem] self-center">
             <CreateEventHeader
               editMode={true}
               editButtonHref={editButtonHref}
+              statusBarBackOverride={statusBarBackOverride}
             />
           </div>
         )}

app/creator/create/BigTextInput.tsx

@@ -9,6 +9,7 @@ interface Props {
   readonly inputClassName?: string;
   readonly maxLength?: number;
   readonly rows?: number;
+  readonly onChange?: (text: string) => void;
 }
 
 const BigTextInput = ({
@@ -19,6 +20,7 @@ const BigTextInput = ({
   inputClassName,
   maxLength,
   rows,
+  onChange,
 }: Props) => {
   return (
     <div className="flex flex-1 flex-col bg-bondscape-text_neutral_100 gap-[0.75rem] p-[1rem] rounded-[16px]">
@@ -36,6 +38,7 @@ const BigTextInput = ({
         rows={rows}
         maxLength={maxLength}
         placeholder={placeholder}
+        onChange={(e: any) => onChange && onChange(e.target.value)}
       />
     </div>
   );

app/creator/create/BondscapeDateTimePicker/BondscapeDateTimePicker.tsx

@@ -4,6 +4,8 @@ import { DatePicker } from "antd";
 import dayjs from "dayjs";
 
 interface Props {
+  readonly startLabel?: string;
+  readonly endLabel?: string;
   readonly initialStartValue?: string;
   readonly initialEndValue?: string;
   readonly required: boolean;
@@ -12,6 +14,8 @@ interface Props {
 }
 
 const BondscapeDateTimePicker = ({
+  startLabel,
+  endLabel,
   initialStartValue,
   initialEndValue,
   required,
@@ -49,9 +53,9 @@ const BondscapeDateTimePicker = ({
   return (
     <div className="flex flex-col bg-bondscape-text_neutral_100 gap-[0.75rem] rounded-[16px]  p-[1rem]">
       <div className="flex flex-row items-center gap-2">
-        <div className="flex gap-1 w-[110px]">
-          <label className="text-[16px] text-bondscape-text_neutral_900">
-            {"Event Starts"}
+        <div className="flex gap-1 min-w-[130px]">
+          <label className="text-[16px] text-bondscape-text_neutral_900 whitespace-nowrap">
+            {startLabel || "Event Starts"}
           </label>
           {required && <span className="text-[#FF8686]">*</span>}
         </div>
@@ -83,9 +87,9 @@ const BondscapeDateTimePicker = ({
         </div>
       </div>
       <div className="flex flex-row items-center gap-2">
-        <div className="flex gap-1 w-[110px]">
-          <label className="text-[16px] text-bondscape-text_neutral_900">
-            {"Event Ends"}
+        <div className="flex gap-1 min-w-[130px]">
+          <label className="text-[16px] text-bondscape-text_neutral_900 whitespace-nowrap">
+            {endLabel || "Event Ends"}
           </label>
           {required && <span className="text-[#FF8686]">*</span>}
         </div>

app/creator/create/BondscapeDateTimePicker/style.css

@@ -8,8 +8,8 @@
 }
 
 .ant-picker-input {
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding-top: 7px;
+  padding-bottom: 7px;
 }
 
 .ant-picker-ok .ant-btn {

app/creator/create/BondscapeSelectCategory.tsx

@@ -43,7 +43,7 @@ const BondscapeSelectCategory = ({
   return (
     <div className="flex flex-col bg-bondscape-text_neutral_100 gap-[0.75rem] rounded-[16px] p-[1rem]">
       <div className="flex flex-row items-center gap-2">
-        <div className="flex gap-1 w-[110px]">
+        <div className="flex gap-1 w-[130px]">
           <label className="text-[16px] text-bondscape-text_neutral_900">
             {"Category"}
           </label>

app/creator/create/BondscapeSelectCoHosts.tsx

@@ -1,23 +1,27 @@
 "use client";
-import React, { useCallback, useId, useState } from "react";
-import AsyncSelect from "react-select/async";
-import { components } from "react-select";
 import useCustomLazyQuery from "@/hooks/graphql/useCustomLazyQuery";
+import GetProfile from "@/services/graphql/queries/desmos/GetProfile";
 import { GQLProfileResult } from "@/types/desmos";
-import Image from "next/image";
 import { Organizer } from "@/types/event";
-import GetProfile from "@/services/graphql/queries/desmos/GetProfile";
+import Image from "next/image";
+import React, { useCallback, useId, useState } from "react";
+import { components } from "react-select";
+import AsyncSelect from "react-select/async";
 
 interface Props {
   readonly initialCoHosts?: Organizer[];
   readonly required: boolean;
   readonly onChange: (coHosts: Organizer[]) => void;
+  readonly label?: string;
+  readonly placeholder?: string;
 }
 
 const BondscapeSelectCoHosts = ({
   initialCoHosts,
   required,
   onChange,
+  label,
+  placeholder,
 }: Props) => {
   const [loading, setLoading] = useState(false);
 
@@ -50,9 +54,9 @@ const BondscapeSelectCoHosts = ({
   return (
     <div className="flex flex-col bg-bondscape-text_neutral_100 gap-[0.75rem] rounded-[16px] px-[1rem]">
       <div className="flex flex-row items-center gap-2">
-        <div className="flex gap-1 w-[110px]">
+        <div className="flex gap-1 w-[130px]">
           <label className="text-[16px] text-bondscape-text_neutral_900">
-            {"Co-Hosts"}
+            {label || "Co-Hosts"}
           </label>
           {required && <span className="text-[#FF8686]">*</span>}
         </div>
@@ -82,7 +86,7 @@ const BondscapeSelectCoHosts = ({
                 onChange([]);
               }
             }}
-            placeholder={"Add a dtag or a nickname"}
+            placeholder={placeholder || "Add a dtag or a nickname"}
             components={{
               MultiValueContainer: (props) => (
                 <div className="flex justify-center my-1 mr-0.5">
@@ -104,6 +108,7 @@ const BondscapeSelectCoHosts = ({
                           alt={"Profile pic"}
                           fill
                           className="object-cover rounded-[10px]"
+                          sizes={"20px"}
                         />
                       </div>
                       @{props.data.organizer?.dTag}

app/creator/create/BondscapeSelectTags.tsx

@@ -45,7 +45,7 @@ const BondscapeSelectTags = ({ initialTags, required, onChange }: Props) => {
   return (
     <div className="flex flex-col bg-bondscape-text_neutral_100 rounded-[16px] px-[1rem]">
       <div className="flex flex-row items-center gap-2">
-        <div className="flex gap-1 w-[110px]">
+        <div className="flex gap-1 w-[130px]">
           <label className="text-[16px] text-bondscape-text_neutral_900">
             {"Tags"}
           </label>