import type { FunctionalComponent } from 'preact';
import { Suspense } from 'preact/compat';
import { useState } from 'preact/hooks';
import {
HTMLProvider,
MarkdownProvider,
MarkdownRenderer,
useIntlayer,
} from 'preact-intlayer';
import { compileMarkdown } from 'preact-intlayer/markdown';
import './app.css';
import viteLogo from '/vite.svg';
import preactLogo from './assets/preact.svg';
import { LocaleSwitcher } from './components/LocaleSwitcher';
import { useI18nHTMLAttributes } from './hooks/useI18nHTMLAttributes';
import { LocaleRouter } from './Router';
const AppContent: FunctionalComponent = () => {
useI18nHTMLAttributes();
const [count, setCount] = useState(0);
const content = useIntlayer('app');
return (
<div className="flex w-xl flex-col items-center gap-6">
<div class="my-5 flex w-full justify-evenly">
<a href="https://vitejs.dev" target="_blank" rel="noopener">
<img src={viteLogo} class="h-28" alt={content.viteLogo.value} />
</a>
<a href="https://preactjs.com" target="_blank" rel="noopener">
<img
src={preactLogo}
class="preact h-28"
alt={content.preactLogo.value}
/>
</a>
</div>
<div>
<MarkdownRenderer
components={{
h2: (props: any) => (
<h2 style={{ color: 'blue' }} {...props}>
{props.children}
</h2>
),
}}
wrapper={({ children }: any) => (
<div style={{ background: 'red', padding: '30px' }}>{children}</div>
)}
>
## Hello World
</MarkdownRenderer>
{/* Should use provider is possible, or default option if not */}
{content.markdown}
{/* Should use first the overrides, then the provider if possible, or default option if not */}
{content.markdown.use({
h1: (props: any) => (
<h1 style={{ color: 'green' }} {...props}>
tetst
</h1>
),
ComponentDemo: () => <div style={{ background: 'pink' }}>DEMO2</div>,
})}
</div>
<div>
<h1>{content.title}</h1>
{content.insertion({ count: 2 })}
{content.html}
{content.html.use({
b: (props: any) => <h1 {...props} />,
})}
{content.html.use({
'custom-component': (props: any) => (
<h1 style={{ color: 'red' }} {...props}>
Custom 1
</h1>
),
CustomComponent2: (props: any) => (
<h1 style={{ color: 'green' }} {...props}>
{props.children}
</h1>
),
})}
</div>
<button onClick={() => setCount((count) => count + 1)}>
{content.count}
{count}
</button>
<p>{content.edit}</p>
<p class="read-the-docs">{content.readTheDocs}</p>
<LocaleSwitcher />
</div>
);
};
export const App: FunctionalComponent = () => (
<LocaleRouter>
<Suspense fallback={<div>loading dynamic dictionaries...</div>}>
<MarkdownProvider
components={{
h1: (props: any) => (
<h1 style={{ color: 'orange' }} {...props}>
{props.children}
</h1>
),
ComponentDemo: () => <div style={{ background: 'grey' }}>DEMO</div>,
}}
>
<HTMLProvider
components={{
CustomComponent: (props: any) => (
<h1 style={{ color: 'blue' }} {...props}>
Custom 2l
</h1>
),
}}
>
<AppContent />
</HTMLProvider>
</MarkdownProvider>
</Suspense>
</LocaleRouter>
);
