Function SyncPrivacySection

Source

export function SyncPrivacySection({
  syncConfig,
  searchQuery,
  highlightedSectionId,
  onSyncConfigChange,
  setSyncConfig,
}: Readonly<SyncPrivacySectionProps>) {
  return (
    <motion.div
      id="sync-privacy"
      className={cn(
        highlightedSectionId === "sync-privacy" &&
          "rounded-xl ring-2 ring-blue-500 ring-offset-2 ring-offset-white dark:ring-blue-400 dark:ring-offset-slate-950",
      )}
      initial={{ opacity: 0, y: 8 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      <Card>
        <CardHeader className="pb-3">
          <div className="flex items-center justify-between">
            <div className="space-y-1">
              <CardTitle className="flex items-center gap-2 text-base">
                <Lock className="h-4 w-4 text-slate-500" />
                {searchQuery
                  ? highlightText("Privacy settings", searchQuery)
                  : "Privacy settings"}
              </CardTitle>
              <CardDescription>
                {searchQuery
                  ? highlightText(
                      "Set AniList entries as private to control visibility and sharing of your synced manga.",
                      searchQuery,
                    )
                  : "Set AniList entries as private to control visibility and sharing of your synced manga."}
              </CardDescription>
            </div>
            <Switch
              id="set-private"
              checked={syncConfig.setPrivate}
              onCheckedChange={(checked) => {
                const updatedConfig = {
                  ...syncConfig,
                  setPrivate: checked,
                };
                setSyncConfig(updatedConfig);
                onSyncConfigChange(updatedConfig, "setPrivate");
              }}
            />
          </div>
        </CardHeader>
      </Card>
    </motion.div>
  );
}
Copy