Homarr/src/components/Dashboard/Modals/EditAppModal/Tabs/GeneralTab/GeneralTab.tsx

import { Anchor, Button, Card, Collapse, Group, Stack, Tabs, Text, TextInput } from '@mantine/core';
import { UseFormReturnType } from '@mantine/form';
import { useDisclosure } from '@mantine/hooks';
import { IconAlertCircle, IconClick, IconCursorText, IconLink } from '@tabler/icons-react';
import { useTranslation } from 'next-i18next';
import { AppType } from '~/types/app';

import { EditAppModalTab } from '../type';

interface GeneralTabProps {
  form: UseFormReturnType<AppType, (values: AppType) => AppType>;
  openTab: (tab: EditAppModalTab) => void;
}

export const GeneralTab = ({ form, openTab }: GeneralTabProps) => {
  const { t } = useTranslation('layout/modals/add-app');

  const [opened, { toggle }] = useDisclosure(false);

  const commonMistakes = [
    t('general.internalAddress.troubleshoot.lines.nothingAfterPort'),
    t('general.internalAddress.troubleshoot.lines.protocolCheck'),
    t('general.internalAddress.troubleshoot.lines.iframe'),
    t('general.internalAddress.troubleshoot.lines.clearCache'),
  ];

  return (
    <Tabs.Panel value="general" pt="sm">
      <Stack spacing="xs">
        <TextInput
          icon={<IconCursorText size={16} />}
          label={t('general.appname.label')}
          description={t('general.appname.description')}
          placeholder="My example app"
          variant="default"
          withAsterisk
          {...form.getInputProps('name')}
        />
        <TextInput
          icon={<IconLink size={16} />}
          label={t('general.internalAddress.label')}
          description={t('general.internalAddress.description')}
          placeholder="https://google.com"
          variant="default"
          withAsterisk
          {...form.getInputProps('url')}
          onChange={(e) => {
            form.setFieldValue('url', e.target.value);
          }}
        />
        <TextInput
          icon={<IconClick size={16} />}
          label={t('general.externalAddress.label')}
          description={t('general.externalAddress.description')}
          placeholder="https://homarr.mywebsite.com/"
          variant="default"
          {...form.getInputProps('behaviour.externalUrl')}
        />

        <Group position="right" mt={22}>
          <Button rightIcon={<IconAlertCircle />} onClick={toggle}>
            {t('general.internalAddress.troubleshoot.label')}
          </Button>
        </Group>

        <Collapse in={opened}>
          <Card withBorder>
            <Text>{t('general.internalAddress.troubleshoot.header')}</Text>
            {commonMistakes.map((value: string, key: number) => {
              return (
                <Group key={key} display="flex" style={{ alignItems: 'start' }}>
                  <Text>•</Text>
                  <Text style={{ flex: '1' }}>{value}</Text>
                </Group>
              );
            })}
            <Text>
              {t('general.internalAddress.troubleshoot.footer').split('{{discord}}')[0]}
              <Anchor href="https://discord.gg/aCsmEV5RgA" target="_blank">
                Discord
              </Anchor>
              {t('general.internalAddress.troubleshoot.footer').split('{{discord}}')[1]}
            </Text>
          </Card>
        </Collapse>

        {!form.values.behaviour.externalUrl.startsWith('https://') &&
          !form.values.behaviour.externalUrl.startsWith('http://') && (
            <Text color="red" mt="sm" size="sm">
              {t('behaviour.customProtocolWarning')}
            </Text>
          )}
      </Stack>
    </Tabs.Panel>
  );
};