@oneuptime/common 10.0.28 → 10.0.30

package/Server/Utils/StartServer.ts

@@ -11,6 +11,7 @@ import "./Environment";
 import Express, {
   ExpressApplication,
   ExpressJson,
+  ExpressRaw,
   ExpressRequest,
   ExpressResponse,
   ExpressStatic,
@@ -114,8 +115,26 @@ app.use((req: ExpressRequest, _res: ExpressResponse, next: NextFunction) => {
   next();
 });
 
+/*
+ * Parse protobuf (binary) bodies for OTLP ingestion before JSON/gzip middleware.
+ * The .NET OpenTelemetry SDK (and others) send telemetry data as application/x-protobuf.
+ * Without this, express.json() skips protobuf requests and req.body remains undefined.
+ */
+const protobufBodyParserMiddleware: RequestHandler = ExpressRaw({
+  type: ["application/x-protobuf", "application/protobuf"],
+  limit: "50mb",
+});
+
 app.use((req: OneUptimeRequest, res: ExpressResponse, next: NextFunction) => {
-  if (req.headers["content-encoding"] === "gzip") {
+  const contentType: string | undefined = req.headers["content-type"];
+
+  if (
+    contentType &&
+    (contentType.includes("application/x-protobuf") ||
+      contentType.includes("application/protobuf"))
+  ) {
+    protobufBodyParserMiddleware(req, res, next);
+  } else if (req.headers["content-encoding"] === "gzip") {
     const buffers: any = [];
 
     req.on("data", (chunk: any) => {

package/UI/Components/LogsViewer/LogsViewer.tsx

@@ -42,9 +42,18 @@ import {
   HistogramBucket,
   FacetData,
   ActiveFilter,
+  CORE_LOGS_TABLE_COLUMN_OPTIONS,
+  DEFAULT_LOGS_TABLE_COLUMNS,
+  getLogsAttributeColumnId,
+  LogsSavedViewOption,
+  LogsTableColumnOption,
+  LogsViewMode,
+  normalizeLogsTableColumns,
 } from "./types";
+import LogsAnalyticsView from "./components/LogsAnalyticsView";
 import { queryStringToFilter } from "../../../Types/Log/LogQueryToFilter";
 import RangeStartAndEndDateTime from "../../../Types/Time/RangeStartAndEndDateTime";
+import TimeRange from "../../../Types/Time/TimeRange";
 
 export interface ComponentProps {
   logs: Array<Log>;
@@ -79,11 +88,29 @@ export interface ComponentProps {
   onFieldValueSelect?: ((fieldKey: string, value: string) => void) | undefined;
   timeRange?: RangeStartAndEndDateTime | undefined;
   onTimeRangeChange?: ((value: RangeStartAndEndDateTime) => void) | undefined;
+  selectedColumns?: Array<string> | undefined;
+  onSelectedColumnsChange?: ((columns: Array<string>) => void) | undefined;
+  savedViews?: Array<LogsSavedViewOption> | undefined;
+  selectedSavedViewId?: string | null;
+  onSavedViewSelect?: ((viewId: string) => void) | undefined;
+  onCreateSavedView?: (() => void) | undefined;
+  onEditSavedView?: ((viewId: string) => void) | undefined;
+  onDeleteSavedView?: ((viewId: string) => void) | undefined;
+  onUpdateCurrentSavedView?: (() => void) | undefined;
+  viewMode?: LogsViewMode | undefined;
+  onViewModeChange?: ((mode: LogsViewMode) => void) | undefined;
+  analyticsServiceIds?: Array<string> | undefined;
+  analyticsAppliedFacetFilters?: Map<string, Set<string>> | undefined;
 }
 
 export type LogsSortField = LogsTableSortField;
 export type { LiveLogsOptions } from "./types";
-export type { HistogramBucket, FacetData, ActiveFilter } from "./types";
+export type {
+  HistogramBucket,
+  FacetData,
+  ActiveFilter,
+  LogsViewMode,
+} from "./types";
 
 const DEFAULT_PAGE_SIZE: number = 100;
 const PAGE_SIZE_OPTIONS: Array<number> = [100, 250, 500, 1000];
@@ -99,6 +126,32 @@ const severityWeight: Record<string, number> = {
   trace: 1,
 };
 
+function getEmptyMessageWithTimeRange(
+  timeRange: RangeStartAndEndDateTime | undefined,
+): string {
+  if (!timeRange) {
+    return "Adjust filters or check again later.";
+  }
+
+  if (timeRange.range === TimeRange.CUSTOM && timeRange.startAndEndDate) {
+    const startDate: Date = timeRange.startAndEndDate.startValue;
+    const endDate: Date = timeRange.startAndEndDate.endValue;
+    const fmt: (d: Date) => string = (d: Date): string => {
+      return d.toLocaleString("en-US", {
+        month: "short",
+        day: "numeric",
+        hour: "2-digit",
+        minute: "2-digit",
+      });
+    };
+
+    return `Time range: ${fmt(startDate)} – ${fmt(endDate)}. Try adjusting filters or expanding the time range.`;
+  }
+
+  const rangeLabel: string = timeRange.range.toLowerCase();
+  return `Time range: ${rangeLabel}. Try adjusting filters or expanding the time range.`;
+}
+
 const getSeverityWeight: (severity: string | undefined) => number = (
   severity: string | undefined,
 ): number => {
@@ -151,6 +204,12 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
   const [localSortOrder, setLocalSortOrder] = useState<SortOrder>(
     SortOrder.Descending,
   );
+  const [internalSelectedColumns, setInternalSelectedColumns] = useState<
+    Array<string>
+  >(DEFAULT_LOGS_TABLE_COLUMNS);
+
+  const [internalViewMode, setInternalViewMode] =
+    useState<LogsViewMode>("list");
 
   useEffect(() => {
     setFilterData(props.filterData);
@@ -174,6 +233,14 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     }
   }, [props.pageSize]);
 
+  useEffect(() => {
+    if (props.selectedColumns) {
+      setInternalSelectedColumns(
+        normalizeLogsTableColumns(props.selectedColumns),
+      );
+    }
+  }, [props.selectedColumns]);
+
   const currentPage: number = props.page ?? internalPage;
   const pageSize: number = props.pageSize ?? internalPageSize;
 
@@ -519,6 +586,26 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     };
   }, [props.onFieldValueSelect, serviceMap]);
 
+  const selectedColumns: Array<string> = props.selectedColumns
+    ? normalizeLogsTableColumns(props.selectedColumns)
+    : internalSelectedColumns;
+
+  const availableColumns: Array<LogsTableColumnOption> = useMemo(() => {
+    const attributeColumns: Array<LogsTableColumnOption> = [...logAttributes]
+      .sort((left: string, right: string) => {
+        return left.localeCompare(right);
+      })
+      .map((attributeKey: string): LogsTableColumnOption => {
+        return {
+          id: getLogsAttributeColumnId(attributeKey),
+          label: attributeKey,
+          attributeKey,
+        };
+      });
+
+    return [...CORE_LOGS_TABLE_COLUMN_OPTIONS, ...attributeColumns];
+  }, [logAttributes]);
+
   if (isPageLoading) {
     return <PageLoader isVisible={true} />;
   }
@@ -527,10 +614,47 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
     return <ErrorMessage message={pageError} />;
   }
 
+  const currentViewMode: LogsViewMode = props.viewMode ?? internalViewMode;
+
+  const handleViewModeChange: (mode: LogsViewMode) => void = (
+    mode: LogsViewMode,
+  ): void => {
+    if (!props.viewMode) {
+      setInternalViewMode(mode);
+    }
+
+    props.onViewModeChange?.(mode);
+  };
+
   const toolbarProps: LogsViewerToolbarProps = {
     resultCount: totalItems,
     currentPage,
     totalPages,
+    viewMode: currentViewMode,
+    onViewModeChange: handleViewModeChange,
+    savedViews: props.savedViews,
+    selectedSavedViewId: props.selectedSavedViewId,
+    onSavedViewSelect: props.onSavedViewSelect,
+    onCreateSavedView: props.onCreateSavedView,
+    onEditSavedView: props.onEditSavedView,
+    onDeleteSavedView: props.onDeleteSavedView,
+    onUpdateCurrentSavedView: props.onUpdateCurrentSavedView,
+    ...(props.onSelectedColumnsChange || props.selectedColumns
+      ? {
+          availableColumns,
+          selectedColumns,
+          onSelectedColumnsChange: (columns: Array<string>) => {
+            const nextColumns: Array<string> =
+              normalizeLogsTableColumns(columns);
+
+            if (!props.selectedColumns) {
+              setInternalSelectedColumns(nextColumns);
+            }
+
+            props.onSelectedColumnsChange?.(nextColumns);
+          },
+        }
+      : {}),
     ...(props.liveOptions ? { liveOptions: props.liveOptions } : {}),
     ...(props.timeRange && props.onTimeRangeChange
       ? {
@@ -577,73 +701,89 @@ const LogsViewer: FunctionComponent<ComponentProps> = (
         />
       )}
 
-      {/* Main content: sidebar + table */}
-      <div className="flex gap-3">
-        {showSidebar && props.facetData && (
-          <LogsFacetSidebar
-            facetData={props.facetData}
-            isLoading={props.facetLoading || false}
-            serviceMap={serviceMap}
-            onIncludeFilter={props.onFacetInclude || (() => {})}
-            onExcludeFilter={props.onFacetExclude || (() => {})}
-            activeFilters={props.activeFilters}
-          />
-        )}
-
-        <div className="min-w-0 flex-1">
-          <div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
-            {!props.showFilters && (
-              <div className="border-b border-gray-100 bg-gray-50/50 px-4 py-3">
-                <LogsViewerToolbar {...toolbarProps} />
-              </div>
-            )}
-
-            <LogsTable
-              logs={displayedLogs}
+      {/* Main content: analytics view or sidebar + table */}
+      {currentViewMode === "analytics" ? (
+        <LogsAnalyticsView
+          timeRange={props.timeRange || { range: TimeRange.PAST_ONE_HOUR }}
+          serviceIds={props.analyticsServiceIds}
+          appliedFacetFilters={props.analyticsAppliedFacetFilters || new Map()}
+          logAttributes={logAttributes}
+        />
+      ) : (
+        <div className="flex gap-3">
+          {showSidebar && props.facetData && (
+            <LogsFacetSidebar
+              facetData={props.facetData}
+              isLoading={props.facetLoading || false}
               serviceMap={serviceMap}
-              isLoading={props.isLoading}
-              emptyMessage={props.noLogsMessage}
-              onRowClick={(_log: Log, rowId: string) => {
-                setSelectedLogId((currentSelected: string | null) => {
-                  if (currentSelected === rowId) {
-                    return null;
-                  }
-
-                  return rowId;
-                });
-              }}
-              selectedLogId={selectedLogId}
-              sortField={sortField}
-              sortOrder={sortOrder}
-              onSortChange={handleSortChange}
-              renderExpandedContent={(log: Log) => {
-                return (
-                  <LogDetailsPanel
-                    log={log}
-                    serviceMap={serviceMap}
-                    onClose={() => {
-                      setSelectedLogId(null);
-                    }}
-                    getTraceRoute={props.getTraceRoute}
-                    getSpanRoute={props.getSpanRoute}
-                    variant="embedded"
-                  />
-                );
-              }}
-            />
-
-            <LogsPagination
-              currentPage={currentPage}
-              totalItems={totalItems}
-              pageSize={pageSize}
-              pageSizeOptions={PAGE_SIZE_OPTIONS}
-              onPageChange={handlePageChange}
-              onPageSizeChange={handlePageSizeChange}
-              isDisabled={props.isLoading || totalItems === 0}
+              onIncludeFilter={props.onFacetInclude || (() => {})}
+              onExcludeFilter={props.onFacetExclude || (() => {})}
+              activeFilters={props.activeFilters}
+              savedViews={props.savedViews}
+              selectedSavedViewId={props.selectedSavedViewId}
+              onSavedViewSelect={props.onSavedViewSelect}
             />
+          )}
+
+          <div className="min-w-0 flex-1">
+            <div className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm">
+              {!props.showFilters && (
+                <div className="border-b border-gray-100 bg-gray-50/50 px-4 py-3">
+                  <LogsViewerToolbar {...toolbarProps} />
+                </div>
+              )}
+
+              <LogsTable
+                logs={displayedLogs}
+                serviceMap={serviceMap}
+                isLoading={props.isLoading}
+                emptyMessage={
+                  props.noLogsMessage ||
+                  getEmptyMessageWithTimeRange(props.timeRange)
+                }
+                onRowClick={(_log: Log, rowId: string) => {
+                  setSelectedLogId((currentSelected: string | null) => {
+                    if (currentSelected === rowId) {
+                      return null;
+                    }
+
+                    return rowId;
+                  });
+                }}
+                selectedLogId={selectedLogId}
+                sortField={sortField}
+                sortOrder={sortOrder}
+                onSortChange={handleSortChange}
+                selectedColumns={selectedColumns}
+                renderExpandedContent={(log: Log) => {
+                  return (
+                    <LogDetailsPanel
+                      log={log}
+                      serviceMap={serviceMap}
+                      onClose={() => {
+                        setSelectedLogId(null);
+                      }}
+                      getTraceRoute={props.getTraceRoute}
+                      getSpanRoute={props.getSpanRoute}
+                      variant="embedded"
+                    />
+                  );
+                }}
+              />
+
+              <LogsPagination
+                currentPage={currentPage}
+                totalItems={totalItems}
+                pageSize={pageSize}
+                pageSizeOptions={PAGE_SIZE_OPTIONS}
+                onPageChange={handlePageChange}
+                onPageSizeChange={handlePageSizeChange}
+                isDisabled={props.isLoading || totalItems === 0}
+              />
+            </div>
           </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };

package/UI/Components/LogsViewer/components/ColumnSelector.tsx

@@ -0,0 +1,270 @@
+import React, {
+  ChangeEvent,
+  FunctionComponent,
+  ReactElement,
+  useMemo,
+  useState,
+} from "react";
+import {
+  DEFAULT_LOGS_TABLE_COLUMNS,
+  LogsTableColumnOption,
+  normalizeLogsTableColumns,
+} from "../types";
+import useComponentOutsideClick from "../../../Types/UseComponentOutsideClick";
+
+export interface ColumnSelectorProps {
+  availableColumns: Array<LogsTableColumnOption>;
+  selectedColumns: Array<string>;
+  onChange: (columns: Array<string>) => void;
+}
+
+const triggerButtonClassName: string =
+  "inline-flex items-center gap-1.5 rounded-md border border-gray-200 bg-white px-2.5 py-1.5 text-xs font-medium text-gray-700 shadow-sm transition-colors hover:border-gray-300 hover:bg-gray-50";
+
+const actionButtonClassName: string =
+  "rounded-md px-2 py-1 text-xs font-medium text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700";
+
+const ColumnSelector: FunctionComponent<ColumnSelectorProps> = (
+  props: ColumnSelectorProps,
+): ReactElement => {
+  const { ref, isComponentVisible, setIsComponentVisible } =
+    useComponentOutsideClick(false);
+  const [searchQuery, setSearchQuery] = useState<string>("");
+
+  const selectedColumnIds: Array<string> = useMemo(() => {
+    return normalizeLogsTableColumns(props.selectedColumns);
+  }, [props.selectedColumns]);
+
+  const availableColumnsById: Map<string, LogsTableColumnOption> =
+    useMemo(() => {
+      return new Map(
+        props.availableColumns.map((column: LogsTableColumnOption) => {
+          return [column.id, column] as [string, LogsTableColumnOption];
+        }),
+      );
+    }, [props.availableColumns]);
+
+  const selectedColumns: Array<LogsTableColumnOption> = useMemo(() => {
+    return selectedColumnIds.map((columnId: string): LogsTableColumnOption => {
+      return (
+        availableColumnsById.get(columnId) || {
+          id: columnId,
+          label: columnId,
+        }
+      );
+    });
+  }, [availableColumnsById, selectedColumnIds]);
+
+  const availableColumns: Array<LogsTableColumnOption> = useMemo(() => {
+    const normalizedSearchQuery: string = searchQuery.trim().toLowerCase();
+
+    return props.availableColumns.filter((column: LogsTableColumnOption) => {
+      if (selectedColumnIds.includes(column.id)) {
+        return false;
+      }
+
+      if (!normalizedSearchQuery) {
+        return true;
+      }
+
+      return column.label.toLowerCase().includes(normalizedSearchQuery);
+    });
+  }, [props.availableColumns, searchQuery, selectedColumnIds]);
+
+  const updateColumns: (columns: Array<string>) => void = (
+    columns: Array<string>,
+  ): void => {
+    props.onChange(normalizeLogsTableColumns(columns));
+  };
+
+  const moveColumn: (columnId: string, direction: -1 | 1) => void = (
+    columnId: string,
+    direction: -1 | 1,
+  ): void => {
+    const currentIndex: number = selectedColumnIds.indexOf(columnId);
+
+    if (currentIndex === -1) {
+      return;
+    }
+
+    const nextIndex: number = currentIndex + direction;
+
+    if (nextIndex < 0 || nextIndex >= selectedColumnIds.length) {
+      return;
+    }
+
+    const nextColumns: Array<string> = [...selectedColumnIds];
+    const currentColumn: string = nextColumns[currentIndex] as string;
+    nextColumns[currentIndex] = nextColumns[nextIndex] as string;
+    nextColumns[nextIndex] = currentColumn;
+
+    updateColumns(nextColumns);
+  };
+
+  const removeColumn: (columnId: string) => void = (columnId: string): void => {
+    if (selectedColumnIds.length <= 1) {
+      return;
+    }
+
+    updateColumns(
+      selectedColumnIds.filter((selectedColumnId: string) => {
+        return selectedColumnId !== columnId;
+      }),
+    );
+  };
+
+  const addColumn: (columnId: string) => void = (columnId: string): void => {
+    updateColumns([...selectedColumnIds, columnId]);
+  };
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        type="button"
+        className={triggerButtonClassName}
+        onClick={() => {
+          setIsComponentVisible(!isComponentVisible);
+        }}
+        aria-haspopup="dialog"
+        aria-expanded={isComponentVisible}
+      >
+        <span>Columns</span>
+        <span className="text-xs text-gray-400">
+          {selectedColumnIds.length}
+        </span>
+      </button>
+
+      {isComponentVisible && (
+        <div className="absolute right-0 z-20 mt-2 w-96 rounded-lg border border-gray-200 bg-white p-4 shadow-xl">
+          <div className="flex items-center justify-between gap-3">
+            <div>
+              <h3 className="text-sm font-semibold text-gray-900">Columns</h3>
+              <p className="text-xs text-gray-500">
+                Add, remove, and reorder visible columns.
+              </p>
+            </div>
+
+            <button
+              type="button"
+              className="text-xs font-medium text-gray-500 transition-colors hover:text-gray-700"
+              onClick={() => {
+                updateColumns(DEFAULT_LOGS_TABLE_COLUMNS);
+              }}
+            >
+              Reset
+            </button>
+          </div>
+
+          <div className="mt-4">
+            <p className="mb-2 text-[11px] font-semibold uppercase tracking-wider text-gray-400">
+              Selected
+            </p>
+
+            <div className="space-y-2">
+              {selectedColumns.map(
+                (column: LogsTableColumnOption, index: number) => {
+                  const isFirst: boolean = index === 0;
+                  const isLast: boolean = index === selectedColumns.length - 1;
+
+                  return (
+                    <div
+                      key={column.id}
+                      className="flex items-center justify-between rounded-md border border-gray-200 px-3 py-2"
+                    >
+                      <span className="min-w-0 truncate text-sm text-gray-700">
+                        {column.label}
+                      </span>
+
+                      <div className="flex items-center gap-1">
+                        <button
+                          type="button"
+                          className={actionButtonClassName}
+                          onClick={() => {
+                            moveColumn(column.id, -1);
+                          }}
+                          disabled={isFirst}
+                        >
+                          Up
+                        </button>
+                        <button
+                          type="button"
+                          className={actionButtonClassName}
+                          onClick={() => {
+                            moveColumn(column.id, 1);
+                          }}
+                          disabled={isLast}
+                        >
+                          Down
+                        </button>
+                        <button
+                          type="button"
+                          className={actionButtonClassName}
+                          onClick={() => {
+                            removeColumn(column.id);
+                          }}
+                          disabled={selectedColumns.length <= 1}
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    </div>
+                  );
+                },
+              )}
+            </div>
+          </div>
+
+          <div className="mt-4">
+            <div className="mb-2 flex items-center justify-between gap-3">
+              <p className="text-[11px] font-semibold uppercase tracking-wider text-gray-400">
+                Available
+              </p>
+
+              <input
+                value={searchQuery}
+                onChange={(event: ChangeEvent<HTMLInputElement>) => {
+                  setSearchQuery(event.target.value);
+                }}
+                placeholder="Search columns"
+                className="w-40 rounded-md border border-gray-200 px-2 py-1 text-xs text-gray-600 focus:border-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-100"
+              />
+            </div>
+
+            <div className="max-h-72 space-y-2 overflow-y-auto pr-1">
+              {availableColumns.length === 0 && (
+                <div className="rounded-md border border-dashed border-gray-200 px-3 py-4 text-sm text-gray-500">
+                  No matching columns available.
+                </div>
+              )}
+
+              {availableColumns.map((column: LogsTableColumnOption) => {
+                return (
+                  <div
+                    key={column.id}
+                    className="flex items-center justify-between rounded-md border border-gray-100 px-3 py-2"
+                  >
+                    <span className="min-w-0 truncate text-sm text-gray-700">
+                      {column.label}
+                    </span>
+
+                    <button
+                      type="button"
+                      className={actionButtonClassName}
+                      onClick={() => {
+                        addColumn(column.id);
+                      }}
+                    >
+                      Add
+                    </button>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ColumnSelector;

package/UI/Components/LogsViewer/components/LiveLogsToggle.tsx

@@ -9,10 +9,10 @@ const LiveLogsToggle: FunctionComponent<LiveLogsToggleProps> = (
   const { isLive, onToggle, isDisabled } = props;
 
   const baseClasses: string =
-    "inline-flex items-center gap-2 rounded-lg border px-3 py-1.5 text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-emerald-200";
+    "inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-all focus:outline-none focus:ring-2 focus:ring-emerald-200";
   const activeClasses: string = isLive
     ? "border-emerald-300 bg-emerald-50 text-emerald-700 hover:bg-emerald-100"
-    : "border-gray-200 bg-white text-gray-600 hover:bg-gray-50";
+    : "border-gray-200 bg-white text-gray-700 hover:bg-gray-50";
   const disabledClasses: string = isDisabled
     ? "cursor-not-allowed opacity-50"
     : "cursor-pointer";
@@ -36,7 +36,7 @@ const LiveLogsToggle: FunctionComponent<LiveLogsToggleProps> = (
           isLive ? "bg-emerald-500 animate-pulse" : "bg-gray-300"
         }`}
       />
-      <span className="font-semibold">Live</span>
+      <span>Live</span>
     </button>
   );
 

package/UI/Components/LogsViewer/components/LogTimeRangePicker.tsx

@@ -119,10 +119,10 @@ const LogTimeRangePicker: FunctionComponent<LogTimeRangePickerProps> = (
     <div ref={containerRef} className="relative">
       <button
         type="button"
-        className={`flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium transition-colors ${
+        className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors ${
           isOpen
             ? "border-indigo-300 bg-indigo-50 text-indigo-700"
-            : "border-gray-200 bg-white text-gray-600 hover:border-gray-300 hover:bg-gray-50"
+            : "border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50"
         }`}
         onClick={() => {
           setIsOpen(!isOpen);