vd-plugins/plugins/Commands/settings/components/BetterTableRowGroup.tsx

import { React, ReactNative as RN, stylesheet } from "@vendetta/metro/common";
import { rawColors, semanticColors } from "@vendetta/ui";

export default function BetterTableRowGroup({
    title,
    icon,
    children,
    padding = false,
}: React.PropsWithChildren<{
  title?: string;
  icon?: number;
  padding?: boolean;
}>) {
    const styles = stylesheet.createThemedStyleSheet({
        main: {
            backgroundColor: rawColors.PLUM_18,
            borderColor: semanticColors.CARD_BACKGROUND_DEFAULT,
            borderWidth: 1,
            borderRadius: 16,
            overflow: "hidden",
            flex: 1,
            maxWidth: "100%",
        },
        titleContainer: {
            marginBottom: 8,
            marginHorizontal: 16,
            marginTop: 8,
            gap: 4,
            flexDirection: "row",
            alignItems: "center",
        },
        icon: {
            width: 16,
            height: 16,
            marginTop: 1.5,
            tintColor: semanticColors.TEXT_MUTED,
        },
        titleText: {
            fontSize: 14,
            fontWeight: "600",
            color: semanticColors.TEXT_MUTED,
        },
        wrapper: {
            marginHorizontal: 16,
            marginTop: 16,
            maxWidth: "100%",
        },
    });

    return (
        <RN.View style={styles.wrapper}>
            {title && (
                <RN.View style={styles.titleContainer}>
                    {icon && (
                        <RN.Image style={styles.icon} source={icon} resizeMode="cover" />
                    )}
                    <RN.Text style={styles.titleText}>{title.toUpperCase()}</RN.Text>
                </RN.View>
            )}
            <RN.View style={styles.main}>
                {padding ? (
                    <RN.View style={{ paddingHorizontal: 16, paddingVertical: 16 }}>
                        {children}
                    </RN.View>
                ) : (
                    children
                )}
            </RN.View>
        </RN.View>
    );
}