mirror of
https://github.com/BlowaterNostr/blowater.git
synced 2024-10-18 15:43:20 +00:00
59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
/** @jsx h */
|
|
import { Fragment, h } from "https://esm.sh/preact@10.11.3";
|
|
import { tw } from "https://esm.sh/twind@0.16.16";
|
|
import { CenterClass, InputClass } from "./components/tw.ts";
|
|
import { PrimaryTextColor, SecondaryBackgroundColor, TitleIconColor } from "./style/colors.ts";
|
|
import { Component } from "https://esm.sh/preact@10.11.3";
|
|
import { AboutIcon } from "./icons/about-icon.tsx";
|
|
import { CopyButton } from "./components/copy-button.tsx";
|
|
|
|
export type EventDetailItem = {
|
|
title: string;
|
|
fields: string[];
|
|
};
|
|
|
|
type Props = {
|
|
items: EventDetailItem[];
|
|
};
|
|
|
|
export class EventDetail extends Component<Props> {
|
|
styles = {
|
|
container: tw`py-6 px-4 bg-[${SecondaryBackgroundColor}]`,
|
|
header: {
|
|
container: tw`text-[${PrimaryTextColor}] text-xl flex`,
|
|
icon: tw`w-8 h-8 mr-4 text-[${TitleIconColor}] fill-current`,
|
|
},
|
|
title: tw`mt-7 text-[${PrimaryTextColor}]`,
|
|
field: {
|
|
container: tw`relative ${InputClass} resize-none flex p-0 mt-4`,
|
|
pre: tw`whitespace-pre flex-1 overflow-x-auto px-4 py-3`,
|
|
copyButton: tw`w-14 ${CenterClass}`,
|
|
},
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<div class={this.styles.container}>
|
|
<p class={this.styles.header.container}>
|
|
<AboutIcon class={this.styles.header.icon} />
|
|
Details
|
|
</p>
|
|
|
|
{this.props.items.map((item) => (
|
|
<Fragment>
|
|
<p class={this.styles.title}>{item.title}</p>
|
|
{item.fields.map((field) => (
|
|
<div class={this.styles.field.container}>
|
|
<pre class={this.styles.field.pre}>{field}</pre>
|
|
<div class={this.styles.field.copyButton}>
|
|
<CopyButton text={field} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Fragment>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
}
|