vd-plugins/plugins/Commands/settings/pages/SpotifySettingsPage.tsx

import { storage } from "@vendetta/plugin";
import { useProxy } from "@vendetta/storage";
import { React, ReactNative as RN, stylesheet } from "@vendetta/metro/common";
import { semanticColors } from "@vendetta/ui";
import { getAssetIDByName } from "@vendetta/ui/assets";
import { Forms } from "@vendetta/ui/components";
import BetterTableRowGroup from "../components/BetterTableRowGroup";

const { FormSwitchRow, FormRow } = Forms;

export default function SpotifySettingsPage() {
  useProxy(storage);
  const [, forceUpdate] = React.useReducer((x) => x + 1, 0);

  const styles = stylesheet.createThemedStyleSheet({
    infoText: {
      fontSize: 14,
      color: semanticColors.TEXT_MUTED,
      textAlign: "center",
      lineHeight: 20,
    },
  });

  return (
    <RN.ScrollView
      style={{ flex: 1, backgroundColor: semanticColors.BACKGROUND_PRIMARY }}
      contentContainerStyle={{
        flexGrow: 1,
        paddingVertical: 16,
        maxWidth: "100%",
      }}
    >
      <BetterTableRowGroup
        title="Spotify Commands"
        icon={getAssetIDByName("SpotifyNeutralIcon")}
      >
        <FormSwitchRow
          label="/spotify track"
          subLabel="Share your current Spotify track"
          leading={
            <FormRow.Icon source={getAssetIDByName("SpotifyNeutralIcon")} />
          }
          value={storage.enabledCommands.spotifyTrack}
          onValueChange={(v) => {
            storage.enabledCommands.spotifyTrack = v;
            storage.pendingRestart = true;
            forceUpdate();
          }}
        />
        <FormSwitchRow
          label="/spotify album"
          subLabel="Share your current track's album"
          leading={
            <FormRow.Icon source={getAssetIDByName("SpotifyNeutralIcon")} />
          }
          value={storage.enabledCommands.spotifyAlbum}
          onValueChange={(v) => {
            storage.enabledCommands.spotifyAlbum = v;
            storage.pendingRestart = true;
            forceUpdate();
          }}
        />
        <FormSwitchRow
          label="/spotify artists"
          subLabel="Share your current track's artists"
          leading={
            <FormRow.Icon source={getAssetIDByName("SpotifyNeutralIcon")} />
          }
          value={storage.enabledCommands.spotifyArtists}
          onValueChange={(v) => {
            storage.enabledCommands.spotifyArtists = v;
            storage.pendingRestart = true;
            forceUpdate();
          }}
        />
        <FormSwitchRow
          label="/spotify cover"
          subLabel="Share your current track's cover"
          leading={
            <FormRow.Icon source={getAssetIDByName("SpotifyNeutralIcon")} />
          }
          value={storage.enabledCommands.spotifyCover}
          onValueChange={(v) => {
            storage.enabledCommands.spotifyCover = v;
            storage.pendingRestart = true;
            forceUpdate();
          }}
        />
      </BetterTableRowGroup>

      <BetterTableRowGroup
        title="About Spotify Commands"
        icon={getAssetIDByName("InfoIcon")}
        padding={true}
      >
        <RN.Text style={styles.infoText}>
          These commands allow you to share your current Spotify activity in
          Discord. Make sure you have Spotify connected to Discord for these
          commands to work properly.
        </RN.Text>
      </BetterTableRowGroup>
    </RN.ScrollView>
  );
}