@ant-design/icons#BookOutlined TypeScript Examples

export function JSBookmarklet({ team }: { team: TeamBasicType }): JSX.Element {
    const initCall = `posthog.init('${team?.api_token}',{api_host:'${location.origin}', loaded: () => alert('Posthog is now tracking events!')})`
    const href = `javascript:(function()%7Bif%20(window.posthog)%20%7Balert(%22Error%3A%20PostHog%20already%20is%20installed%20on%20this%20site%22)%7D%20else%20%7B!function(t%2Ce)%7Bvar%20o%2Cn%2Cp%2Cr%3Be.__SV%7C%7C(window.posthog%3De%2Ce._i%3D%5B%5D%2Ce.init%3Dfunction(i%2Cs%2Ca)%7Bfunction%20g(t%2Ce)%7Bvar%20o%3De.split(%22.%22)%3B2%3D%3Do.length%26%26(t%3Dt%5Bo%5B0%5D%5D%2Ce%3Do%5B1%5D)%2Ct%5Be%5D%3Dfunction()%7Bt.push(%5Be%5D.concat(Array.prototype.slice.call(arguments%2C0)))%7D%7D(p%3Dt.createElement(%22script%22)).type%3D%22text%2Fjavascript%22%2Cp.async%3D!0%2Cp.src%3Ds.api_host%2B%22%2Fstatic%2Farray.js%22%2C(r%3Dt.getElementsByTagName(%22script%22)%5B0%5D).parentNode.insertBefore(p%2Cr)%3Bvar%20u%3De%3Bfor(void%200!%3D%3Da%3Fu%3De%5Ba%5D%3D%5B%5D%3Aa%3D%22posthog%22%2Cu.people%3Du.people%7C%7C%5B%5D%2Cu.toString%3Dfunction(t)%7Bvar%20e%3D%22posthog%22%3Breturn%22posthog%22!%3D%3Da%26%26(e%2B%3D%22.%22%2Ba)%2Ct%7C%7C(e%2B%3D%22%20(stub)%22)%2Ce%7D%2Cu.people.toString%3Dfunction()%7Breturn%20u.toString(1)%2B%22.people%20(stub)%22%7D%2Co%3D%22capture%20identify%20alias%20people.set%20people.set_once%20set_config%20register%20register_once%20unregister%20opt_out_capturing%20has_opted_out_capturing%20opt_in_capturing%20reset%20isFeatureEnabled%20onFeatureFlags%22.split(%22%20%22)%2Cn%3D0%3Bn%3Co.length%3Bn%2B%2B)g(u%2Co%5Bn%5D)%3Be._i.push(%5Bi%2Cs%2Ca%5D)%7D%2Ce.__SV%3D1)%7D(document%2Cwindow.posthog%7C%7C%5B%5D)%3B${encodeURIComponent(
        initCall
    )}%7D%7D)()`

    const { reportBookmarkletDragged } = useActions(eventUsageLogic)

    return (
        <a href={href} onDragStart={reportBookmarkletDragged}>
            <BookOutlined /> PostHog Bookmarklet{' '}
            <span style={{ color: 'var(--muted)', fontStyle: 'italic', marginLeft: 16 }}>
                <ArrowLeftOutlined /> <b>Drag</b> to your bookmarks. Do not click on this page.
            </span>
        </a>
    )
}

static note2TreeDatanote({
    noteId,
    noteDict,
    showVaultName,
    applyNavExclude = false,
  }: {
    noteId: string;
    noteDict: NotePropsByIdDict;
    showVaultName?: boolean;
    applyNavExclude: boolean;
  }): DataNode | undefined {
    const note = noteDict[noteId];
    if (_.isUndefined(note)) {
      return undefined;
    }
    if (applyNavExclude && note.custom?.nav_exclude) {
      return undefined;
    }

    const vname = VaultUtils.getName(note.vault);
    let icon;
    if (note.schema) {
      icon = <BookOutlined />;
    } else if (note.fname.toLowerCase() === TAGS_HIERARCHY_BASE) {
      icon = <NumberOutlined />;
    } else if (note.stub) {
      icon = <PlusOutlined />;
    }

    let title: any = note.title;
    if (showVaultName) title = `${title} (${vname})`;

    if (note.fname.startsWith(TAGS_HIERARCHY)) {
      title = (
        <span>
          <NumberOutlined />
          {title}
        </span>
      );
    }

    return {
      key: note.id,
      title,
      icon,
      children: TreeUtils.sortNotesAtLevel({
        noteIds: note.children,
        noteDict,
        reverse: note.custom?.sort_order === "reverse",
      })
        .map((noteId) =>
          TreeViewUtils.note2TreeDatanote({
            noteId,
            noteDict,
            showVaultName,
            applyNavExclude,
          })
        )
        .filter(isNotUndefined),
    };
  }

