personal web client for Bluesky
mary.my.id
typescript
solidjs
bluesky
atcute
1import type { ParentProps } from 'solid-js';
2
3import { useFieldset } from './fieldset';
4
5export interface InlineLinkProps extends ParentProps {
6 href?: string;
7 disabled?: boolean;
8 onClick?: () => void;
9}
10
11const InlineLink = (props: InlineLinkProps) => {
12 const fieldset = useFieldset();
13 const isDisabled = (): boolean => fieldset.disabled || !!props.disabled;
14
15 return (
16 <button
17 type="button"
18 disabled={isDisabled()}
19 onClick={props.onClick}
20 class={inlineLinkClassNames(isDisabled)}
21 >
22 {props.children}
23 </button>
24 );
25};
26
27const inlineLinkClassNames = (isDisabled: () => boolean): string => {
28 var cn = `text-accent text-left text-de`;
29
30 if (isDisabled()) {
31 cn += ` opacity-50`;
32 } else {
33 cn += ` hover:underline`;
34 }
35
36 return cn;
37};
38
39export default InlineLink;