53 lines
2.0 KiB
TypeScript
53 lines
2.0 KiB
TypeScript
import { Component, JSX, ParentComponent, splitProps } from 'solid-js';
|
||
import { DisplayInfo } from '../../models/display-info.model';
|
||
import { useLanguage } from '../../i18n/index';
|
||
|
||
type DisplayInfoItemProps = {
|
||
label: string;
|
||
};
|
||
|
||
export const DisplayInfoItem: ParentComponent<DisplayInfoItemProps> = (props) => {
|
||
return (
|
||
<div class="flex justify-between items-center py-1 px-2 hover:bg-base-300/50 rounded transition-colors">
|
||
<dt class="text-sm font-medium text-base-content/80 uppercase">{props.label}</dt>
|
||
<dd class="text-sm font-mono text-base-content select-all">{props.children}</dd>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
type DisplayInfoPanelProps = {
|
||
display: DisplayInfo;
|
||
} & JSX.HTMLAttributes<HTMLElement>;
|
||
|
||
export const DisplayInfoPanel: Component<DisplayInfoPanelProps> = (props) => {
|
||
const [localProps, rootProps] = splitProps(props, ['display']);
|
||
const { t } = useLanguage();
|
||
|
||
return (
|
||
<div {...rootProps} class={'card bg-base-100/95 backdrop-blur shadow-lg border border-base-300 ' + rootProps.class}>
|
||
<div class="card-body p-4">
|
||
<div class="card-title text-sm mb-3 flex items-center justify-between">
|
||
<span class="text-base-content">{t('displays.displayInfo')}</span>
|
||
{localProps.display.is_primary && (
|
||
<div class="badge badge-primary badge-sm">{t('displays.isPrimary')}</div>
|
||
)}
|
||
</div>
|
||
<div class="space-y-1">
|
||
<DisplayInfoItem label={t('displays.id')}>
|
||
<code class="bg-base-200 px-1 rounded text-xs">{localProps.display.id}</code>
|
||
</DisplayInfoItem>
|
||
<DisplayInfoItem label={t('displays.position')}>
|
||
({localProps.display.x}, {localProps.display.y})
|
||
</DisplayInfoItem>
|
||
<DisplayInfoItem label={t('displays.size')}>
|
||
{localProps.display.width} × {localProps.display.height}
|
||
</DisplayInfoItem>
|
||
<DisplayInfoItem label={t('displays.scale')}>
|
||
{localProps.display.scale_factor}×
|
||
</DisplayInfoItem>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|