diff --git a/components/Button.tsx b/components/Button.tsx index 57a5551..a3f8a73 100644 --- a/components/Button.tsx +++ b/components/Button.tsx @@ -1,64 +1,60 @@ -import Link from 'next/link' -import clsx from 'clsx' -import { ReactNode } from 'react' +import Link from "next/link"; +import clsx from "clsx"; +import { ReactNode } from "react"; const baseStyles = { solid: - 'group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2', + "group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2", outline: - 'group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm focus:outline-none', -} + "group inline-flex ring-1 items-center justify-center rounded-full py-2 px-4 text-sm focus:outline-none", +}; const variantStyles = { solid: { slate: - 'bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900', - blue: 'bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600', + "bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900", + blue: "bg-blue-600 text-white hover:text-slate-100 hover:bg-blue-500 active:bg-blue-800 active:text-blue-100 focus-visible:outline-blue-600", white: - 'bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white', + "bg-white text-slate-900 hover:bg-blue-50 active:bg-blue-200 active:text-slate-600 focus-visible:outline-white", }, outline: { slate: - 'ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300', + "ring-slate-200 text-slate-700 hover:text-slate-900 hover:ring-slate-300 active:bg-slate-100 active:text-slate-600 focus-visible:outline-blue-600 focus-visible:ring-slate-300", white: - 'ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white', - blue: // Supress TypeScript error - '', // TODO: fix properly + "ring-slate-700 text-white hover:ring-slate-500 active:ring-slate-700 active:text-slate-400 focus-visible:outline-white", + // Supress TypeScript error + blue: "", // TODO: fix properly }, -} +}; type Props = { - variant?: 'solid'|'outline', - color?: 'slate'|'white'|'blue', - className?: string, - href?: string, - children?: ReactNode, -} + variant?: "solid" | "outline"; + color?: "slate" | "white" | "blue"; + className?: string; + href?: string; + children?: ReactNode; +}; export function Button({ - variant = 'solid', - color = 'slate', + variant = "solid", + color = "slate", className, href, - children + children, }: Props) { className = clsx( baseStyles[variant], variantStyles[variant][color], className - ) + ); if (href !== undefined) { return ( {children} - ) + ); } else { - return ( - - ) + return ; } } diff --git a/components/CallToAction.tsx b/components/CallToAction.tsx index 5c0efb5..a8662e2 100644 --- a/components/CallToAction.tsx +++ b/components/CallToAction.tsx @@ -1,8 +1,8 @@ -import Image from 'next/image' +import Image from "next/image"; -import { Button } from '@/components/Button' -import { Container } from '@/components/Container' -import backgroundImage from '@/images/background-call-to-action.jpg' +import { Button } from "@/components/Button"; +import { Container } from "@/components/Container"; +import backgroundImage from "@/images/background-call-to-action.jpg"; export function CallToAction() { return ( @@ -24,14 +24,19 @@ export function CallToAction() { Posuňte svoji aplikaci už dnes
- Je na čase pozvednout vaši infrastrukturu na dnešní standardy. - Vaše infrastruktura by měla nabídnout Vaši aplikaci světu, ne ji držet zpátky. + Je na čase pozvednout vaši infrastrukturu na dnešní standardy. Vaše + infrastruktura by měla nabídnout Vaši aplikaci světu, ne ji držet + zpátky.
-