personal web client for Bluesky
mary.my.id
typescript
solidjs
bluesky
atcute
1import type { Component } from 'solid-js';
2
3export interface FABProps {
4 label: string;
5 icon: Component;
6 onClick?: () => void;
7}
8
9const FAB = (props: FABProps) => {
10 return (
11 <div class="flex w-full justify-end">
12 <div class="fixed bottom-13 z-2 pb-4 pr-4">
13 <button
14 title={props.label}
15 onClick={props.onClick}
16 class="flex h-12 w-12 items-center justify-center rounded-full bg-accent text-xl text-accent-fg shadow-sm shadow-black hover:bg-accent-hover active:bg-accent-active"
17 >
18 {(() => {
19 const Icon = props.icon;
20 return <Icon />;
21 })()}
22 </button>
23 </div>
24 </div>
25 );
26};
27
28export default FAB;