~thecatster/letsy-sales

50e5049f91d91bd1afdda3e9e4eabb925f8c171a — Daniil Rose 2 years ago 3f2066d
Add navbar but break map scaling
6 files changed, 164 insertions(+), 38 deletions(-)

M README.md
M components/Layout.jsx
A components/Navbar.jsx
M package.json
M pages/index.js
M yarn.lock
M README.md => README.md +2 -33
@@ 1,34 1,3 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
# Letsy Sales

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
Visualization for your Etsy sales.

M components/Layout.jsx => components/Layout.jsx +3 -1
@@ 1,4 1,5 @@
import Head from "next/head";
import Navbar from "./Navbar";

export const siteTitle = "Daniil Rose";



@@ 9,7 10,8 @@ export default function Layout({ children }) {
        <meta name="description" content="Visualization for all your Etsy sales." />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <div className="flex flex-col h-full">
      <Navbar />
      <div className="flex flex-col h-max">
        {children}
      </div>
    </div>

A components/Navbar.jsx => components/Navbar.jsx +147 -0
@@ 0,0 1,147 @@
import React, { useState } from "react";
import Link from "next/link";
import { Transition } from "@headlessui/react";

export default function Navbar({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  const inputRef = React.createRef();

  return (
    <nav>
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          <div className="flex items-center">
            <Link href="/">
              <a>
                <div className="flex-shrink-0 font-bold text-xl">
                  Letsy Sales
                </div>
              </a>
            </Link>
            <div className="hidden md:block">
              <div className="ml-10 flex items-baseline space-x-4">
                <Link href="/">
                  <a>
                    <div className="hover:bg-gray-200 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">
                      About Me
                    </div>
                  </a>
                </Link>
                <Link href="/projects/srht">
                  <a>
                    <div className="hover:bg-gray-200 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">
                      Projects
                    </div>
                  </a>
                </Link>
                <Link href="/blog">
                  <a>
                    <div className="hover:bg-gray-200 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">
                      Blog
                    </div>
                  </a>
                </Link>
                <Link href="/cv">
                  <a>
                    <div className="hover:bg-gray-200 dark:hover:bg-gray-700 px-3 py-2 rounded-md text-sm font-medium">
                      CV
                    </div>
                  </a>
                </Link>
              </div>
            </div>
          </div>
          <div className="-mr-2 flex md:hidden">
            <button
              onClick={() => setIsOpen(!isOpen)}
              type="button"
              className="bg-gray-900 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
              aria-controls="mobile-menu"
              aria-expanded="false"
            >
              <span className="sr-only">Open main menu</span>
              {!isOpen ? (
                <svg
                  className="block h-6 w-6"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  aria-hidden="true"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M4 6h16M4 12h16M4 18h16"
                  />
                </svg>
              ) : (
                <svg
                  className="block h-6 w-6"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 24 24"
                  stroke="currentColor"
                  aria-hidden="true"
                >
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth="2"
                    d="M6 18L18 6M6 6l12 12"
                  />
                </svg>
              )}
            </button>
          </div>
        </div>
      </div>

      <Transition
        show={isOpen}
        enter="transition ease-out duration-100 transform"
        enterFrom="opacity-0 scale-95"
        enterhref="opacity-100 scale-100"
        leave="transition ease-in duration-75 transform"
        leaveFrom="opacity-100 scale-100"
        leavehref="opacity-0 scale-95"
      >
        {() => (
          <div className="md:hidden" id="mobile-menu">
            <div ref={inputRef} className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
              <Link href="/">
                <a>
                  <div className="hover:bg-gray-200 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
                    About Me
                  </div>
                </a>
              </Link>
              <Link href="/projects/srht">
                <a>
                  <div className="hover:bg-gray-200 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
                    Projects
                  </div>
                </a>
              </Link>
              <Link href="/blog">
                <a>
                  <div className="hover:bg-gray-200 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
                    Blog
                  </div>
                </a>
              </Link>
              <Link href="/cv">
                <a>
                  <div className="hover:bg-gray-200 dark:hover:bg-gray-700 block px-3 py-2 rounded-md text-base font-medium">
                    CV
                  </div>
                </a>
              </Link>
            </div>
          </div>
        )}
      </Transition>
    </nav>
  );
}

M package.json => package.json +1 -0
@@ 9,6 9,7 @@
    "lint": "next lint"
  },
  "dependencies": {
    "@headlessui/react": "^1.5.0",
    "autoprefixer": "^10.4.2",
    "leaflet": "^1.7.1",
    "leaflet-defaulticon-compatibility": "^0.1.1",

M pages/index.js => pages/index.js +0 -4
@@ 13,10 13,6 @@ export default function Home() {
      <Head>
        <title>Letsy Sales</title>
      </Head>
      <div className="h-max">
        <h1>Letsy Sales</h1>
        <p>Visualization for all your Etsy sales.</p>
      </div>
      <div className="h-full">
        <ContainerDimensions>
          {({ height }) => <Map coordinates={[39.50, -98.35]} height={height} />}

M yarn.lock => yarn.lock +11 -0
@@ 75,6 75,16 @@ __metadata:
  languageName: node
  linkType: hard

"@headlessui/react@npm:^1.5.0":
  version: 1.5.0
  resolution: "@headlessui/react@npm:1.5.0"
  peerDependencies:
    react: ^16 || ^17 || ^18
    react-dom: ^16 || ^17 || ^18
  checksum: e3373dfb73936950d659a87718fb9fdedc599b344b30cb0d8b1ef0a2ec13d6f405c653fa51284236788658840ece82c6a8538a5a5931e595274e9590b2020079
  languageName: node
  linkType: hard

"@humanwhocodes/config-array@npm:^0.9.2":
  version: 0.9.5
  resolution: "@humanwhocodes/config-array@npm:0.9.5"


@@ 2064,6 2074,7 @@ __metadata:
  version: 0.0.0-use.local
  resolution: "letsy-sales@workspace:."
  dependencies:
    "@headlessui/react": ^1.5.0
    autoprefixer: ^10.4.2
    eslint: 8.11.0
    eslint-config-next: 12.1.0