Initial commit

assets/js/hooks/Mapper/components/ui-kit/SystemViewStandalone/SystemViewStandalone.tsx

@@ -0,0 +1,70 @@
+import { getSystemClassStyles } from '@/hooks/Mapper/components/map/helpers';
+import { isWormholeSpace } from '@/hooks/Mapper/components/map/helpers/isWormholeSpace.ts';
+import classes from './SystemViewStandalone.module.scss';
+import clsx from 'clsx';
+import { WithClassName } from '@/hooks/Mapper/types/common.ts';
+import { SolarSystemStaticInfoRaw } from '@/hooks/Mapper/types';
+import { HTMLProps, MouseEvent, useCallback } from 'react';
+
+export type SystemViewStandaloneStatic = Pick<
+  SolarSystemStaticInfoRaw,
+  'class_title' | 'system_class' | 'solar_system_name' | 'region_name' | 'security' | 'solar_system_id'
+>;
+
+export type SystemViewStandaloneProps = {
+  hideRegion?: boolean;
+  customName?: string;
+  compact?: boolean;
+  onContextMenu?(e: MouseEvent, systemId: string): void;
+} & WithClassName &
+  Omit<SystemViewStandaloneStatic, 'region_name'> &
+  Partial<Pick<SystemViewStandaloneStatic, 'region_name'>> &
+  Omit<HTMLProps<HTMLDivElement>, 'onContextMenu'>;
+
+export const SystemViewStandalone = ({
+  className,
+  hideRegion,
+  customName,
+
+  class_title,
+  system_class,
+  solar_system_name,
+  region_name,
+  security,
+  compact,
+  solar_system_id,
+  onContextMenu,
+
+  ...props
+}: SystemViewStandaloneProps) => {
+  const classTitleColor = getSystemClassStyles({ systemClass: system_class, security });
+  const isWH = isWormholeSpace(system_class);
+
+  const handleClick = useCallback(
+    (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onContextMenu?.(e, solar_system_id.toString());
+    },
+    [onContextMenu, solar_system_id],
+  );
+
+  return (
+    <div
+      {...props}
+      onContextMenu={handleClick}
+      className={clsx(classes.SystemViewRoot, 'flex gap-1 text-gray-400', className)}
+    >
+      <span className={clsx(classTitleColor)}>{class_title}</span>
+      <span
+        className={clsx('text-gray-200 whitespace-nowrap', {
+          ['overflow-hidden text-ellipsis']: compact,
+          [classes.CompactName]: compact,
+        })}
+      >
+        {customName ?? solar_system_name}
+      </span>
+      {!hideRegion && !isWH && <span className="whitespace-nowrap">{region_name}</span>}
+    </div>
+  );
+};