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", "base"),
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
47        },
48        icon_button: icon_button({
49            variant: "ghost",
50            color: "variant",
51            size: "sm",
52        }),
53        sign_in_prompt: {
54            default: text(layer, "sans", "base"),
55        }
56    }
57}