Mirrors/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/Frooodle/Stirling-PDF.git synced 2026-02-17 13:52:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix slides

Browse Source
This commit is contained in:
EthanHealy01
2025-11-23 01:31:30 +00:00
parent 4a148a1918
commit 7fd44cc2a0
3 changed files with 96 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/core/components/onboarding/slides/DesktopInstallSlide.tsx
View File

@@ -13,9 +13,26 @@ interface DesktopInstallSlideProps {
onDownloadUrlChange?: (url: string) => void;
}
export default function DesktopInstallSlide({ osLabel, osUrl, osOptions = [], onDownloadUrlChange }: DesktopInstallSlideProps): SlideConfig {
const DesktopInstallBody = () => {
const { t } = useTranslation();
return (
<span>
{t(
'onboarding.desktopInstall.body',
'Stirling works best as a desktop app. You can use it offline, access documents faster, and make edits locally on your computer.',
)}
</span>
);
};
export default function DesktopInstallSlide({
osLabel,
osUrl,
osOptions = [],
onDownloadUrlChange,
}: DesktopInstallSlideProps): SlideConfig {
return {
key: 'desktop-install',
title: (
@@ -26,11 +43,7 @@ export default function DesktopInstallSlide({ osLabel, osUrl, osOptions = [], on
onDownloadUrlChange={onDownloadUrlChange}
/>
),
body: (
<span>
{t('onboarding.desktopInstall.body', 'Stirling works best as a desktop app. You can use it offline, access documents faster, and make edits locally on your computer.')}
</span>
),
body: <DesktopInstallBody />,
downloadUrl: osUrl,
background: {
gradientStops: ['#2563EB', '#0EA5E9'],

93
frontend/src/core/components/onboarding/slides/PlanOverviewSlide.tsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { useTranslation } from 'react-i18next';
import { Trans, useTranslation } from 'react-i18next';
import { SlideConfig, LicenseNotice } from '../../../types/types';
import { UNIFIED_CIRCLE_CONFIG } from './unifiedBackgroundConfig';
@@ -11,52 +11,69 @@ interface PlanOverviewSlideProps {
const DEFAULT_FREE_TIER_LIMIT = 5;
const PlanOverviewTitle: React.FC<{ isAdmin: boolean }> = ({ isAdmin }) => {
const { t } = useTranslation();
return (
<>
{isAdmin
? t('onboarding.planOverview.adminTitle', 'Admin Overview')
: t('onboarding.planOverview.userTitle', 'Plan Overview')}
</>
);
};
const AdminOverviewBody: React.FC<{ freeTierLimit: number; loginEnabled: boolean }> = ({
freeTierLimit,
loginEnabled,
}) => {
const adminBodyKey = loginEnabled
? 'onboarding.planOverview.adminBodyLoginEnabled'
: 'onboarding.planOverview.adminBodyLoginDisabled';
const defaultValue = loginEnabled
? 'As an admin, you can manage users, configure settings, and monitor server health. The first <strong>{{freeTierLimit}}</strong> people on your server get to use Stirling free of charge.'
: 'Once you enable login mode, you can manage users, configure settings, and monitor server health. The first <strong>{{freeTierLimit}}</strong> people on your server get to use Stirling free of charge.';
return (
<Trans
i18nKey={adminBodyKey}
values={{ freeTierLimit }}
components={{ strong: <strong /> }}
defaults={defaultValue}
/>
);
};
const UserOverviewBody: React.FC = () => {
const { t } = useTranslation();
return (
<span>
{t(
'onboarding.planOverview.userBody',
"Invite teammates, assign roles, and keep your documents organized in one secure workspace. Enable login mode whenever you're ready to grow beyond solo use.",
)}
</span>
);
};
const PlanOverviewBody: React.FC<{ isAdmin: boolean; freeTierLimit: number; loginEnabled: boolean }> = ({
isAdmin,
freeTierLimit,
loginEnabled,
}) =>
isAdmin ? <AdminOverviewBody freeTierLimit={freeTierLimit} loginEnabled={loginEnabled} /> : <UserOverviewBody />;
export default function PlanOverviewSlide({
isAdmin,
licenseNotice,
loginEnabled = false,
}: PlanOverviewSlideProps): SlideConfig {
const { t } = useTranslation();
const freeTierLimit = licenseNotice?.freeTierLimit ?? DEFAULT_FREE_TIER_LIMIT;
const adminBodyKey = loginEnabled
? 'onboarding.planOverview.adminBodyLoginEnabled'
: 'onboarding.planOverview.adminBodyLoginDisabled';
const adminBodyTemplate = t(adminBodyKey, {
freeTierLimit: '{{freeTierLimit}}',
defaultValue: loginEnabled
? 'As an admin, you can manage users, configure settings, and monitor server health. The first {{freeTierLimit}} people on your server get to use Stirling free of charge.'
: 'Once you enable login mode, you can manage users, configure settings, and monitor server health. The first {{freeTierLimit}} people on your server get to use Stirling free of charge.',
});
const renderAdminBody = () => {
const [before, after] = adminBodyTemplate.split('{{freeTierLimit}}');
if (after !== undefined) {
return (
<span>
{before}
<strong>{freeTierLimit}</strong>
{after}
</span>
);
}
return (
<span>
{adminBodyTemplate.replace('{{freeTierLimit}}', String(freeTierLimit))}
</span>
);
};
return {
key: isAdmin ? 'admin-overview' : 'plan-overview',
title: isAdmin
? t('onboarding.planOverview.adminTitle', 'Admin Overview')
: t('onboarding.planOverview.userTitle', 'Plan Overview'),
body: isAdmin ? renderAdminBody() : (
<span>
{t('onboarding.planOverview.userBody', 'Invite teammates, assign roles, and keep your documents organized in one secure workspace. Enable login mode whenever you\'re ready to grow beyond solo use.')}
</span>
),
title: <PlanOverviewTitle isAdmin={isAdmin} />,
body: <PlanOverviewBody isAdmin={isAdmin} freeTierLimit={freeTierLimit} loginEnabled={loginEnabled} />,
background: {
gradientStops: isAdmin ? ['#4F46E5', '#0EA5E9'] : ['#F97316', '#EF4444'],
circles: UNIFIED_CIRCLE_CONFIG,

40
frontend/src/core/components/onboarding/slides/WelcomeSlide.tsx
View File

@@ -4,28 +4,32 @@ import { SlideConfig } from '../../../types/types';
import styles from '../InitialOnboardingModal/InitialOnboardingModal.module.css';
import { UNIFIED_CIRCLE_CONFIG } from './unifiedBackgroundConfig';
export default function WelcomeSlide(): SlideConfig {
function WelcomeSlideTitle() {
const { t } = useTranslation();
return (
<span className={styles.welcomeTitleContainer}>
{t('onboarding.welcomeSlide.title', 'Welcome to Stirling')}
<span className={styles.v2Badge}>V2</span>
</span>
);
}
const WelcomeSlideBody = () => (
<span>
<Trans
i18nKey="onboarding.welcomeSlide.body"
components={{ strong: <strong /> }}
defaults="Stirling PDF is now ready for teams of all sizes. This update includes a new layout, powerful new admin capabilities, and our most requested feature - <strong>Edit Text</strong>."
/>
</span>
);
export default function WelcomeSlide(): SlideConfig {
return {
key: 'welcome',
title: (
<span className={styles.welcomeTitleContainer}>
{t('onboarding.welcomeSlide.title', 'Welcome to Stirling')}
<span className={styles.v2Badge}>
V2
</span>
</span>
),
body: (
<span>
<Trans
i18nKey="onboarding.welcomeSlide.body"
components={{ strong: <strong /> }}
defaults="Stirling PDF is now ready for teams of all sizes. This update includes a new layout, powerful new admin capabilities, and our most requested feature - <strong>Edit Text</strong>."
/>
</span>
),
title: <WelcomeSlideTitle />,
body: <WelcomeSlideBody />,
background: {
gradientStops: ['#7C3AED', '#EC4899'],
circles: UNIFIED_CIRCLE_CONFIG,