static treeMenuNode2DataNode({
    roots,
    showVaultName,
    applyNavExclude = false,
  }: {
    roots: TreeMenuNode[];
    showVaultName?: boolean;
    applyNavExclude: boolean;
  }): DataNode[] {
    return roots
      .map((node: TreeMenuNode) => {
        let icon;
        if (node.icon === TreeMenuNodeIcon.bookOutlined) {
          icon = <BookOutlined />;
        } else if (node.icon === TreeMenuNodeIcon.numberOutlined) {
          icon = <NumberOutlined />;
        } else if (node.icon === TreeMenuNodeIcon.plusOutlined) {
          icon = <PlusOutlined />;
        }

        if (applyNavExclude && node.navExclude) {
          return undefined;
        }

        let title: any = node.title;
        if (showVaultName) title = `${title} (${node.vaultName})`;

        if (node.hasTitleNumberOutlined) {
          title = (
            <span>
              <NumberOutlined />
              {title}
            </span>
          );
        }

        return {
          key: node.key,
          title,
          icon,
          children: node.children
            ? TreeViewUtils.treeMenuNode2DataNode({
                roots: node.children,
                showVaultName,
                applyNavExclude,
              })
            : [],
        };
      })
      .filter(isNotUndefined);
  }

export function AutocapturePanel(): JSX.Element {
    const { index, totalSteps, framework } = useValues(ingestionLogic)
    const { setPlatform, setVerify } = useActions(ingestionLogic)
    const { currentTeam } = useValues(teamLogic)
    const { reportIngestionBookmarkletCollapsible } = useActions(eventUsageLogic)

    const handlePanelChange = (shownPanels: string | string[]): void => {
        if (typeof shownPanels === 'string') {
            reportIngestionBookmarkletCollapsible([shownPanels])
        } else {
            reportIngestionBookmarkletCollapsible(shownPanels)
        }
    }

    const scrollToSdk = (e: HTMLDivElement): void => {
        if (framework?.toString() === 'PURE_JS') {
            e?.scrollIntoView()
        }
    }

    return (
        <CardContainer
            index={index}
            totalSteps={totalSteps}
            nextButton={true}
            onSubmit={() => setVerify(true)}
            onBack={() => setPlatform(null)}
        >
            {currentTeam && (
                <Collapse onChange={handlePanelChange}>
                    <Collapse.Panel
                        header={
                            <>
                                <BulbOutlined style={{ color: 'var(--warning)' }} /> <b>Just exploring?</b> Immediately
                                run PostHog on your website for some initial exploring.
                            </>
                        }
                        key="bookmarklet"
                    >
                        If you want to quickly test PostHog in your website <b>without changing any code</b>, try out
                        our bookmarklet.
                        <div>
                            <b>Steps:</b>
                        </div>
                        <ol>
                            <li>
                                <b>Drag</b> the link (<BookOutlined />) below to your bookmarks toolbar.{' '}
                            </li>
                            <li>Open the website you want to track and click on the bookmark you just added.</li>
                            <li>Click continue below and see events coming in.</li>
                        </ol>
                        <div className="mt">
                            <JSBookmarklet team={currentTeam} />
                        </div>
                        <div className="mt">
                            <Alert
                                type="warning"
                                message={
                                    <>
                                        Please note this installation is only{' '}
                                        <b>temporary, intended just for testing</b>. It will only work for the current
                                        page and only in your browser session.
                                    </>
                                }
                            />
                        </div>
                    </Collapse.Panel>
                </Collapse>
            )}
            <div style={{ marginTop: 16 }}>
                <h2>
                    Option 1. Code snippet <Tag color="green">Recommended</Tag>
                </h2>
                <p>
                    Just add this snippet to your website and we'll{' '}
                    <b>automatically capture page views, sessions and all relevant interactions</b> within your website.{' '}
                    <Link
                        to="https://posthog.com/product-features/event-autocapture?utm_medium=in-product&utm_campaign=ingestion-web"
                        target="_blank"
                        rel="noopener"
                    >
                        Learn more
                    </Link>
                    .
                </p>
                <b>Steps:</b>
                <ol>
                    <li>
                        Insert this snippet in your website within the <code className="code">&lt;head&gt;</code> tag.{' '}
                        <JSSnippet />
                    </li>
                    <li>
                        <b>Visit your site</b> to generate some initial events.
                    </li>
                </ol>
            </div>
            <div ref={scrollToSdk} style={{ marginTop: 32 }}>
                <h2>Option 2. Javascript Library</h2>
                <p>
                    Use this option if you want more granular control of how PostHog runs in your website and the events
                    you capture. Recommended for teams with more stable products and more defined analytics
                    requirements.{' '}
                    <Link
                        to="https://posthog.com/docs/integrations/js-integration/?utm_medium=in-product&utm_campaign=ingestion-web"
                        target="_blank"
                        rel="noopener"
                    >
                        Learn more
                    </Link>
                    .
                </p>
                <JSInstructions />
            </div>
        </CardContainer>
    )
}

