49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
|
import { ReactNative as RN, stylesheet } from "@metro/common";
|
||
|
|
import { Forms } from "@ui/components";
|
||
|
|
import { Plugin } from "@types";
|
||
|
|
import { getAssetIDByName } from "@/ui/assets";
|
||
|
|
|
||
|
|
const { FormRow, FormText, FormSwitch } = Forms;
|
||
|
|
|
||
|
|
const styles = stylesheet.createThemedStyleSheet({
|
||
|
|
card: {
|
||
|
|
backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_SECONDARY,
|
||
|
|
borderRadius: 5,
|
||
|
|
margin: 10,
|
||
|
|
},
|
||
|
|
header: {
|
||
|
|
backgroundColor: stylesheet.ThemeColorMap.BACKGROUND_TERTIARY,
|
||
|
|
borderTopLeftRadius: 5,
|
||
|
|
borderTopRightRadius: 5,
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
interface PluginCardProps {
|
||
|
|
plugin: Plugin;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function PluginCard({ plugin }: PluginCardProps) {
|
||
|
|
const [enabled, setEnabled] = React.useState(plugin.enabled);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<RN.View style={styles.card}>
|
||
|
|
<FormRow
|
||
|
|
style={styles.header}
|
||
|
|
label={`${plugin.manifest.name} by ${plugin.manifest.author}`}
|
||
|
|
leading={<FormRow.Icon source={getAssetIDByName(plugin.manifest.icon || "ic_application_command_24px")} />}
|
||
|
|
trailing={
|
||
|
|
<FormSwitch
|
||
|
|
value={plugin.enabled}
|
||
|
|
onValueChange={(v: boolean) => {
|
||
|
|
setEnabled(v);
|
||
|
|
plugin.enabled = enabled;
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
<FormRow
|
||
|
|
label={plugin.manifest.description}
|
||
|
|
/>
|
||
|
|
</RN.View>
|
||
|
|
)
|
||
|
|
}
|