diff options
| -rw-r--r-- | src/app/blog/page.tsx | 7 | ||||
| -rw-r--r-- | src/app/help/HelpPage.1.tsx | 0 | ||||
| -rw-r--r-- | src/app/help/HelpPage.tsx | 0 | ||||
| -rw-r--r-- | src/app/help/page.tsx | 87 | ||||
| -rw-r--r-- | src/app/layout.tsx | 2 | ||||
| -rw-r--r-- | src/app/page.tsx | 13 | ||||
| -rw-r--r-- | src/components/footer.tsx | 4 | ||||
| -rw-r--r-- | src/components/header.tsx | 21 | ||||
| -rw-r--r-- | src/components/ui/button.tsx | 7 |
9 files changed, 129 insertions, 12 deletions
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx new file mode 100644 index 0000000..ff5c415 --- /dev/null +++ b/src/app/blog/page.tsx @@ -0,0 +1,7 @@ +export default function BlogPage() { + return ( + <section> + <h1>Blogs</h1> + </section> + ); +} diff --git a/src/app/help/HelpPage.1.tsx b/src/app/help/HelpPage.1.tsx new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/app/help/HelpPage.1.tsx diff --git a/src/app/help/HelpPage.tsx b/src/app/help/HelpPage.tsx new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/app/help/HelpPage.tsx diff --git a/src/app/help/page.tsx b/src/app/help/page.tsx new file mode 100644 index 0000000..9df8977 --- /dev/null +++ b/src/app/help/page.tsx @@ -0,0 +1,87 @@ +import { Button } from '@/components/ui/button'; +import { cn } from '@/utils/cn'; +import Link from 'next/link'; + +export default function HelpPage() { + return ( + <section className="mt-10 flex justify-center"> + <div className="w-5xl space-y-4"> + <h1 className="text-4xl font-bold">Help</h1> + <p className="text-lg"> + Free Invoice Generator provides a simple to use interface for + generating pdf incoices that look professional. Perfect for small to + medium freelancers and entrepreneurs. + </p> + <h2 className="mt-10 text-2xl font-bold">How to create an invoice?</h2> + <p className="text-lg"> + In order to create an invoice fill out the{' '} + <Link href="/" className="text-blue-700 underline"> + inovice form + </Link> + : + </p> + <ol className="space-y-6 text-lg"> + <li> + 1. Enter your <b>full name </b> into "Who is this from?" + field. + </li> + <li> + 2. Enter the <b>entity </b> you are billing in the "Who is this + for?" field. + </li> + <li> + 3. Pick todays <b>date </b> in the "Date" field. + </li> + <li> + 4. Start filling out your invoice items. Enter the{' '} + <b>description</b> of the paid service, <b>quantity</b> and the{' '} + <b>rate</b>. Amount will be calculated automatically. + </li> + <li> + 5. When you want to add another item, press the{' '} + <Button + type="button" + disabled + className="border-green-700 text-green-700" + > + + Item + </Button>{' '} + button. New line item will be added to the list. + </li> + <li> + 6. If you want to remove a line item, hover over it to reveal the + <b>"X"</b> button on the right, after the amount value. + Clicking on it will remove the line item. + </li> + <li> + 7. If you are satisfied with line items, you can head over to + <b>"Notes"</b> and <b>"Terms"</b> fields. + Content from these fields will be printed after line items in the + final pdf. + </li> + <li> + 8. Press the{' '} + <Button className="border-green-700 text-green-700" disabled> + Download + </Button>{' '} + button to generate and download the invoice pdf. If you are not + satisfied with the result you can go back and change any values you + want, then download again. + </li> + </ol> + <h2 className="text-2xl font-bold">Contact</h2> + <p className="text-lg"> + If you have any problems or questions make sure to contact the main + developer at{' '} + <a + href="mailto:mihailonvojinovic@gmail.com" + className="text-blue-700 underline" + > + mihailonvojinovic@gmail.com + </a> + . We usually respond in a day. + </p> + </div> + </section> + ); +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 8630def..df2225e 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from 'next'; import { Geist, Geist_Mono } from 'next/font/google'; import './globals.css'; +import { Header } from '@/components/header'; const geistSans = Geist({ variable: '--font-geist-sans', @@ -27,6 +28,7 @@ export default function RootLayout({ <body className={`${geistSans.variable} ${geistMono.variable} antialiased`} > + <Header /> {children} </body> </html> diff --git a/src/app/page.tsx b/src/app/page.tsx index 3e0a771..92e36b0 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -3,16 +3,11 @@ import { InvoiceGenerator } from '@/components/invoice-generator'; export default function Home() { return ( - <main className="pt-2"> - <section className="flex h-[100vh] flex-col items-center justify-between"> - <div className="space-y-10"> - <h1 className="text-center text-2xl font-bold"> - 🧾 Free Invoice Generator - </h1> - <InvoiceGenerator /> - </div> - <Footer /> + <main className="pt-10"> + <section className="mb-20 flex flex-col items-center"> + <InvoiceGenerator /> </section> + <Footer /> </main> ); } diff --git a/src/components/footer.tsx b/src/components/footer.tsx index c07f42b..deab84b 100644 --- a/src/components/footer.tsx +++ b/src/components/footer.tsx @@ -1,7 +1,7 @@ export const Footer = () => { return ( - <footer className="w-full bg-gray-400 p-2 text-center"> - <p className="font-bold text-white"> + <footer className="w-full border-t p-2 text-center"> + <p> Having issues? Contact me here:{' '} <a href="mailto:mihailonvojinovic@gmail.com" diff --git a/src/components/header.tsx b/src/components/header.tsx new file mode 100644 index 0000000..d54d957 --- /dev/null +++ b/src/components/header.tsx @@ -0,0 +1,21 @@ +import Link from 'next/link'; + +export const Header = () => { + return ( + <header className="flex w-full justify-center border-b p-2"> + <div className="flex w-5xl items-center gap-4"> + <Link href="/" className="text-xl"> + 🧾 Free Invoice Generator + </Link> + <ul className="flex gap-2"> + <li> + <Link href="/blog">Blog</Link> + </li> + <li> + <Link href="/help">Help</Link> + </li> + </ul> + </div> + </header> + ); +}; diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 29768f6..7876454 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -7,7 +7,12 @@ export const Button = ({ return ( <button {...props} - className={cn('rounded-sm border px-2', 'cursor-pointer', className)} + className={cn( + 'rounded-sm border px-2', + 'cursor-pointer', + props.disabled && 'cursor-default', + className, + )} /> ); }; |