From 5bd1ebd4741afef9f25e953672fb2c9b4c78badd Mon Sep 17 00:00:00 2001 From: hylerrix Date: Fri, 2 Jun 2023 16:56:48 +0800 Subject: [PATCH 1/6] feat: init first intro card in landing page --- .../app/api/auth/[...nextauth]/route.ts | 3 +- ningowood.com/app/layout.tsx | 14 +- ningowood.com/app/page.tsx | 171 +----------------- ningowood.com/app/sitemap.ts | 4 +- .../components/home/component-grid.tsx | 4 +- .../components/home/home-Intro-header.tsx | 95 ++++++++++ ningowood.com/components/home/web-vitals.tsx | 39 ---- ningowood.com/components/layout/footer.tsx | 6 +- ningowood.com/components/layout/navbar.tsx | 4 +- 9 files changed, 121 insertions(+), 219 deletions(-) create mode 100644 ningowood.com/components/home/home-Intro-header.tsx delete mode 100644 ningowood.com/components/home/web-vitals.tsx diff --git a/ningowood.com/app/api/auth/[...nextauth]/route.ts b/ningowood.com/app/api/auth/[...nextauth]/route.ts index b39b376..fae86dc 100644 --- a/ningowood.com/app/api/auth/[...nextauth]/route.ts +++ b/ningowood.com/app/api/auth/[...nextauth]/route.ts @@ -1,7 +1,8 @@ import NextAuth, { NextAuthOptions } from "next-auth"; +import GoogleProvider from "next-auth/providers/google"; import { PrismaAdapter } from "@next-auth/prisma-adapter"; + import prisma from "@/lib/prisma"; -import GoogleProvider from "next-auth/providers/google"; export const authOptions: NextAuthOptions = { adapter: PrismaAdapter(prisma), diff --git a/ningowood.com/app/layout.tsx b/ningowood.com/app/layout.tsx index 05728b4..d026a32 100644 --- a/ningowood.com/app/layout.tsx +++ b/ningowood.com/app/layout.tsx @@ -7,17 +7,19 @@ import Footer from "@/components/layout/footer"; import { Suspense } from "react"; export const metadata = { - title: "Precedent - Building blocks for your Next.js project", + title: + "Ningowood - Add the missing community to the spreadsheet database ecology", description: - "Precedent is the all-in-one solution for your Next.js project. It includes a design system, authentication, analytics, and more.", + "Ningowood v0.2 is focus on adding the missing community to the spreadsheet database ecology.", twitter: { card: "summary_large_image", - title: "Precedent - Building blocks for your Next.js project", + title: + "Ningowood - Add the missing community to the spreadsheet database ecology", description: - "Precedent is the all-in-one solution for your Next.js project. It includes a design system, authentication, analytics, and more.", - creator: "@steventey", + "Ningowood v0.2 is focus on adding the missing community to the spreadsheet database ecology.", + creator: "@hylerrix", }, - metadataBase: new URL("https://precedent.dev"), + metadataBase: new URL("http://ningowood.com"), themeColor: "#FFF", }; diff --git a/ningowood.com/app/page.tsx b/ningowood.com/app/page.tsx index d086321..4affff4 100644 --- a/ningowood.com/app/page.tsx +++ b/ningowood.com/app/page.tsx @@ -1,172 +1,13 @@ -import Card from "@/components/home/card"; -import Balancer from "react-wrap-balancer"; -import { DEPLOY_URL } from "@/lib/constants"; -import { Github, Twitter } from "@/components/shared/icons"; -import WebVitals from "@/components/home/web-vitals"; -import ComponentGrid from "@/components/home/component-grid"; -import Image from "next/image"; -import { nFormatter } from "@/lib/utils"; +import HomeIntroHeader from "@/components/home/home-Intro-header"; export default async function Home() { - const { stargazers_count: stars } = await fetch( - "https://api.github.com/repos/steven-tey/precedent", - { - ...(process.env.GITHUB_OAUTH_TOKEN && { - headers: { - Authorization: `Bearer ${process.env.GITHUB_OAUTH_TOKEN}`, - "Content-Type": "application/json", - }, - }), - // data will revalidate every 60 seconds - next: { revalidate: 60 }, - }, - ) - .then((res) => res.json()) - .catch((e) => console.log(e)); - return ( <> -
- - -

- Introducing Precedent -

- -

- Building blocks for your Next project -

-

- - An opinionated collection of components, hooks, and utilities for - your Next.js project. - -

-
- - - - -

Deploy to Vercel

- - - -

- Star on GitHub{" "} - {nFormatter(stars)} -

- -
-
-
- {features.map(({ title, description, demo, large }) => ( - - ) : ( - demo - ) - } - large={large} - /> - ))} -
+ {/** + * TODO: How to use server side components? + * In '../components' folder we connot use fetch? + */} + ); } - -const features = [ - { - title: "Beautiful, reusable components", - description: - "Pre-built beautiful, a11y-first components, powered by [Tailwind CSS](https://tailwindcss.com/), [Radix UI](https://www.radix-ui.com/), and [Framer Motion](https://framer.com/motion)", - large: true, - }, - { - title: "Performance first", - description: - "Built on [Next.js](https://nextjs.org/) primitives like `@next/font` and `next/image` for stellar performance.", - demo: , - }, - { - title: "One-click Deploy", - description: - "Jumpstart your next project by deploying Precedent to [Vercel](https://vercel.com/) in one click.", - demo: ( - - Deploy with Vercel - - ), - }, - { - title: "Built-in Auth + Database", - description: - "Precedent comes with authentication and database via [Auth.js](https://authjs.dev/) + [Prisma](https://prisma.io/)", - demo: ( -
- Auth.js logo - Prisma logo -
- ), - }, - { - title: "Hooks, utilities, and more", - description: - "Precedent offers a collection of hooks, utilities, and `@vercel/og`", - demo: ( -
- useIntersectionObserver - useLocalStorage - useScroll - nFormatter - capitalize - truncate -
- ), - }, -]; diff --git a/ningowood.com/app/sitemap.ts b/ningowood.com/app/sitemap.ts index d0ff0ab..6883dc8 100644 --- a/ningowood.com/app/sitemap.ts +++ b/ningowood.com/app/sitemap.ts @@ -11,11 +11,11 @@ export default async function sitemap(): Promise { return [ { - url: "https://precedent.dev", + url: "http://ningowood.com", lastModified: new Date(), }, ...users.map((user) => ({ - url: `https://precedent.dev/${user.id}`, + url: `http://ningowood.com/${user.id}`, lastModified: new Date(), })), ]; diff --git a/ningowood.com/components/home/component-grid.tsx b/ningowood.com/components/home/component-grid.tsx index 77fa233..6162ecf 100644 --- a/ningowood.com/components/home/component-grid.tsx +++ b/ningowood.com/components/home/component-grid.tsx @@ -1,14 +1,16 @@ "use client"; import { useState } from "react"; +import { ChevronDown } from "lucide-react"; + import { useDemoModal } from "@/components/home/demo-modal"; import Popover from "@/components/shared/popover"; import Tooltip from "@/components/shared/tooltip"; -import { ChevronDown } from "lucide-react"; export default function ComponentGrid() { const { DemoModal, setShowDemoModal } = useDemoModal(); const [openPopover, setOpenPopover] = useState(false); + return (
diff --git a/ningowood.com/components/home/home-Intro-header.tsx b/ningowood.com/components/home/home-Intro-header.tsx new file mode 100644 index 0000000..e999450 --- /dev/null +++ b/ningowood.com/components/home/home-Intro-header.tsx @@ -0,0 +1,95 @@ +import Balancer from "react-wrap-balancer"; + +import { nFormatter } from "@/lib/utils"; +import { DEPLOY_URL } from "@/lib/constants"; +import { Github, Twitter } from "@/components/shared/icons"; + +export default async function HomeIntroHeader() { + const { stargazers_count: stars } = await fetch( + "https://api.github.com/repos/ningowood/ningowood", + { + ...(process.env.GITHUB_OAUTH_TOKEN && { + headers: { + Authorization: `Bearer ${process.env.GITHUB_OAUTH_TOKEN}`, + "Content-Type": "application/json", + }, + }), + // data will revalidate every 60 seconds + next: { revalidate: 60 }, + }, + ) + .then((res) => res.json()) + .catch((e) => console.log(e)); + + return ( +
+ + +

+ Introducing Ningowood v0.2 +

+ +

+ + Add the missing community to the spreadsheet database ecology + +

+

+ + Make the structured data sharing as easy as you wish. First support + Airtable. + +

+ +
+ ); +} diff --git a/ningowood.com/components/home/web-vitals.tsx b/ningowood.com/components/home/web-vitals.tsx deleted file mode 100644 index 662333d..0000000 --- a/ningowood.com/components/home/web-vitals.tsx +++ /dev/null @@ -1,39 +0,0 @@ -"use client"; - -import { motion } from "framer-motion"; -import CountingNumbers from "@/components/shared/counting-numbers"; - -export default function WebVitals() { - return ( -
- - - - -
- ); -} diff --git a/ningowood.com/components/layout/footer.tsx b/ningowood.com/components/layout/footer.tsx index ed7e994..0ebbe97 100644 --- a/ningowood.com/components/layout/footer.tsx +++ b/ningowood.com/components/layout/footer.tsx @@ -2,14 +2,14 @@ export default function Footer() { return (

- A free template by{" "} + Currently powered by  - Steven Tey + Precedent

diff --git a/ningowood.com/components/layout/navbar.tsx b/ningowood.com/components/layout/navbar.tsx index ea0a512..cf292cc 100644 --- a/ningowood.com/components/layout/navbar.tsx +++ b/ningowood.com/components/layout/navbar.tsx @@ -25,12 +25,12 @@ export default function NavBar({ session }: { session: Session | null }) { Precedent logo -

Precedent

+

Ningowood

{session ? ( From 0b81f455c13e4a3b7ab47350722e3a49699d98d5 Mon Sep 17 00:00:00 2001 From: hylerrix Date: Fri, 2 Jun 2023 17:00:09 +0800 Subject: [PATCH 2/6] refactor: remove all unnecessary semi in Precedent --- .../app/api/auth/[...nextauth]/route.ts | 14 +++--- ningowood.com/app/fonts/index.ts | 8 ++-- ningowood.com/app/layout.tsx | 20 ++++---- ningowood.com/app/opengraph-image.tsx | 12 ++--- ningowood.com/app/page.tsx | 4 +- ningowood.com/app/sitemap.ts | 8 ++-- ningowood.com/components/home/card.tsx | 16 +++---- .../components/home/component-grid.tsx | 18 ++++---- ningowood.com/components/home/demo-modal.tsx | 28 +++++------ .../components/home/home-Intro-header.tsx | 12 ++--- ningowood.com/components/layout/footer.tsx | 2 +- ningowood.com/components/layout/nav.tsx | 10 ++-- ningowood.com/components/layout/navbar.tsx | 20 ++++---- .../components/layout/sign-in-modal.tsx | 38 +++++++-------- .../components/layout/user-dropdown.tsx | 22 ++++----- .../components/shared/counting-numbers.tsx | 46 +++++++++---------- .../shared/icons/expanding-arrow.tsx | 2 +- .../components/shared/icons/github.tsx | 2 +- .../components/shared/icons/google.tsx | 2 +- .../components/shared/icons/index.tsx | 14 +++--- .../shared/icons/loading-circle.tsx | 2 +- .../components/shared/icons/loading-dots.tsx | 8 ++-- .../shared/icons/loading-spinner.tsx | 4 +- .../components/shared/icons/twitter.tsx | 2 +- ningowood.com/components/shared/leaflet.tsx | 32 ++++++------- ningowood.com/components/shared/modal.tsx | 42 ++++++++--------- ningowood.com/components/shared/popover.tsx | 26 +++++------ ningowood.com/components/shared/tooltip.tsx | 22 ++++----- ningowood.com/lib/constants.ts | 2 +- .../lib/hooks/use-intersection-observer.ts | 32 ++++++------- ningowood.com/lib/hooks/use-local-storage.ts | 22 ++++----- ningowood.com/lib/hooks/use-scroll.ts | 16 +++---- ningowood.com/lib/hooks/use-window-size.ts | 20 ++++---- ningowood.com/lib/prisma.ts | 10 ++-- ningowood.com/lib/utils.ts | 46 +++++++++---------- ningowood.com/next.config.js | 6 +-- ningowood.com/postcss.config.js | 2 +- ningowood.com/prettier.config.js | 4 +- ningowood.com/tailwind.config.js | 8 ++-- 39 files changed, 293 insertions(+), 311 deletions(-) diff --git a/ningowood.com/app/api/auth/[...nextauth]/route.ts b/ningowood.com/app/api/auth/[...nextauth]/route.ts index fae86dc..954a547 100644 --- a/ningowood.com/app/api/auth/[...nextauth]/route.ts +++ b/ningowood.com/app/api/auth/[...nextauth]/route.ts @@ -1,8 +1,8 @@ -import NextAuth, { NextAuthOptions } from "next-auth"; -import GoogleProvider from "next-auth/providers/google"; -import { PrismaAdapter } from "@next-auth/prisma-adapter"; +import NextAuth, { NextAuthOptions } from "next-auth" +import GoogleProvider from "next-auth/providers/google" +import { PrismaAdapter } from "@next-auth/prisma-adapter" -import prisma from "@/lib/prisma"; +import prisma from "@/lib/prisma" export const authOptions: NextAuthOptions = { adapter: PrismaAdapter(prisma), @@ -12,8 +12,8 @@ export const authOptions: NextAuthOptions = { clientSecret: process.env.GOOGLE_CLIENT_SECRET as string, }), ], -}; +} -const handler = NextAuth(authOptions); +const handler = NextAuth(authOptions) -export { handler as GET, handler as POST }; +export { handler as GET, handler as POST } diff --git a/ningowood.com/app/fonts/index.ts b/ningowood.com/app/fonts/index.ts index a5a1cd2..34fc742 100644 --- a/ningowood.com/app/fonts/index.ts +++ b/ningowood.com/app/fonts/index.ts @@ -1,12 +1,12 @@ -import localFont from "next/font/local"; -import { Inter } from "next/font/google"; +import localFont from "next/font/local" +import { Inter } from "next/font/google" export const sfPro = localFont({ src: "./SF-Pro-Display-Medium.otf", variable: "--font-sf", -}); +}) export const inter = Inter({ variable: "--font-inter", subsets: ["latin"], -}); +}) diff --git a/ningowood.com/app/layout.tsx b/ningowood.com/app/layout.tsx index d026a32..9de5255 100644 --- a/ningowood.com/app/layout.tsx +++ b/ningowood.com/app/layout.tsx @@ -1,10 +1,10 @@ -import "./globals.css"; -import { Analytics } from "@vercel/analytics/react"; -import cx from "classnames"; -import { sfPro, inter } from "./fonts"; -import Nav from "@/components/layout/nav"; -import Footer from "@/components/layout/footer"; -import { Suspense } from "react"; +import "./globals.css" +import { Analytics } from "@vercel/analytics/react" +import cx from "classnames" +import { sfPro, inter } from "./fonts" +import Nav from "@/components/layout/nav" +import Footer from "@/components/layout/footer" +import { Suspense } from "react" export const metadata = { title: @@ -21,12 +21,12 @@ export const metadata = { }, metadataBase: new URL("http://ningowood.com"), themeColor: "#FFF", -}; +} export default async function RootLayout({ children, }: { - children: React.ReactNode; + children: React.ReactNode }) { return ( @@ -43,5 +43,5 @@ export default async function RootLayout({ - ); + ) } diff --git a/ningowood.com/app/opengraph-image.tsx b/ningowood.com/app/opengraph-image.tsx index a634a4e..1a7a332 100644 --- a/ningowood.com/app/opengraph-image.tsx +++ b/ningowood.com/app/opengraph-image.tsx @@ -1,14 +1,14 @@ /* eslint-disable @next/next/no-img-element */ -import { ImageResponse } from "next/server"; +import { ImageResponse } from "next/server" -export const runtime = "edge"; -export const alt = "Precedent - Building blocks for your Next.js project"; -export const contentType = "image/png"; +export const runtime = "edge" +export const alt = "Precedent - Building blocks for your Next.js project" +export const contentType = "image/png" export default async function OG() { const sfPro = await fetch( new URL("./fonts/SF-Pro-Display-Medium.otf", import.meta.url), - ).then((res) => res.arrayBuffer()); + ).then((res) => res.arrayBuffer()) return new ImageResponse( ( @@ -56,5 +56,5 @@ export default async function OG() { }, ], }, - ); + ) } diff --git a/ningowood.com/app/page.tsx b/ningowood.com/app/page.tsx index 4affff4..56f5b86 100644 --- a/ningowood.com/app/page.tsx +++ b/ningowood.com/app/page.tsx @@ -1,4 +1,4 @@ -import HomeIntroHeader from "@/components/home/home-Intro-header"; +import HomeIntroHeader from "@/components/home/home-Intro-header" export default async function Home() { return ( @@ -9,5 +9,5 @@ export default async function Home() { */} - ); + ) } diff --git a/ningowood.com/app/sitemap.ts b/ningowood.com/app/sitemap.ts index 6883dc8..68f5f64 100644 --- a/ningowood.com/app/sitemap.ts +++ b/ningowood.com/app/sitemap.ts @@ -1,5 +1,5 @@ -import { MetadataRoute } from "next"; -import prisma from "@/lib/prisma"; +import { MetadataRoute } from "next" +import prisma from "@/lib/prisma" export default async function sitemap(): Promise { const users = await prisma.user.findMany({ @@ -7,7 +7,7 @@ export default async function sitemap(): Promise { id: true, }, take: 1, - }); + }) return [ { @@ -18,5 +18,5 @@ export default async function sitemap(): Promise { url: `http://ningowood.com/${user.id}`, lastModified: new Date(), })), - ]; + ] } diff --git a/ningowood.com/components/home/card.tsx b/ningowood.com/components/home/card.tsx index d5a69b0..7fab917 100644 --- a/ningowood.com/components/home/card.tsx +++ b/ningowood.com/components/home/card.tsx @@ -1,6 +1,6 @@ -import { ReactNode } from "react"; -import ReactMarkdown from "react-markdown"; -import Balancer from "react-wrap-balancer"; +import { ReactNode } from "react" +import ReactMarkdown from "react-markdown" +import Balancer from "react-wrap-balancer" export default function Card({ title, @@ -8,10 +8,10 @@ export default function Card({ demo, large, }: { - title: string; - description: string; - demo: ReactNode; - large?: boolean; + title: string + description: string + demo: ReactNode + large?: boolean }) { return (
- ); + ) } diff --git a/ningowood.com/components/home/component-grid.tsx b/ningowood.com/components/home/component-grid.tsx index 6162ecf..5ea137d 100644 --- a/ningowood.com/components/home/component-grid.tsx +++ b/ningowood.com/components/home/component-grid.tsx @@ -1,15 +1,15 @@ -"use client"; +"use client" -import { useState } from "react"; -import { ChevronDown } from "lucide-react"; +import { useState } from "react" +import { ChevronDown } from "lucide-react" -import { useDemoModal } from "@/components/home/demo-modal"; -import Popover from "@/components/shared/popover"; -import Tooltip from "@/components/shared/tooltip"; +import { useDemoModal } from "@/components/home/demo-modal" +import Popover from "@/components/shared/popover" +import Tooltip from "@/components/shared/tooltip" export default function ComponentGrid() { - const { DemoModal, setShowDemoModal } = useDemoModal(); - const [openPopover, setOpenPopover] = useState(false); + const { DemoModal, setShowDemoModal } = useDemoModal() + const [openPopover, setOpenPopover] = useState(false) return (
@@ -55,5 +55,5 @@ export default function ComponentGrid() {
- ); + ) } diff --git a/ningowood.com/components/home/demo-modal.tsx b/ningowood.com/components/home/demo-modal.tsx index 2bdcc5f..482335b 100644 --- a/ningowood.com/components/home/demo-modal.tsx +++ b/ningowood.com/components/home/demo-modal.tsx @@ -1,19 +1,13 @@ -import Modal from "@/components/shared/modal"; -import { - useState, - Dispatch, - SetStateAction, - useCallback, - useMemo, -} from "react"; -import Image from "next/image"; +import Modal from "@/components/shared/modal" +import { useState, Dispatch, SetStateAction, useCallback, useMemo } from "react" +import Image from "next/image" const DemoModal = ({ showDemoModal, setShowDemoModal, }: { - showDemoModal: boolean; - setShowDemoModal: Dispatch>; + showDemoModal: boolean + setShowDemoModal: Dispatch> }) => { return ( @@ -36,11 +30,11 @@ const DemoModal = ({ - ); -}; + ) +} export function useDemoModal() { - const [showDemoModal, setShowDemoModal] = useState(false); + const [showDemoModal, setShowDemoModal] = useState(false) const DemoModalCallback = useCallback(() => { return ( @@ -48,11 +42,11 @@ export function useDemoModal() { showDemoModal={showDemoModal} setShowDemoModal={setShowDemoModal} /> - ); - }, [showDemoModal, setShowDemoModal]); + ) + }, [showDemoModal, setShowDemoModal]) return useMemo( () => ({ setShowDemoModal, DemoModal: DemoModalCallback }), [setShowDemoModal, DemoModalCallback], - ); + ) } diff --git a/ningowood.com/components/home/home-Intro-header.tsx b/ningowood.com/components/home/home-Intro-header.tsx index e999450..7cef056 100644 --- a/ningowood.com/components/home/home-Intro-header.tsx +++ b/ningowood.com/components/home/home-Intro-header.tsx @@ -1,8 +1,8 @@ -import Balancer from "react-wrap-balancer"; +import Balancer from "react-wrap-balancer" -import { nFormatter } from "@/lib/utils"; -import { DEPLOY_URL } from "@/lib/constants"; -import { Github, Twitter } from "@/components/shared/icons"; +import { nFormatter } from "@/lib/utils" +import { DEPLOY_URL } from "@/lib/constants" +import { Github, Twitter } from "@/components/shared/icons" export default async function HomeIntroHeader() { const { stargazers_count: stars } = await fetch( @@ -19,7 +19,7 @@ export default async function HomeIntroHeader() { }, ) .then((res) => res.json()) - .catch((e) => console.log(e)); + .catch((e) => console.log(e)) return (
@@ -91,5 +91,5 @@ export default async function HomeIntroHeader() {
- ); + ) } diff --git a/ningowood.com/components/layout/footer.tsx b/ningowood.com/components/layout/footer.tsx index 0ebbe97..22f8c0d 100644 --- a/ningowood.com/components/layout/footer.tsx +++ b/ningowood.com/components/layout/footer.tsx @@ -13,5 +13,5 @@ export default function Footer() {

- ); + ) } diff --git a/ningowood.com/components/layout/nav.tsx b/ningowood.com/components/layout/nav.tsx index ba62b01..121699a 100644 --- a/ningowood.com/components/layout/nav.tsx +++ b/ningowood.com/components/layout/nav.tsx @@ -1,8 +1,8 @@ -import Navbar from "./navbar"; -import { getServerSession } from "next-auth/next"; -import { authOptions } from "@/app/api/auth/[...nextauth]/route"; +import Navbar from "./navbar" +import { getServerSession } from "next-auth/next" +import { authOptions } from "@/app/api/auth/[...nextauth]/route" export default async function Nav() { - const session = await getServerSession(authOptions); - return ; + const session = await getServerSession(authOptions) + return } diff --git a/ningowood.com/components/layout/navbar.tsx b/ningowood.com/components/layout/navbar.tsx index cf292cc..d7e88f0 100644 --- a/ningowood.com/components/layout/navbar.tsx +++ b/ningowood.com/components/layout/navbar.tsx @@ -1,15 +1,15 @@ -"use client"; +"use client" -import Image from "next/image"; -import Link from "next/link"; -import useScroll from "@/lib/hooks/use-scroll"; -import { useSignInModal } from "./sign-in-modal"; -import UserDropdown from "./user-dropdown"; -import { Session } from "next-auth"; +import Image from "next/image" +import Link from "next/link" +import useScroll from "@/lib/hooks/use-scroll" +import { useSignInModal } from "./sign-in-modal" +import UserDropdown from "./user-dropdown" +import { Session } from "next-auth" export default function NavBar({ session }: { session: Session | null }) { - const { SignInModal, setShowSignInModal } = useSignInModal(); - const scrolled = useScroll(50); + const { SignInModal, setShowSignInModal } = useSignInModal() + const scrolled = useScroll(50) return ( <> @@ -47,5 +47,5 @@ export default function NavBar({ session }: { session: Session | null }) { - ); + ) } diff --git a/ningowood.com/components/layout/sign-in-modal.tsx b/ningowood.com/components/layout/sign-in-modal.tsx index 17b5021..e97454b 100644 --- a/ningowood.com/components/layout/sign-in-modal.tsx +++ b/ningowood.com/components/layout/sign-in-modal.tsx @@ -1,23 +1,17 @@ -import Modal from "@/components/shared/modal"; -import { signIn } from "next-auth/react"; -import { - useState, - Dispatch, - SetStateAction, - useCallback, - useMemo, -} from "react"; -import { LoadingDots, Google } from "@/components/shared/icons"; -import Image from "next/image"; +import Modal from "@/components/shared/modal" +import { signIn } from "next-auth/react" +import { useState, Dispatch, SetStateAction, useCallback, useMemo } from "react" +import { LoadingDots, Google } from "@/components/shared/icons" +import Image from "next/image" const SignInModal = ({ showSignInModal, setShowSignInModal, }: { - showSignInModal: boolean; - setShowSignInModal: Dispatch>; + showSignInModal: boolean + setShowSignInModal: Dispatch> }) => { - const [signInClicked, setSignInClicked] = useState(false); + const [signInClicked, setSignInClicked] = useState(false) return ( @@ -48,8 +42,8 @@ const SignInModal = ({ : "border border-gray-200 bg-white text-black hover:bg-gray-50" } flex h-10 w-full items-center justify-center space-x-3 rounded-md border text-sm shadow-sm transition-all duration-75 focus:outline-none`} onClick={() => { - setSignInClicked(true); - signIn("google"); + setSignInClicked(true) + signIn("google") }} > {signInClicked ? ( @@ -64,11 +58,11 @@ const SignInModal = ({ - ); -}; + ) +} export function useSignInModal() { - const [showSignInModal, setShowSignInModal] = useState(false); + const [showSignInModal, setShowSignInModal] = useState(false) const SignInModalCallback = useCallback(() => { return ( @@ -76,11 +70,11 @@ export function useSignInModal() { showSignInModal={showSignInModal} setShowSignInModal={setShowSignInModal} /> - ); - }, [showSignInModal, setShowSignInModal]); + ) + }, [showSignInModal, setShowSignInModal]) return useMemo( () => ({ setShowSignInModal, SignInModal: SignInModalCallback }), [setShowSignInModal, SignInModalCallback], - ); + ) } diff --git a/ningowood.com/components/layout/user-dropdown.tsx b/ningowood.com/components/layout/user-dropdown.tsx index b9c9c1a..8a53e7e 100644 --- a/ningowood.com/components/layout/user-dropdown.tsx +++ b/ningowood.com/components/layout/user-dropdown.tsx @@ -1,17 +1,17 @@ -"use client"; +"use client" -import { useState } from "react"; -import { signOut } from "next-auth/react"; -import { LayoutDashboard, LogOut } from "lucide-react"; -import Popover from "@/components/shared/popover"; -import Image from "next/image"; -import { Session } from "next-auth"; +import { useState } from "react" +import { signOut } from "next-auth/react" +import { LayoutDashboard, LogOut } from "lucide-react" +import Popover from "@/components/shared/popover" +import Image from "next/image" +import { Session } from "next-auth" export default function UserDropdown({ session }: { session: Session }) { - const { email, image } = session?.user || {}; - const [openPopover, setOpenPopover] = useState(false); + const { email, image } = session?.user || {} + const [openPopover, setOpenPopover] = useState(false) - if (!email) return null; + if (!email) return null return (
@@ -58,5 +58,5 @@ export default function UserDropdown({ session }: { session: Session }) {
- ); + ) } diff --git a/ningowood.com/components/shared/counting-numbers.tsx b/ningowood.com/components/shared/counting-numbers.tsx index bfd3a37..bf6e554 100644 --- a/ningowood.com/components/shared/counting-numbers.tsx +++ b/ningowood.com/components/shared/counting-numbers.tsx @@ -1,6 +1,6 @@ -"use client"; +"use client" -import { useEffect, useState } from "react"; +import { useEffect, useState } from "react" export default function CountingNumbers({ value, @@ -8,33 +8,33 @@ export default function CountingNumbers({ start = 0, duration = 800, }: { - value: number; - className: string; - start?: number; - duration?: number; + value: number + className: string + start?: number + duration?: number }) { - const [count, setCount] = useState(start); + const [count, setCount] = useState(start) useEffect(() => { - let startTime: number | undefined; + let startTime: number | undefined const animateCount = (timestamp: number) => { - if (!startTime) startTime = timestamp; - const timePassed = timestamp - startTime; - const progress = timePassed / duration; - const currentCount = easeOutQuad(progress, 0, value, 1); + if (!startTime) startTime = timestamp + const timePassed = timestamp - startTime + const progress = timePassed / duration + const currentCount = easeOutQuad(progress, 0, value, 1) if (currentCount >= value) { - setCount(value); - return; + setCount(value) + return } - setCount(currentCount); - requestAnimationFrame(animateCount); - }; - requestAnimationFrame(animateCount); - }, [value, duration]); + setCount(currentCount) + requestAnimationFrame(animateCount) + } + requestAnimationFrame(animateCount) + }, [value, duration]) - return

{Intl.NumberFormat().format(count)}

; + return

{Intl.NumberFormat().format(count)}

} const easeOutQuad = (t: number, b: number, c: number, d: number) => { - t = t > d ? d : t / d; - return Math.round(-c * t * (t - 2) + b); -}; + t = t > d ? d : t / d + return Math.round(-c * t * (t - 2) + b) +} diff --git a/ningowood.com/components/shared/icons/expanding-arrow.tsx b/ningowood.com/components/shared/icons/expanding-arrow.tsx index 819fd74..6f44c37 100644 --- a/ningowood.com/components/shared/icons/expanding-arrow.tsx +++ b/ningowood.com/components/shared/icons/expanding-arrow.tsx @@ -32,5 +32,5 @@ export default function ExpandingArrow({ className }: { className?: string }) { > - ); + ) } diff --git a/ningowood.com/components/shared/icons/github.tsx b/ningowood.com/components/shared/icons/github.tsx index ff13f39..c69d76c 100644 --- a/ningowood.com/components/shared/icons/github.tsx +++ b/ningowood.com/components/shared/icons/github.tsx @@ -10,5 +10,5 @@ export default function Github({ className }: { className?: string }) { > - ); + ) } diff --git a/ningowood.com/components/shared/icons/google.tsx b/ningowood.com/components/shared/icons/google.tsx index 660f7b7..33e705b 100644 --- a/ningowood.com/components/shared/icons/google.tsx +++ b/ningowood.com/components/shared/icons/google.tsx @@ -43,5 +43,5 @@ export default function Google({ className }: { className: string }) { d="M50 69.8a19.8 19.8 90 1 0 0-39.6 19.8 19.8 90 0 0 0 39.6z" />{" "} - ); + ) } diff --git a/ningowood.com/components/shared/icons/index.tsx b/ningowood.com/components/shared/icons/index.tsx index 1795504..6edfb53 100644 --- a/ningowood.com/components/shared/icons/index.tsx +++ b/ningowood.com/components/shared/icons/index.tsx @@ -1,7 +1,7 @@ -export { default as LoadingDots } from "./loading-dots"; -export { default as LoadingCircle } from "./loading-circle"; -export { default as LoadingSpinner } from "./loading-spinner"; -export { default as ExpandingArrow } from "./expanding-arrow"; -export { default as Github } from "./github"; -export { default as Twitter } from "./twitter"; -export { default as Google } from "./google"; +export { default as LoadingDots } from "./loading-dots" +export { default as LoadingCircle } from "./loading-circle" +export { default as LoadingSpinner } from "./loading-spinner" +export { default as ExpandingArrow } from "./expanding-arrow" +export { default as Github } from "./github" +export { default as Twitter } from "./twitter" +export { default as Google } from "./google" diff --git a/ningowood.com/components/shared/icons/loading-circle.tsx b/ningowood.com/components/shared/icons/loading-circle.tsx index 4649275..d09642e 100644 --- a/ningowood.com/components/shared/icons/loading-circle.tsx +++ b/ningowood.com/components/shared/icons/loading-circle.tsx @@ -16,5 +16,5 @@ export default function LoadingCircle() { fill="currentFill" /> - ); + ) } diff --git a/ningowood.com/components/shared/icons/loading-dots.tsx b/ningowood.com/components/shared/icons/loading-dots.tsx index 23ebed0..2bc2d72 100644 --- a/ningowood.com/components/shared/icons/loading-dots.tsx +++ b/ningowood.com/components/shared/icons/loading-dots.tsx @@ -1,4 +1,4 @@ -import styles from "./loading-dots.module.css"; +import styles from "./loading-dots.module.css" const LoadingDots = ({ color = "#000" }: { color?: string }) => { return ( @@ -7,7 +7,7 @@ const LoadingDots = ({ color = "#000" }: { color?: string }) => { - ); -}; + ) +} -export default LoadingDots; +export default LoadingDots diff --git a/ningowood.com/components/shared/icons/loading-spinner.tsx b/ningowood.com/components/shared/icons/loading-spinner.tsx index 1c8e704..fb66008 100644 --- a/ningowood.com/components/shared/icons/loading-spinner.tsx +++ b/ningowood.com/components/shared/icons/loading-spinner.tsx @@ -1,4 +1,4 @@ -import styles from "./loading-spinner.module.css"; +import styles from "./loading-spinner.module.css" export default function LoadingSpinner() { return ( @@ -16,5 +16,5 @@ export default function LoadingSpinner() {
- ); + ) } diff --git a/ningowood.com/components/shared/icons/twitter.tsx b/ningowood.com/components/shared/icons/twitter.tsx index 693309d..c41999d 100644 --- a/ningowood.com/components/shared/icons/twitter.tsx +++ b/ningowood.com/components/shared/icons/twitter.tsx @@ -10,5 +10,5 @@ export default function Twitter({ className }: { className?: string }) { d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z" /> - ); + ) } diff --git a/ningowood.com/components/shared/leaflet.tsx b/ningowood.com/components/shared/leaflet.tsx index e5eaa6d..e921e01 100644 --- a/ningowood.com/components/shared/leaflet.tsx +++ b/ningowood.com/components/shared/leaflet.tsx @@ -1,33 +1,33 @@ -import { useEffect, useRef, ReactNode, Dispatch, SetStateAction } from "react"; -import { AnimatePresence, motion, useAnimation } from "framer-motion"; +import { useEffect, useRef, ReactNode, Dispatch, SetStateAction } from "react" +import { AnimatePresence, motion, useAnimation } from "framer-motion" export default function Leaflet({ setShow, children, }: { - setShow: Dispatch>; - children: ReactNode; + setShow: Dispatch> + children: ReactNode }) { - const leafletRef = useRef(null); - const controls = useAnimation(); - const transitionProps = { type: "spring", stiffness: 500, damping: 30 }; + const leafletRef = useRef(null) + const controls = useAnimation() + const transitionProps = { type: "spring", stiffness: 500, damping: 30 } useEffect(() => { controls.start({ y: 20, transition: transitionProps, - }); + }) // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); + }, []) async function handleDragEnd(_: any, info: any) { - const offset = info.offset.y; - const velocity = info.velocity.y; - const height = leafletRef.current?.getBoundingClientRect().height || 0; + const offset = info.offset.y + const velocity = info.velocity.y + const height = leafletRef.current?.getBoundingClientRect().height || 0 if (offset > height / 2 || velocity > 800) { - await controls.start({ y: "100%", transition: transitionProps }); - setShow(false); + await controls.start({ y: "100%", transition: transitionProps }) + setShow(false) } else { - controls.start({ y: 0, transition: transitionProps }); + controls.start({ y: 0, transition: transitionProps }) } } @@ -64,5 +64,5 @@ export default function Leaflet({ onClick={() => setShow(false)} /> - ); + ) } diff --git a/ningowood.com/components/shared/modal.tsx b/ningowood.com/components/shared/modal.tsx index 409b9d6..019ca0b 100644 --- a/ningowood.com/components/shared/modal.tsx +++ b/ningowood.com/components/shared/modal.tsx @@ -1,43 +1,37 @@ -"use client"; +"use client" -import { - Dispatch, - SetStateAction, - useCallback, - useEffect, - useRef, -} from "react"; -import FocusTrap from "focus-trap-react"; -import { AnimatePresence, motion } from "framer-motion"; -import Leaflet from "./leaflet"; -import useWindowSize from "@/lib/hooks/use-window-size"; +import { Dispatch, SetStateAction, useCallback, useEffect, useRef } from "react" +import FocusTrap from "focus-trap-react" +import { AnimatePresence, motion } from "framer-motion" +import Leaflet from "./leaflet" +import useWindowSize from "@/lib/hooks/use-window-size" export default function Modal({ children, showModal, setShowModal, }: { - children: React.ReactNode; - showModal: boolean; - setShowModal: Dispatch>; + children: React.ReactNode + showModal: boolean + setShowModal: Dispatch> }) { - const desktopModalRef = useRef(null); + const desktopModalRef = useRef(null) const onKeyDown = useCallback( (e: KeyboardEvent) => { if (e.key === "Escape") { - setShowModal(false); + setShowModal(false) } }, [setShowModal], - ); + ) useEffect(() => { - document.addEventListener("keydown", onKeyDown); - return () => document.removeEventListener("keydown", onKeyDown); - }, [onKeyDown]); + document.addEventListener("keydown", onKeyDown) + return () => document.removeEventListener("keydown", onKeyDown) + }, [onKeyDown]) - const { isMobile, isDesktop } = useWindowSize(); + const { isMobile, isDesktop } = useWindowSize() return ( @@ -56,7 +50,7 @@ export default function Modal({ exit={{ scale: 0.95 }} onMouseDown={(e) => { if (desktopModalRef.current === e.target) { - setShowModal(false); + setShowModal(false) } }} > @@ -76,5 +70,5 @@ export default function Modal({ )} - ); + ) } diff --git a/ningowood.com/components/shared/popover.tsx b/ningowood.com/components/shared/popover.tsx index 61a3e9b..d02cded 100644 --- a/ningowood.com/components/shared/popover.tsx +++ b/ningowood.com/components/shared/popover.tsx @@ -1,9 +1,9 @@ -"use client"; +"use client" -import { Dispatch, SetStateAction, ReactNode, useRef } from "react"; -import * as PopoverPrimitive from "@radix-ui/react-popover"; -import useWindowSize from "@/lib/hooks/use-window-size"; -import Leaflet from "./leaflet"; +import { Dispatch, SetStateAction, ReactNode, useRef } from "react" +import * as PopoverPrimitive from "@radix-ui/react-popover" +import useWindowSize from "@/lib/hooks/use-window-size" +import Leaflet from "./leaflet" export default function Popover({ children, @@ -12,14 +12,14 @@ export default function Popover({ openPopover, setOpenPopover, }: { - children: ReactNode; - content: ReactNode | string; - align?: "center" | "start" | "end"; - openPopover: boolean; - setOpenPopover: Dispatch>; + children: ReactNode + content: ReactNode | string + align?: "center" | "start" | "end" + openPopover: boolean + setOpenPopover: Dispatch> }) { - const { isMobile, isDesktop } = useWindowSize(); - if (!isMobile && !isDesktop) return <>{children}; + const { isMobile, isDesktop } = useWindowSize() + if (!isMobile && !isDesktop) return <>{children} return ( <> {isMobile && children} @@ -44,5 +44,5 @@ export default function Popover({ )} - ); + ) } diff --git a/ningowood.com/components/shared/tooltip.tsx b/ningowood.com/components/shared/tooltip.tsx index 2a45919..ae1762e 100644 --- a/ningowood.com/components/shared/tooltip.tsx +++ b/ningowood.com/components/shared/tooltip.tsx @@ -1,22 +1,22 @@ -"use client"; +"use client" -import { ReactNode, useState } from "react"; -import * as TooltipPrimitive from "@radix-ui/react-tooltip"; -import useWindowSize from "@/lib/hooks/use-window-size"; -import Leaflet from "./leaflet"; +import { ReactNode, useState } from "react" +import * as TooltipPrimitive from "@radix-ui/react-tooltip" +import useWindowSize from "@/lib/hooks/use-window-size" +import Leaflet from "./leaflet" export default function Tooltip({ children, content, fullWidth, }: { - children: ReactNode; - content: ReactNode | string; - fullWidth?: boolean; + children: ReactNode + content: ReactNode | string + fullWidth?: boolean }) { - const [openTooltip, setOpenTooltip] = useState(false); + const [openTooltip, setOpenTooltip] = useState(false) - const { isMobile, isDesktop } = useWindowSize(); + const { isMobile, isDesktop } = useWindowSize() return ( <> @@ -67,5 +67,5 @@ export default function Tooltip({ )} - ); + ) } diff --git a/ningowood.com/lib/constants.ts b/ningowood.com/lib/constants.ts index dad3757..4644a06 100644 --- a/ningowood.com/lib/constants.ts +++ b/ningowood.com/lib/constants.ts @@ -1 +1 @@ -export const DEPLOY_URL = `https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsteven-tey%2Fprecedent&project-name=precedent&repository-name=precedent&demo-title=Precedent&demo-description=An%20opinionated%20collection%20of%20components%2C%20hooks%2C%20and%20utilities%20for%20your%20Next%20project.&demo-url=https%3A%2F%2Fprecedent.dev&demo-image=https%3A%2F%2Fprecedent.dev%2Fopengraph-image&env=GOOGLE_CLIENT_ID,GOOGLE_CLIENT_SECRET,NEXTAUTH_SECRET&envDescription=How%20to%20get%20these%20env%20variables%3A&envLink=https%3A%2F%2Fgithub.com%2Fsteven-tey%2Fprecedent%2Fblob%2Fmain%2F.env.example&stores=%5B%7B"type"%3A"postgres"%7D%5D`; +export const DEPLOY_URL = `https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsteven-tey%2Fprecedent&project-name=precedent&repository-name=precedent&demo-title=Precedent&demo-description=An%20opinionated%20collection%20of%20components%2C%20hooks%2C%20and%20utilities%20for%20your%20Next%20project.&demo-url=https%3A%2F%2Fprecedent.dev&demo-image=https%3A%2F%2Fprecedent.dev%2Fopengraph-image&env=GOOGLE_CLIENT_ID,GOOGLE_CLIENT_SECRET,NEXTAUTH_SECRET&envDescription=How%20to%20get%20these%20env%20variables%3A&envLink=https%3A%2F%2Fgithub.com%2Fsteven-tey%2Fprecedent%2Fblob%2Fmain%2F.env.example&stores=%5B%7B"type"%3A"postgres"%7D%5D` diff --git a/ningowood.com/lib/hooks/use-intersection-observer.ts b/ningowood.com/lib/hooks/use-intersection-observer.ts index 516428d..40a02ac 100644 --- a/ningowood.com/lib/hooks/use-intersection-observer.ts +++ b/ningowood.com/lib/hooks/use-intersection-observer.ts @@ -1,7 +1,7 @@ -import { RefObject, useEffect, useState } from "react"; +import { RefObject, useEffect, useState } from "react" interface Args extends IntersectionObserverInit { - freezeOnceVisible?: boolean; + freezeOnceVisible?: boolean } function useIntersectionObserver( @@ -13,31 +13,31 @@ function useIntersectionObserver( freezeOnceVisible = false, }: Args, ): IntersectionObserverEntry | undefined { - const [entry, setEntry] = useState(); + const [entry, setEntry] = useState() - const frozen = entry?.isIntersecting && freezeOnceVisible; + const frozen = entry?.isIntersecting && freezeOnceVisible const updateEntry = ([entry]: IntersectionObserverEntry[]): void => { - setEntry(entry); - }; + setEntry(entry) + } useEffect(() => { - const node = elementRef?.current; // DOM Ref - const hasIOSupport = !!window.IntersectionObserver; + const node = elementRef?.current // DOM Ref + const hasIOSupport = !!window.IntersectionObserver - if (!hasIOSupport || frozen || !node) return; + if (!hasIOSupport || frozen || !node) return - const observerParams = { threshold, root, rootMargin }; - const observer = new IntersectionObserver(updateEntry, observerParams); + const observerParams = { threshold, root, rootMargin } + const observer = new IntersectionObserver(updateEntry, observerParams) - observer.observe(node); + observer.observe(node) - return () => observer.disconnect(); + return () => observer.disconnect() // eslint-disable-next-line react-hooks/exhaustive-deps - }, [threshold, root, rootMargin, frozen]); + }, [threshold, root, rootMargin, frozen]) - return entry; + return entry } -export default useIntersectionObserver; +export default useIntersectionObserver diff --git a/ningowood.com/lib/hooks/use-local-storage.ts b/ningowood.com/lib/hooks/use-local-storage.ts index aa3984b..166f686 100644 --- a/ningowood.com/lib/hooks/use-local-storage.ts +++ b/ningowood.com/lib/hooks/use-local-storage.ts @@ -1,26 +1,26 @@ -import { useEffect, useState } from "react"; +import { useEffect, useState } from "react" const useLocalStorage = ( key: string, initialValue: T, ): [T, (value: T) => void] => { - const [storedValue, setStoredValue] = useState(initialValue); + const [storedValue, setStoredValue] = useState(initialValue) useEffect(() => { // Retrieve from localStorage - const item = window.localStorage.getItem(key); + const item = window.localStorage.getItem(key) if (item) { - setStoredValue(JSON.parse(item)); + setStoredValue(JSON.parse(item)) } - }, [key]); + }, [key]) const setValue = (value: T) => { // Save state - setStoredValue(value); + setStoredValue(value) // Save to localStorage - window.localStorage.setItem(key, JSON.stringify(value)); - }; - return [storedValue, setValue]; -}; + window.localStorage.setItem(key, JSON.stringify(value)) + } + return [storedValue, setValue] +} -export default useLocalStorage; +export default useLocalStorage diff --git a/ningowood.com/lib/hooks/use-scroll.ts b/ningowood.com/lib/hooks/use-scroll.ts index 3c8014e..985bc78 100644 --- a/ningowood.com/lib/hooks/use-scroll.ts +++ b/ningowood.com/lib/hooks/use-scroll.ts @@ -1,16 +1,16 @@ -import { useCallback, useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react" export default function useScroll(threshold: number) { - const [scrolled, setScrolled] = useState(false); + const [scrolled, setScrolled] = useState(false) const onScroll = useCallback(() => { - setScrolled(window.pageYOffset > threshold); - }, [threshold]); + setScrolled(window.pageYOffset > threshold) + }, [threshold]) useEffect(() => { - window.addEventListener("scroll", onScroll); - return () => window.removeEventListener("scroll", onScroll); - }, [onScroll]); + window.addEventListener("scroll", onScroll) + return () => window.removeEventListener("scroll", onScroll) + }, [onScroll]) - return scrolled; + return scrolled } diff --git a/ningowood.com/lib/hooks/use-window-size.ts b/ningowood.com/lib/hooks/use-window-size.ts index 53a70c0..a49deb8 100644 --- a/ningowood.com/lib/hooks/use-window-size.ts +++ b/ningowood.com/lib/hooks/use-window-size.ts @@ -1,13 +1,13 @@ -import { useEffect, useState } from "react"; +import { useEffect, useState } from "react" export default function useWindowSize() { const [windowSize, setWindowSize] = useState<{ - width: number | undefined; - height: number | undefined; + width: number | undefined + height: number | undefined }>({ width: undefined, height: undefined, - }); + }) useEffect(() => { // Handler to call on window resize @@ -16,23 +16,23 @@ export default function useWindowSize() { setWindowSize({ width: window.innerWidth, height: window.innerHeight, - }); + }) } // Add event listener - window.addEventListener("resize", handleResize); + window.addEventListener("resize", handleResize) // Call handler right away so state gets updated with initial window size - handleResize(); + handleResize() // Remove event listener on cleanup - return () => window.removeEventListener("resize", handleResize); - }, []); // Empty array ensures that effect is only run on mount + return () => window.removeEventListener("resize", handleResize) + }, []) // Empty array ensures that effect is only run on mount return { windowSize, isMobile: typeof windowSize?.width === "number" && windowSize?.width < 768, isDesktop: typeof windowSize?.width === "number" && windowSize?.width >= 768, - }; + } } diff --git a/ningowood.com/lib/prisma.ts b/ningowood.com/lib/prisma.ts index 10082dc..0a1a79d 100644 --- a/ningowood.com/lib/prisma.ts +++ b/ningowood.com/lib/prisma.ts @@ -1,11 +1,11 @@ -import { PrismaClient } from "@prisma/client"; +import { PrismaClient } from "@prisma/client" declare global { - var prisma: PrismaClient | undefined; + var prisma: PrismaClient | undefined } -const prisma = global.prisma || new PrismaClient(); +const prisma = global.prisma || new PrismaClient() -if (process.env.NODE_ENV === "development") global.prisma = prisma; +if (process.env.NODE_ENV === "development") global.prisma = prisma -export default prisma; +export default prisma diff --git a/ningowood.com/lib/utils.ts b/ningowood.com/lib/utils.ts index 9b97005..1c53a49 100644 --- a/ningowood.com/lib/utils.ts +++ b/ningowood.com/lib/utils.ts @@ -1,36 +1,36 @@ -import ms from "ms"; +import ms from "ms" export const timeAgo = (timestamp: Date, timeOnly?: boolean): string => { - if (!timestamp) return "never"; + if (!timestamp) return "never" return `${ms(Date.now() - new Date(timestamp).getTime())}${ timeOnly ? "" : " ago" - }`; -}; + }` +} export async function fetcher( input: RequestInfo, init?: RequestInit, ): Promise { - const res = await fetch(input, init); + const res = await fetch(input, init) if (!res.ok) { - const json = await res.json(); + const json = await res.json() if (json.error) { const error = new Error(json.error) as Error & { - status: number; - }; - error.status = res.status; - throw error; + status: number + } + error.status = res.status + throw error } else { - throw new Error("An unexpected error occurred"); + throw new Error("An unexpected error occurred") } } - return res.json(); + return res.json() } export function nFormatter(num: number, digits?: number) { - if (!num) return "0"; + if (!num) return "0" const lookup = [ { value: 1, symbol: "" }, { value: 1e3, symbol: "K" }, @@ -39,25 +39,25 @@ export function nFormatter(num: number, digits?: number) { { value: 1e12, symbol: "T" }, { value: 1e15, symbol: "P" }, { value: 1e18, symbol: "E" }, - ]; - const rx = /\.0+$|(\.[0-9]*[1-9])0+$/; + ] + const rx = /\.0+$|(\.[0-9]*[1-9])0+$/ var item = lookup .slice() .reverse() .find(function (item) { - return num >= item.value; - }); + return num >= item.value + }) return item ? (num / item.value).toFixed(digits || 1).replace(rx, "$1") + item.symbol - : "0"; + : "0" } export function capitalize(str: string) { - if (!str || typeof str !== "string") return str; - return str.charAt(0).toUpperCase() + str.slice(1); + if (!str || typeof str !== "string") return str + return str.charAt(0).toUpperCase() + str.slice(1) } export const truncate = (str: string, length: number) => { - if (!str || str.length <= length) return str; - return `${str.slice(0, length)}...`; -}; + if (!str || str.length <= length) return str + return `${str.slice(0, length)}...` +} diff --git a/ningowood.com/next.config.js b/ningowood.com/next.config.js index a221c29..16069eb 100644 --- a/ningowood.com/next.config.js +++ b/ningowood.com/next.config.js @@ -12,8 +12,8 @@ const nextConfig = { destination: "https://github.com/steven-tey/precedent", permanent: false, }, - ]; + ] }, -}; +} -module.exports = nextConfig; +module.exports = nextConfig diff --git a/ningowood.com/postcss.config.js b/ningowood.com/postcss.config.js index 12a703d..33ad091 100644 --- a/ningowood.com/postcss.config.js +++ b/ningowood.com/postcss.config.js @@ -3,4 +3,4 @@ module.exports = { tailwindcss: {}, autoprefixer: {}, }, -}; +} diff --git a/ningowood.com/prettier.config.js b/ningowood.com/prettier.config.js index b3367ac..36a0b5b 100644 --- a/ningowood.com/prettier.config.js +++ b/ningowood.com/prettier.config.js @@ -1,9 +1,9 @@ // prettier.config.js module.exports = { bracketSpacing: true, - semi: true, + semi: false, trailingComma: "all", printWidth: 80, tabWidth: 2, plugins: [require("prettier-plugin-tailwindcss")], -}; +} diff --git a/ningowood.com/tailwind.config.js b/ningowood.com/tailwind.config.js index c10c002..ea7873b 100644 --- a/ningowood.com/tailwind.config.js +++ b/ningowood.com/tailwind.config.js @@ -1,5 +1,5 @@ /** @type {import('tailwindcss').Config} */ -const plugin = require("tailwindcss/plugin"); +const plugin = require("tailwindcss/plugin") module.exports = { content: ["./app/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"], @@ -64,8 +64,8 @@ module.exports = { require("@tailwindcss/forms"), require("@tailwindcss/typography"), plugin(({ addVariant }) => { - addVariant("radix-side-top", '&[data-side="top"]'); - addVariant("radix-side-bottom", '&[data-side="bottom"]'); + addVariant("radix-side-top", '&[data-side="top"]') + addVariant("radix-side-bottom", '&[data-side="bottom"]') }), ], -}; +} From 0fc148226888754c2ade9a60be3d37a560415815 Mon Sep 17 00:00:00 2001 From: hylerrix Date: Fri, 2 Jun 2023 18:22:58 +0800 Subject: [PATCH 3/6] feat: using shadcn dashboard ui to introduce more --- ningowood.com/app/layout.tsx | 3 +- ningowood.com/app/page.tsx | 3 + .../components/date-range-picker.tsx | 66 + .../home/dashboard/components/main-nav.tsx | 40 + .../home/dashboard/components/overview.tsx | 78 + .../dashboard/components/recent-databases.tsx | 62 + .../home/dashboard/components/search.tsx | 13 + .../dashboard/components/team-switcher.tsx | 205 ++ .../home/dashboard/components/user-nav.tsx | 67 + .../components/home/dashboard/page.tsx | 138 + ningowood.com/components/ui/accordion.tsx | 60 + ningowood.com/components/ui/alert-dialog.tsx | 150 + ningowood.com/components/ui/alert.tsx | 59 + ningowood.com/components/ui/aspect-ratio.tsx | 7 + ningowood.com/components/ui/avatar.tsx | 50 + ningowood.com/components/ui/badge.tsx | 36 + ningowood.com/components/ui/button.tsx | 55 + ningowood.com/components/ui/calendar.tsx | 64 + ningowood.com/components/ui/card.tsx | 79 + ningowood.com/components/ui/checkbox.tsx | 30 + ningowood.com/components/ui/collapsible.tsx | 11 + ningowood.com/components/ui/command.tsx | 155 + ningowood.com/components/ui/context-menu.tsx | 200 ++ ningowood.com/components/ui/dialog.tsx | 128 + ningowood.com/components/ui/dropdown-menu.tsx | 200 ++ ningowood.com/components/ui/hover-card.tsx | 29 + ningowood.com/components/ui/input.tsx | 25 + ningowood.com/components/ui/label.tsx | 26 + ningowood.com/components/ui/menubar.tsx | 236 ++ .../components/ui/navigation-menu.tsx | 128 + ningowood.com/components/ui/popover.tsx | 31 + ningowood.com/components/ui/progress.tsx | 28 + ningowood.com/components/ui/radio-group.tsx | 44 + ningowood.com/components/ui/scroll-area.tsx | 48 + ningowood.com/components/ui/select.tsx | 120 + ningowood.com/components/ui/separator.tsx | 31 + ningowood.com/components/ui/sheet.tsx | 233 ++ ningowood.com/components/ui/skeleton.tsx | 15 + ningowood.com/components/ui/slider.tsx | 28 + ningowood.com/components/ui/switch.tsx | 29 + ningowood.com/components/ui/table.tsx | 114 + ningowood.com/components/ui/tabs.tsx | 55 + ningowood.com/components/ui/textarea.tsx | 24 + ningowood.com/components/ui/toast.tsx | 127 + ningowood.com/components/ui/toaster.tsx | 35 + ningowood.com/components/ui/toggle.tsx | 45 + ningowood.com/components/ui/tooltip.tsx | 30 + ningowood.com/components/ui/use-toast.ts | 189 ++ ningowood.com/lib/utils.ts | 19 + ningowood.com/package-lock.json | 2902 +++++++++++++++-- ningowood.com/package.json | 36 +- ningowood.com/public/logo/airtable.webp | Bin 0 -> 7976 bytes 52 files changed, 6360 insertions(+), 226 deletions(-) create mode 100644 ningowood.com/components/home/dashboard/components/date-range-picker.tsx create mode 100644 ningowood.com/components/home/dashboard/components/main-nav.tsx create mode 100644 ningowood.com/components/home/dashboard/components/overview.tsx create mode 100644 ningowood.com/components/home/dashboard/components/recent-databases.tsx create mode 100644 ningowood.com/components/home/dashboard/components/search.tsx create mode 100644 ningowood.com/components/home/dashboard/components/team-switcher.tsx create mode 100644 ningowood.com/components/home/dashboard/components/user-nav.tsx create mode 100644 ningowood.com/components/home/dashboard/page.tsx create mode 100644 ningowood.com/components/ui/accordion.tsx create mode 100644 ningowood.com/components/ui/alert-dialog.tsx create mode 100644 ningowood.com/components/ui/alert.tsx create mode 100644 ningowood.com/components/ui/aspect-ratio.tsx create mode 100644 ningowood.com/components/ui/avatar.tsx create mode 100644 ningowood.com/components/ui/badge.tsx create mode 100644 ningowood.com/components/ui/button.tsx create mode 100644 ningowood.com/components/ui/calendar.tsx create mode 100644 ningowood.com/components/ui/card.tsx create mode 100644 ningowood.com/components/ui/checkbox.tsx create mode 100644 ningowood.com/components/ui/collapsible.tsx create mode 100644 ningowood.com/components/ui/command.tsx create mode 100644 ningowood.com/components/ui/context-menu.tsx create mode 100644 ningowood.com/components/ui/dialog.tsx create mode 100644 ningowood.com/components/ui/dropdown-menu.tsx create mode 100644 ningowood.com/components/ui/hover-card.tsx create mode 100644 ningowood.com/components/ui/input.tsx create mode 100644 ningowood.com/components/ui/label.tsx create mode 100644 ningowood.com/components/ui/menubar.tsx create mode 100644 ningowood.com/components/ui/navigation-menu.tsx create mode 100644 ningowood.com/components/ui/popover.tsx create mode 100644 ningowood.com/components/ui/progress.tsx create mode 100644 ningowood.com/components/ui/radio-group.tsx create mode 100644 ningowood.com/components/ui/scroll-area.tsx create mode 100644 ningowood.com/components/ui/select.tsx create mode 100644 ningowood.com/components/ui/separator.tsx create mode 100644 ningowood.com/components/ui/sheet.tsx create mode 100644 ningowood.com/components/ui/skeleton.tsx create mode 100644 ningowood.com/components/ui/slider.tsx create mode 100644 ningowood.com/components/ui/switch.tsx create mode 100644 ningowood.com/components/ui/table.tsx create mode 100644 ningowood.com/components/ui/tabs.tsx create mode 100644 ningowood.com/components/ui/textarea.tsx create mode 100644 ningowood.com/components/ui/toast.tsx create mode 100644 ningowood.com/components/ui/toaster.tsx create mode 100644 ningowood.com/components/ui/toggle.tsx create mode 100644 ningowood.com/components/ui/tooltip.tsx create mode 100644 ningowood.com/components/ui/use-toast.ts create mode 100644 ningowood.com/public/logo/airtable.webp diff --git a/ningowood.com/app/layout.tsx b/ningowood.com/app/layout.tsx index 9de5255..5669360 100644 --- a/ningowood.com/app/layout.tsx +++ b/ningowood.com/app/layout.tsx @@ -31,12 +31,11 @@ export default async function RootLayout({ return ( -
{/* @ts-expect-error Server Component */}