diff --git a/apps/marketing/package.json b/apps/marketing/package.json index b9cee4f45..eb36b71bb 100644 --- a/apps/marketing/package.json +++ b/apps/marketing/package.json @@ -19,6 +19,7 @@ "@documenso/trpc": "*", "@documenso/ui": "*", "@hookform/resolvers": "^3.1.0", + "@openstatus/react": "^0.0.3", "contentlayer": "^0.3.4", "framer-motion": "^10.12.8", "lucide-react": "^0.279.0", diff --git a/apps/marketing/src/components/(marketing)/footer.tsx b/apps/marketing/src/components/(marketing)/footer.tsx index a687af0d3..8d2e0c1d4 100644 --- a/apps/marketing/src/components/(marketing)/footer.tsx +++ b/apps/marketing/src/components/(marketing)/footer.tsx @@ -13,6 +13,8 @@ import LogoImage from '@documenso/assets/logo.png'; import { cn } from '@documenso/ui/lib/utils'; import { ThemeSwitcher } from '@documenso/ui/primitives/theme-switcher'; +import { StatusWidgetContainer } from './status-widget-container'; + export type FooterProps = HTMLAttributes; const SOCIAL_LINKS = [ @@ -62,6 +64,10 @@ export const Footer = ({ className, ...props }: FooterProps) => { ))} + +
+ +
diff --git a/apps/marketing/src/components/(marketing)/status-widget-container.tsx b/apps/marketing/src/components/(marketing)/status-widget-container.tsx new file mode 100644 index 000000000..025c2df56 --- /dev/null +++ b/apps/marketing/src/components/(marketing)/status-widget-container.tsx @@ -0,0 +1,21 @@ +// https://github.com/documenso/documenso/pull/1044/files#r1538258462 +import { Suspense } from 'react'; + +import { StatusWidget } from './status-widget'; + +export function StatusWidgetContainer() { + return ( + }> + + + ); +} + +function StatusWidgetFallback() { + return ( +
+ + +
+ ); +} diff --git a/apps/marketing/src/components/(marketing)/status-widget.tsx b/apps/marketing/src/components/(marketing)/status-widget.tsx new file mode 100644 index 000000000..1c94c0707 --- /dev/null +++ b/apps/marketing/src/components/(marketing)/status-widget.tsx @@ -0,0 +1,75 @@ +import { use, useMemo } from 'react'; + +import type { Status } from '@openstatus/react'; +import { getStatus } from '@openstatus/react'; + +import { cn } from '@documenso/ui/lib/utils'; + +const getStatusLevel = (level: Status) => { + return { + operational: { + label: 'Operational', + color: 'bg-green-500', + color2: 'bg-green-400', + }, + degraded_performance: { + label: 'Degraded Performance', + color: 'bg-yellow-500', + color2: 'bg-yellow-400', + }, + partial_outage: { + label: 'Partial Outage', + color: 'bg-yellow-500', + color2: 'bg-yellow-400', + }, + major_outage: { + label: 'Major Outage', + color: 'bg-red-500', + color2: 'bg-red-400', + }, + unknown: { + label: 'Unknown', + color: 'bg-gray-500', + color2: 'bg-gray-400', + }, + incident: { + label: 'Incident', + color: 'bg-yellow-500', + color2: 'bg-yellow-400', + }, + under_maintenance: { + label: 'Under Maintenance', + color: 'bg-gray-500', + color2: 'bg-gray-400', + }, + }[level]; +}; + +export function StatusWidget() { + const getStatusMemoized = useMemo(async () => getStatus('documenso-status'), []); + const { status } = use(getStatusMemoized); + const level = getStatusLevel(status); + + return ( + +
+

{level.label}

+
+ + + + + +
+ ); +} diff --git a/package-lock.json b/package-lock.json index 1d8663908..9eb4d3818 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42,6 +42,7 @@ "@documenso/trpc": "*", "@documenso/ui": "*", "@hookform/resolvers": "^3.1.0", + "@openstatus/react": "^0.0.3", "contentlayer": "^0.3.4", "framer-motion": "^10.12.8", "lucide-react": "^0.279.0", @@ -4142,6 +4143,14 @@ "resolved": "https://registry.npmjs.org/@one-ini/wasm/-/wasm-0.1.1.tgz", "integrity": "sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==" }, + "node_modules/@openstatus/react": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@openstatus/react/-/react-0.0.3.tgz", + "integrity": "sha512-uDiegz7e3H67pG8lTT+op+6w5keTT7XpcENrREaqlWl5j53TYyO8nheOG1PeNw2/Qgd5KaGeRJJFn1crhTUSYw==", + "peerDependencies": { + "react": "^18.0.0" + } + }, "node_modules/@opentelemetry/api": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.4.1.tgz",