diff --git a/.vscode/settings.json b/.vscode/settings.json index 34c78962..ff439df0 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -2,6 +2,9 @@ "editor.tabSize": 2, "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, "eslint.rules.customizations": [ { "rule": "*", diff --git a/apps/web/package.json b/apps/web/package.json index 9b025a04..5d516ff0 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -14,7 +14,9 @@ "typecheck": "tsc --noEmit --tsBuildInfoFile .tsbuildinfo" }, "dependencies": { + "geist": "^1.2.1", "next": "14.1.0", + "next-themes": "^0.2.1", "react": "^18.2.0", "react-dom": "^18.2.0" }, diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 01b12860..f51599d4 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -1,10 +1,11 @@ import type { Metadata } from 'next'; -import { Inter } from 'next/font/google'; +import { GeistMono } from 'geist/font/mono'; +import { GeistSans } from 'geist/font/sans'; import './globals.css'; -const inter = Inter({ subsets: ['latin'] }); +import { Providers } from './providers'; export const metadata: Metadata = { title: 'Create Next App', @@ -18,7 +19,11 @@ export default function RootLayout({ }>) { return ( - {children} + + {children} + ); } diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index e31e6064..ad30f447 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -1,27 +1,10 @@ +import { ThemeSwitcher } from '@/components/ThemeSwitcher'; + export default function Home() { return ( -
-
-

Hello world

-
- - About -
-

Garlic bread with cheese: What the science tells us

-

- For years parents have espoused the health benefits of eating garlic - bread with cheese to their children, with the food earning such an - iconic status in our culture that kids will often dress up as warm, - cheesy loaf for Halloween. -

-

- But a recent study shows that the celebrated appetizer may be linked - to a series of rabies cases springing up around the country. -

-
+
+

Hello World

+
); } diff --git a/apps/web/src/app/providers.tsx b/apps/web/src/app/providers.tsx new file mode 100644 index 00000000..49542d68 --- /dev/null +++ b/apps/web/src/app/providers.tsx @@ -0,0 +1,13 @@ +'use client'; + +import { type FC, type PropsWithChildren } from 'react'; + +import { ThemeProvider as NextThemesProvider } from 'next-themes'; + +export const Providers: FC = ({ children }) => { + return ( + + {children} + + ); +}; diff --git a/apps/web/src/components/ThemeSwitcher.tsx b/apps/web/src/components/ThemeSwitcher.tsx new file mode 100644 index 00000000..aa7396db --- /dev/null +++ b/apps/web/src/components/ThemeSwitcher.tsx @@ -0,0 +1,32 @@ +'use client'; + +import { useEffect, useState } from 'react'; + +import { useTheme } from 'next-themes'; + +export const ThemeSwitcher = () => { + const [mounted, setMounted] = useState(false); + const { theme, setTheme } = useTheme(); + + useEffect(() => { + setMounted(true); + }, []); + + if (!mounted) { + return null; + } + + return ( + + ); +}; diff --git a/cspell.config.yaml b/cspell.config.yaml index 825a4d49..44f49024 100644 --- a/cspell.config.yaml +++ b/cspell.config.yaml @@ -16,3 +16,4 @@ words: - tsbuildinfo - turborepo - typecheck + - esbenp diff --git a/packages/config/tailwind/src/preset.ts b/packages/config/tailwind/src/preset.ts index 42d5b671..7e4c418e 100644 --- a/packages/config/tailwind/src/preset.ts +++ b/packages/config/tailwind/src/preset.ts @@ -9,7 +9,12 @@ import { type Config } from 'tailwindcss'; export const orbitKitTailwindPreset: Config = { content: ['./src/**/*.{js,jsx,ts,tsx,mdx}'], theme: { - extend: {}, + extend: { + fontFamily: { + sans: ['var(--font-geist-sans)'], + mono: ['var(--font-geist-mono)'], + }, + }, }, plugins: [ animate, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eae42dfc..c2bb6271 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,9 +74,15 @@ importers: apps/web: dependencies: + geist: + specifier: ^1.2.1 + version: 1.2.1(next@14.1.0) next: specifier: 14.1.0 version: 14.1.0(@babel/core@7.23.7)(react-dom@18.2.0)(react@18.2.0) + next-themes: + specifier: ^0.2.1 + version: 0.2.1(next@14.1.0)(react-dom@18.2.0)(react@18.2.0) react: specifier: ^18.2.0 version: 18.2.0 @@ -2805,6 +2811,14 @@ packages: resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==} dev: true + /geist@1.2.1(next@14.1.0): + resolution: {integrity: sha512-xCl7zWfnWqc+TbCG5qqyeT5tnVlOO4pSJsT3Ei59DN1SR4N2VlauF8Fv0D1pPFXGUJgu6RMoeZX+wsR4T9bMhg==} + peerDependencies: + next: ^13.2 || ^14 + dependencies: + next: 14.1.0(@babel/core@7.23.7)(react-dom@18.2.0)(react@18.2.0) + dev: false + /gensequence@6.0.0: resolution: {integrity: sha512-8WwuywE9pokJRAcg2QFR/plk3cVPebSUqRPzpGQh3WQ0wIiHAw+HyOQj5IuHyUTQBHpBKFoB2JUMu9zT3vJ16Q==} engines: {node: '>=16'} @@ -4031,6 +4045,18 @@ packages: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} dev: true + /next-themes@0.2.1(next@14.1.0)(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==} + peerDependencies: + next: '*' + react: '*' + react-dom: '*' + dependencies: + next: 14.1.0(@babel/core@7.23.7)(react-dom@18.2.0)(react@18.2.0) + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + dev: false + /next@14.1.0(@babel/core@7.23.7)(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-wlzrsbfeSU48YQBjZhDzOwhWhGsy+uQycR8bHAOt1LY1bn3zZEcDyHQOEoN3aWzQ8LHCAJ1nqrWCc9XF2+O45Q==} engines: {node: '>=18.17.0'}