27 lines
913 B
TypeScript
27 lines
913 B
TypeScript
import { getAppIcon } from '~/api/get-app-icon';
|
|
import { AppDefinition } from '~/types';
|
|
import { Box } from './Box';
|
|
import { useSettings } from '~/state/SettingsProvider';
|
|
|
|
import style from './Pill.module.css';
|
|
|
|
export type PillProps = AppDefinition;
|
|
|
|
export function Pill({ url, name, icon, shortcut, location }: PillProps) {
|
|
const { appSettings } = useSettings();
|
|
|
|
return (
|
|
<Box className={style.Pill}>
|
|
<a href={url} target="_blank" rel="noopener noreferrer">
|
|
<div class={style.Text}>
|
|
<span class={style.Name}>{name}</span>
|
|
<span class={style.Url}>{url.split('://')[1].split('/')[0]}</span>
|
|
{appSettings.showLocations && location && <span class={style.Url}>{location}</span>}
|
|
</div>
|
|
<img class={style.Icon} src={getAppIcon(icon)} alt={name} />
|
|
{shortcut && <span class={style.Index}>{shortcut}</span>}
|
|
</a>
|
|
</Box>
|
|
);
|
|
}
|