IconSymbol: FC = () => {
  return (
    <Row>
      {/*<CaretUpOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
      {/*/>*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
      {/*/>*/}
      {/*<StepBackwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      {/*<StepForwardOutlined*/}
      {/*  className="icon"*/}
      {/*  symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
      {/*/>*/}
      <StepForwardOutlined />
      <ShrinkOutlined />
      <ArrowsAltOutlined />
      <DownOutlined />
      <UpOutlined />
      <LeftOutlined />
      <RightOutlined />
      <CaretUpOutlined />
      <CaretDownOutlined />
      <CaretLeftOutlined />
      <CaretRightOutlined />
      <VerticalAlignTopOutlined />
      <RollbackOutlined />
      <FastBackwardOutlined />
      <FastForwardOutlined />
      <DoubleRightOutlined />
      <DoubleLeftOutlined />
      <VerticalLeftOutlined />
      <VerticalRightOutlined />
      <VerticalAlignMiddleOutlined />
      <VerticalAlignBottomOutlined />
      <ForwardOutlined />
      <BackwardOutlined />
      <EnterOutlined />
      <RetweetOutlined />
      <SwapOutlined />
      <SwapLeftOutlined />
      <SwapRightOutlined />
      <ArrowUpOutlined />
      <ArrowDownOutlined />
      <ArrowLeftOutlined />
      <ArrowRightOutlined />
      <LoginOutlined />
      <LogoutOutlined />
      <MenuFoldOutlined />
      <MenuUnfoldOutlined />
      <BorderBottomOutlined />
      <BorderHorizontalOutlined />
      <BorderInnerOutlined />
      <BorderOuterOutlined />
      <BorderLeftOutlined />
      <BorderRightOutlined />
      <BorderTopOutlined />
      <BorderVerticleOutlined />
      <PicCenterOutlined />
      <PicLeftOutlined />
      <PicRightOutlined />
      <RadiusBottomleftOutlined />
      <RadiusBottomrightOutlined />
      <RadiusUpleftOutlined />
      <RadiusUprightOutlined />
      <FullscreenOutlined />
      <FullscreenExitOutlined />
      <QuestionOutlined />
      <PauseOutlined />
      <MinusOutlined />
      <PauseCircleOutlined />
      <InfoOutlined />
      <CloseOutlined />
      <ExclamationOutlined />
      <CheckOutlined />
      <WarningOutlined />
      <IssuesCloseOutlined />
      <StopOutlined />
      <EditOutlined />
      <CopyOutlined />
      <ScissorOutlined />
      <DeleteOutlined />
      <SnippetsOutlined />
      <DiffOutlined />
      <HighlightOutlined />
      <AlignCenterOutlined />
      <AlignLeftOutlined />
      <AlignRightOutlined />
      <BgColorsOutlined />
      <BoldOutlined />
      <ItalicOutlined />
      <UnderlineOutlined />
      <StrikethroughOutlined />
      <RedoOutlined />
      <UndoOutlined />
      <ZoomInOutlined />
      <ZoomOutOutlined />
      <FontColorsOutlined />
      <FontSizeOutlined />
      <LineHeightOutlined />
      <SortAscendingOutlined />
      <SortDescendingOutlined />
      <DragOutlined />
      <OrderedListOutlined />
      <UnorderedListOutlined />
      <RadiusSettingOutlined />
      <ColumnWidthOutlined />
      <ColumnHeightOutlined />
      <AreaChartOutlined />
      <PieChartOutlined />
      <BarChartOutlined />
      <DotChartOutlined />
      <LineChartOutlined />
      <RadarChartOutlined />
      <HeatMapOutlined />
      <FallOutlined />
      <RiseOutlined />
      <StockOutlined />
      <BoxPlotOutlined />
      <FundOutlined />
      <SlidersOutlined />
      <AndroidOutlined />
      <AppleOutlined />
      <WindowsOutlined />
      <IeOutlined />
      <ChromeOutlined />
      <GithubOutlined />
      <AliwangwangOutlined />
      <DingdingOutlined />
      <WeiboSquareOutlined />
      <WeiboCircleOutlined />
      <TaobaoCircleOutlined />
      <Html5Outlined />
      <WeiboOutlined />
      <TwitterOutlined />
      <WechatOutlined />
      <AlipayCircleOutlined />
      <TaobaoOutlined />
      <SkypeOutlined />
      <FacebookOutlined />
      <CodepenOutlined />
      <CodeSandboxOutlined />
      <AmazonOutlined />
      <GoogleOutlined />
      <AlipayOutlined />
      <AntDesignOutlined />
      <AntCloudOutlined />
      <ZhihuOutlined />
      <SlackOutlined />
      <SlackSquareOutlined />
      <BehanceSquareOutlined />
      <DribbbleOutlined />
      <DribbbleSquareOutlined />
      <InstagramOutlined />
      <YuqueOutlined />
      <AlibabaOutlined />
      <YahooOutlined />
      <RedditOutlined />
      <SketchOutlined />
      <AccountBookOutlined />
      <AlertOutlined />
      <ApartmentOutlined />
      <ApiOutlined />
      <QqOutlined />
      <MediumWorkmarkOutlined />
      <GitlabOutlined />
      <MediumOutlined />
      <GooglePlusOutlined />
      <AppstoreAddOutlined />
      <AppstoreOutlined />
      <AudioOutlined />
      <AudioMutedOutlined />
      <AuditOutlined />
      <BankOutlined />
      <BarcodeOutlined />
      <BarsOutlined />
      <BellOutlined />
      <BlockOutlined />
      <BookOutlined />
      <BorderOutlined />
      <BranchesOutlined />
      <BuildOutlined />
      <BulbOutlined />
      <CalculatorOutlined />
      <CalendarOutlined />
      <CameraOutlined />
      <CarOutlined />
      <CarryOutOutlined />
      <CiCircleOutlined />
      <CiOutlined />
      <CloudOutlined />
      <ClearOutlined />
      <ClusterOutlined />
      <CodeOutlined />
      <CoffeeOutlined />
      <CompassOutlined />
      <CompressOutlined />
      <ContactsOutlined />
      <ContainerOutlined />
      <ControlOutlined />
      <CopyrightCircleOutlined />
      <CopyrightOutlined />
      <CreditCardOutlined />
      <CrownOutlined />
      <CustomerServiceOutlined />
      <DashboardOutlined />
      <DatabaseOutlined />
      <DeleteColumnOutlined />
      <DeleteRowOutlined />
      <DisconnectOutlined />
      <DislikeOutlined />
      <DollarCircleOutlined />
      <DollarOutlined />
      <DownloadOutlined />
      <EllipsisOutlined />
      <EnvironmentOutlined />
      <EuroCircleOutlined />
      <EuroOutlined />
      <ExceptionOutlined />
      <ExpandAltOutlined />
      <ExpandOutlined />
      <ExperimentOutlined />
      <ExportOutlined />
      <EyeOutlined />
      <FieldBinaryOutlined />
      <FieldNumberOutlined />
      <FieldStringOutlined />
      <DesktopOutlined />
      <DingtalkOutlined />
      <FileAddOutlined />
      <FileDoneOutlined />
      <FileExcelOutlined />
      <FileExclamationOutlined />
      <FileOutlined />
      <FileImageOutlined />
      <FileJpgOutlined />
      <FileMarkdownOutlined />
      <FilePdfOutlined />
      <FilePptOutlined />
      <FileProtectOutlined />
      <FileSearchOutlined />
      <FileSyncOutlined />
      <FileTextOutlined />
      <FileUnknownOutlined />
      <FileWordOutlined />
      <FilterOutlined />
      <FireOutlined />
      <FlagOutlined />
      <FolderAddOutlined />
      <FolderOutlined />
      <FolderOpenOutlined />
      <ForkOutlined />
      <FormatPainterOutlined />
      <FrownOutlined />
      <FunctionOutlined />
      <FunnelPlotOutlined />
      <GatewayOutlined />
      <GifOutlined />
      <GiftOutlined />
      <GlobalOutlined />
      <GoldOutlined />
      <GroupOutlined />
      <HddOutlined />
      <HeartOutlined />
      <HistoryOutlined />
      <HomeOutlined />
      <HourglassOutlined />
      <IdcardOutlined />
      <ImportOutlined />
      <InboxOutlined />
      <InsertRowAboveOutlined />
      <InsertRowBelowOutlined />
      <InsertRowLeftOutlined />
      <InsertRowRightOutlined />
      <InsuranceOutlined />
      <InteractionOutlined />
      <KeyOutlined />
      <LaptopOutlined />
      <LayoutOutlined />
      <LikeOutlined />
      <LineOutlined />
      <LinkOutlined />
      <Loading3QuartersOutlined />
      <LoadingOutlined />
      <LockOutlined />
      <MailOutlined />
      <ManOutlined />
      <MedicineBoxOutlined />
      <MehOutlined />
      <MenuOutlined />
      <MergeCellsOutlined />
      <MessageOutlined />
      <MobileOutlined />
      <MoneyCollectOutlined />
      <MonitorOutlined />
      <MoreOutlined />
      <NodeCollapseOutlined />
      <NodeExpandOutlined />
      <NodeIndexOutlined />
      <NotificationOutlined />
      <NumberOutlined />
      <PaperClipOutlined />
      <PartitionOutlined />
      <PayCircleOutlined />
      <PercentageOutlined />
      <PhoneOutlined />
      <PictureOutlined />
      <PoundCircleOutlined />
      <PoundOutlined />
      <PoweroffOutlined />
      <PrinterOutlined />
      <ProfileOutlined />
      <ProjectOutlined />
      <PropertySafetyOutlined />
      <PullRequestOutlined />
      <PushpinOutlined />
      <QrcodeOutlined />
      <ReadOutlined />
      <ReconciliationOutlined />
      <RedEnvelopeOutlined />
      <ReloadOutlined />
      <RestOutlined />
      <RobotOutlined />
      <RocketOutlined />
      <SafetyCertificateOutlined />
      <SafetyOutlined />
      <ScanOutlined />
      <ScheduleOutlined />
      <SearchOutlined />
      <SecurityScanOutlined />
      <SelectOutlined />
      <SendOutlined />
      <SettingOutlined />
      <ShakeOutlined />
      <ShareAltOutlined />
      <ShopOutlined />
      <ShoppingCartOutlined />
      <ShoppingOutlined />
      <SisternodeOutlined />
      <SkinOutlined />
      <SmileOutlined />
      <SolutionOutlined />
      <SoundOutlined />
      <SplitCellsOutlined />
      <StarOutlined />
      <SubnodeOutlined />
      <SyncOutlined />
      <TableOutlined />
      <TabletOutlined />
      <TagOutlined />
      <TagsOutlined />
      <TeamOutlined />
      <ThunderboltOutlined />
      <ToTopOutlined />
      <ToolOutlined />
      <TrademarkCircleOutlined />
      <TrademarkOutlined />
      <TransactionOutlined />
      <TrophyOutlined />
      <UngroupOutlined />
      <UnlockOutlined />
      <UploadOutlined />
      <UsbOutlined />
      <UserAddOutlined />
      <UserDeleteOutlined />
      <UserOutlined />
      <UserSwitchOutlined />
      <UsergroupAddOutlined />
      <UsergroupDeleteOutlined />
      <VideoCameraOutlined />
      <WalletOutlined />
      <WifiOutlined />
      <BorderlessTableOutlined />
      <WomanOutlined />
      <BehanceOutlined />
      <DropboxOutlined />
      <DeploymentUnitOutlined />
      <UpCircleOutlined />
      <DownCircleOutlined />
      <LeftCircleOutlined />
      <RightCircleOutlined />
      <UpSquareOutlined />
      <DownSquareOutlined />
      <LeftSquareOutlined />
      <RightSquareOutlined />
      <PlayCircleOutlined />
      <QuestionCircleOutlined />
      <PlusCircleOutlined />
      <PlusSquareOutlined />
      <MinusSquareOutlined />
      <MinusCircleOutlined />
      <InfoCircleOutlined />
      <ExclamationCircleOutlined />
      <CloseCircleOutlined />
      <CloseSquareOutlined />
      <CheckCircleOutlined />
      <CheckSquareOutlined />
      <ClockCircleOutlined />
      <FormOutlined />
      <DashOutlined />
      <SmallDashOutlined />
      <YoutubeOutlined />
      <CodepenCircleOutlined />
      <AliyunOutlined />
      <PlusOutlined />
      <LinkedinOutlined />
      <AimOutlined />
      <BugOutlined />
      <CloudDownloadOutlined />
      <CloudServerOutlined />
      <CloudSyncOutlined />
      <CloudUploadOutlined />
      <CommentOutlined />
      <ConsoleSqlOutlined />
      <EyeInvisibleOutlined />
      <FileGifOutlined />
      <DeliveredProcedureOutlined />
      <FieldTimeOutlined />
      <FileZipOutlined />
      <FolderViewOutlined />
      <FundProjectionScreenOutlined />
      <FundViewOutlined />
      <MacCommandOutlined />
      <PlaySquareOutlined />
      <OneToOneOutlined />
      <RotateLeftOutlined />
      <RotateRightOutlined />
      <SaveOutlined />
      <SwitcherOutlined />
      <TranslationOutlined />
      <VerifiedOutlined />
      <VideoCameraAddOutlined />
      <WhatsAppOutlined />

      {/*</Col>*/}
    </Row>
  );
}

export default function SettingsPage({
  defaultPage,
}: SettingsPageProps): ReactElement {
  const {
    data: profile,
    error,
    mutate,
  } = useSWR(`api/v1/profile`, async () => API.profile.index());
  const router = useRouter();
  const { cid } = router.query;
  const role = useRoleInCourse(Number(cid));
  const isTAOrProfessor = role === Role.TA || role === Role.PROFESSOR;

  const [currentSettings, setCurrentSettings] = useState(
    defaultPage || SettingsOptions.PROFILE
  );
  const [uploading, setUploading] = useState(false);
  const isMobile = useIsMobile();
  const windowWidth = useWindowWidth();
  const [avatarSize, setAvatarSize] = useState(windowWidth / 2);

  useEffect(() => {
    const widthDivider = isMobile ? 6 : 10;
    setAvatarSize(windowWidth / widthDivider);
  });

  const beforeUpload = (file) => {
    const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";

    if (!isJpgOrPng) {
      message.error("You can only upload JPGs or PNGs!");
    }

    const isLt1M = file.size / 1024 / 1024 < 1;
    if (!isLt1M) {
      message.error("Image must smaller than 1MB!");
    }

    return isJpgOrPng && isLt1M;
  };

  if (error) {
    message.error(error);
  }

  const AvatarSettings = () => (
    <Col>
      {avatarSize ? (
        <Row
          style={{
            marginTop: avatarSize / 6,
            justifyContent: `${isMobile ? "left" : "center"}`,
          }}
        >
          {uploading ? (
            <Skeleton.Avatar
              active={true}
              size={avatarSize}
              shape="circle"
              style={{
                marginTop: avatarSize / 6,
                marginBottom: avatarSize / 12,
                marginLeft: avatarSize / 6,
                marginRight: avatarSize / 6,
              }}
            />
          ) : (
            <SettingsPanelAvatar avatarSize={avatarSize} />
          )}
          <Col>
            {profile && (
              <h2>
                {profile.firstName} {profile.lastName}
              </h2>
            )}
            <Upload
              action={"/api/v1/profile/upload_picture"}
              beforeUpload={beforeUpload}
              showUploadList={false}
              onChange={(info) => {
                setUploading(info.file.status === "uploading");
                mutate();
              }}
            >
              <ProfilePicButton icon={<UploadOutlined />}>
                Edit photo
              </ProfilePicButton>
            </Upload>
            {profile?.photoURL && (
              <ProfilePicButton
                icon={<DeleteOutlined />}
                style={{ marginTop: "10px" }}
                onClick={async () => {
                  try {
                    await API.profile.deleteProfilePicture();
                    message.success(
                      "You've successfully deleted your profile picture"
                    );
                    mutate();
                  } catch (e) {
                    message.error(
                      "There was an error with deleting your profile picture, please contact the Khoury Office Hours team for assistance"
                    );
                    throw e;
                  }
                }}
              >
                Delete my Profile Picture
              </ProfilePicButton>
            )}
          </Col>
        </Row>
      ) : null}
    </Col>
  );

  const SettingsMenu = () => (
    <>
      {isMobile ? (
        <Collapse accordion style={{ marginTop: "10px" }}>
          <Panel header="Personal Information" key="profile">
            <ProfileSettings />
          </Panel>
          {isTAOrProfessor && (
            <Panel header="Teams Settings" key="teams_settings">
              <TeamsSettings />
            </Panel>
          )}
          <Panel header="Notifications" key="notifications">
            <NotificationsSettings />
          </Panel>
          <Panel header="Course Preferences" key="preferences">
            <CoursePreferenceSettings />
          </Panel>
        </Collapse>
      ) : (
        <Menu
          style={{ background: "none", marginTop: "10px" }}
          defaultSelectedKeys={[currentSettings]}
          onClick={(e) => setCurrentSettings(e.key as SettingsOptions)}
        >
          <Menu.Item key={SettingsOptions.PROFILE} icon={<UserOutlined />}>
            Personal Information
          </Menu.Item>
          {isTAOrProfessor && (
            <Menu.Item
              key={SettingsOptions.TEAMS_SETTINGS}
              icon={<WindowsOutlined />}
            >
              Teams Settings
            </Menu.Item>
          )}
          <Menu.Item
            key={SettingsOptions.NOTIFICATIONS}
            icon={<BellOutlined />}
          >
            Notifications
          </Menu.Item>
          <Menu.Item key={SettingsOptions.PREFERENCES} icon={<BookOutlined />}>
            Course Preferences
          </Menu.Item>
        </Menu>
      )}
    </>
  );

  const DesktopSettingsSubpage = () => (
    <Col>
      {currentSettings === SettingsOptions.PROFILE && <ProfileSettings />}
      {currentSettings === SettingsOptions.NOTIFICATIONS && (
        <NotificationsSettings />
      )}
      {currentSettings === SettingsOptions.TEAMS_SETTINGS && <TeamsSettings />}
      {currentSettings === SettingsOptions.PREFERENCES && (
        <CoursePreferenceSettings />
      )}
    </Col>
  );

  return (
    <div>
      {isMobile ? (
        <Col>
          <AvatarSettings />
          <SettingsMenu />
        </Col>
      ) : (
        <Row>
          <Col span={5} style={{ textAlign: "center" }}>
            <AvatarSettings />
            <SettingsMenu />
          </Col>
          <VerticalDivider />
          <Space direction="vertical" size={40} style={{ flexGrow: 1 }}>
            <DesktopSettingsSubpage />
          </Space>
        </Row>
      )}
    </div>
  );
}