chore: GUI 增加路由。

src/components/led-strip-configuration/display-info-panel.tsx

@@ -0,0 +1,42 @@
+import { Component, JSX, ParentComponent, splitProps } from 'solid-js';
+import { DisplayInfo } from '../../models/display-info.model';
+
+type DisplayInfoItemProps = {
+  label: string;
+};
+
+export const DisplayInfoItem: ParentComponent<DisplayInfoItemProps> = (props) => {
+  return (
+    <dl class="px-3 py-1 flex hover:bg-slate-900/50 gap-2 text-white drop-shadow-[0_2px_2px_rgba(0,0,0,0.8)] rounded">
+      <dt class="uppercase w-1/2 select-all whitespace-nowrap">{props.label}</dt>
+      <dd class="select-all w-1/2 whitespace-nowrap">{props.children}</dd>
+    </dl>
+  );
+};
+
+type DisplayInfoPanelProps = {
+  display: DisplayInfo;
+} & JSX.HTMLAttributes<HTMLElement>;
+
+export const DisplayInfoPanel: Component<DisplayInfoPanelProps> = (props) => {
+  const [localProps, rootProps] = splitProps(props, ['display']);
+  return (
+    <section {...rootProps} class={'m-2 flex flex-col gap-1 py-2 ' + rootProps.class}>
+      <DisplayInfoItem label="ID">
+        <code>{localProps.display.id}</code>
+      </DisplayInfoItem>
+      <DisplayInfoItem label="Position">
+        ({localProps.display.x}, {localProps.display.y})
+      </DisplayInfoItem>
+      <DisplayInfoItem label="Size">
+        {localProps.display.width} x {localProps.display.height}
+      </DisplayInfoItem>
+      <DisplayInfoItem label="Scale Factor">
+        {localProps.display.scale_factor}
+      </DisplayInfoItem>
+      <DisplayInfoItem label="is Primary">
+        {localProps.display.is_primary ? 'True' : 'False'}
+      </DisplayInfoItem>
+    </section>
+  );
+};