1import { background, text } from "./components"
 2import { icon_button } from "../component/icon_button"
 3import { useTheme } from "../theme"
 4import { interactive } from "../element"
 5
 6export default function chat_panel(): any {
 7    const theme = useTheme()
 8    const layer = theme.middle
 9
10    return {
11        background: background(layer),
12        avatar: {
13            icon_width: 24,
14            icon_height: 24,
15            corner_radius: 4,
16            outer_width: 24,
17            outer_corner_radius: 16,
18        },
19        read_text: text(layer, "sans", "disabled"),
20        unread_text: text(layer, "sans", "base"),
21        button: interactive({
22            base: {
23                ...text(theme.lowest, "sans", "on", { size: "xs" }),
24                background: background(theme.lowest, "on"),
25                padding: 4,
26                corner_radius: 6,
27                margin: { left: 6 },
28            },
29
30            state: {
31                hovered: {
32                    background: background(theme.lowest, "on", "hovered"),
33                },
34            },
35        }),
36        timestamp: text(layer, "sans", "base", "disabled"),
37        avatar_container: {
38            padding: {
39                right: 6,
40                left: 2,
41                top: 2,
42                bottom: 2,
43            },
44        },
45        list: {},
46        icon_button: icon_button({
47            variant: "ghost",
48            color: "variant",
49            size: "sm",
50        }),
51        sign_in_prompt: {
52            default: text(layer, "sans", "base"),
53        },
54    }
55}