79 lines
3.2 KiB
TypeScript
79 lines
3.2 KiB
TypeScript
import { FC } from 'react';
|
|
import { Main } from '@/app/ui/Main';
|
|
|
|
import { authConfig } from "@/app/lib/auth";
|
|
import { SignInButton } from '../ui/SignInButton';
|
|
import Image from 'next/image';
|
|
|
|
type Provider = {
|
|
id: string;
|
|
name: string;
|
|
type: string;
|
|
style: {
|
|
logo: string;
|
|
bg: string;
|
|
text: string;
|
|
};
|
|
};
|
|
|
|
function getProviders(): Provider[] {
|
|
const providerKeys: (keyof Provider)[] = ["id", "name", "type", "style"];
|
|
return authConfig.providers.map((provider) =>
|
|
getKeyValuesFromObject<Provider>(provider, providerKeys)
|
|
);
|
|
}
|
|
|
|
function getKeyValuesFromObject<T>(obj: any, keys: (keyof T)[]): T {
|
|
return keys.reduce((acc, key) => {
|
|
if (obj[key]) {
|
|
acc[key] = obj[key];
|
|
}
|
|
return acc;
|
|
}, {} as T);
|
|
}
|
|
|
|
const Page:FC = async () => {
|
|
|
|
const providers = await getProviders()
|
|
|
|
return (
|
|
<Main>
|
|
<h1 className="text-3xl font-bold text-center">
|
|
<span className="text-neutral-50 mr-3">Što je pristiglo?</span>
|
|
<span className="text-indigo-400">Što je plaćeno?</span>
|
|
<span className="text-neutral-50 ml-3">Koliki su mi troškovi?</span>
|
|
</h1>
|
|
<p className="p mt-[1em] text-center">To su pitanja na koje ova jednostavna i besplatna aplikacija daje odgovore ...</p>
|
|
<p className="p mb-[1em] text-center">... isprobajte je i koristite potpuno besplatno!</p>
|
|
<span className="text-center">
|
|
{
|
|
Object.values(providers).map((provider) => (
|
|
<div key={provider.name}>
|
|
<SignInButton provider={provider} />
|
|
</div>
|
|
))
|
|
}
|
|
</span>
|
|
<video className="m-auto mt-4" title="Demo osnovnih koraka u aplikaciji" role="img" data-js-id="hero" loop muted playsInline autoPlay poster="hero.png">
|
|
<source src="/welcome-demo-vp9-25fps-1500bps.webm" type="video/webm" />
|
|
</video>
|
|
<h1 className="text-2xl font-bold text-neutral-50 my-5">Automatsko prenošenje stavaka u idući mjesec</h1>
|
|
<p className="p mt-[1em]">Sve vaše nekretnine i popis računa se automatski prenosi u novi mjesec ... što znači da ne morate svaki puta sve kreirati iz početka!</p>
|
|
<video className="m-auto mt-4" title="Demo kopiranja mjeseca" role="img" data-js-id="hero" loop muted playsInline autoPlay poster="bar-code-demo.png">
|
|
<source src="/kopiranje-mjeseca-demo.webm" type="video/webm" />
|
|
</video>
|
|
|
|
<h1 className="text-2xl font-bold text-neutral-50 my-5">Boja označava status računa</h1>
|
|
<p className="p mt-[1em]">Jednim pogledom možete vidjeti na koji račun je zakačen PDF dokument i koji od računa je plaćen...</p>
|
|
<Image src="/status-color-demo.png" alt="Boje označavaju status računa" className="m-auto mt-4" width={423} height={145} />
|
|
|
|
<h1 className="text-2xl font-bold text-neutral-50 my-5">Prikaz 2D koda za plaćanje</h1>
|
|
<p className="p mt-[1em]">Ako PDF dokument sadrži 2D kod uz plaćanje, on će automatski biti prikazan na stranici računa. Tako ga možete skenirati bez da otvarate PDF dokument...</p>
|
|
<video className="m-auto mt-4" title="Demo generiranja 2D bar koda" role="img" data-js-id="hero" loop muted playsInline autoPlay poster="bar-code-demo.png">
|
|
<source src="/bar-code-demo.webm" type="video/webm" />
|
|
</video>
|
|
</Main>
|
|
);
|
|
}
|
|
|
|
export default Page; |