feat: init docs

lib/package.json

@@ -22,8 +22,8 @@
     "dev": "tsup src --watch"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@internationalized/date": "^3.5.3",
@@ -46,7 +46,8 @@
     "@react-types/datepicker": "^3.7.3",
     "@react-types/dialog": "^3.5.9",
     "@react-types/shared": "^3.23.0",
-    "@types/react": "18.0.15"
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.0"
   },
   "sideEffects": false,
   "repository": {

lib/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "noEmit": true,
+    "baseUrl": "."
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

website/src/app/(home)/components/NpmBox.tsx

@@ -8,7 +8,7 @@ import { useCopy } from '@/hooks/useCopy';
 const NpmBox = () => {
   const [isCopied, copy] = useCopy();
   return (
-    <div className="gradient-border-gradient-nav gradient-border-DEFAULT bg-background relative flex min-h-14 flex-nowrap items-center gap-6 rounded-2xl px-4 lg:gap-24">
+    <div className="gradient-border-gradient-nav gradient-border-DEFAULT bg-background relative flex min-h-14 w-full max-w-[410px] flex-nowrap items-center justify-between gap-6 rounded-2xl px-4 lg:gap-24">
       <div className="flex flex-nowrap items-center gap-2 text-xs md:text-base lg:gap-4">
         <span className="text-secondary ">$</span>npm install react-calendar-kit
       </div>

website/src/app/(home)/page.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Image from 'next/image';
+import Link from 'next/link';
 import { Icons } from '@/assets/icons';
 
 import { Button } from '@/components/ui/button';
@@ -57,11 +58,20 @@ const HomePage = () => {
           <div className={subtitle({ className: 'text-center' })}>Accessible and Customizable Calendar Components</div>
 
           <HStack noWrap={{ initial: false, sm: true }}>
-            <Button>Documents</Button>
-            <Button variant="secondary">
-              <Icons.github />
-              Github
-            </Button>
+            <Link className="w-full" href="/getting-started">
+              <Button>Documents</Button>
+            </Link>
+            <Link
+              className="w-full"
+              href="http://github.com/react-calendar-kit/react-calendar-kit"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button variant="secondary">
+                <Icons.github />
+                Github
+              </Button>
+            </Link>
           </HStack>
 
           <NpmBox />

website/src/pages/_meta.json

@@ -0,0 +1,38 @@
+{
+  "getting-started": {
+    "title": "Getting Started",
+    "href": "/getting-started"
+  },
+  "-- API": {
+    "type": "separator",
+    "title": "API"
+  },
+  "Calendar": {
+    "title": "Calendar",
+    "href": "/calendar"
+  },
+  "DateInput": {
+    "title": "DateInput",
+    "href": "/date-input"
+  },
+  "TimeInput": {
+    "title": "timeInput",
+    "href": "/time-input"
+  },
+  "DatePicker": {
+    "title": "DatePicker",
+    "href": "/date-picker"
+  },
+  "DateRangePicker": {
+    "title": "DateRangePicker",
+    "href": "/date-range-picker"
+  },
+  "-- More": {
+    "type": "separator",
+    "title": "Guides"
+  },
+  "styling": {
+    "title": "Styling",
+    "href": "/styling"
+  }
+}

website/src/pages/getting-started.mdx

@@ -0,0 +1,48 @@
+import { Card, Cards, Steps, Tab, Tabs } from 'nextra-theme-docs';
+
+# Getting Started
+
+React Calendar Kit is a powerful and flexible library for building accessible and highly customizable calendar and date/time picker components in your React applications. Built on top of the robust accessibility features of the [@react-aria](https://react-spectrum.adobe.com/react-aria/index.html) library, React Calendar Kit provides a solid foundation for creating inclusive user experiences.
+
+<Steps>
+### Install
+
+<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
+  <Tab>
+    ```bash
+    pnpm i react-calendar-kit
+    ```
+
+  </Tab>
+  <Tab>
+    ```bash
+    npm i react-calendar-kit
+    ```
+  </Tab>
+  <Tab>
+    ```bash
+    yarn add react-calendar-kit
+    ```
+  </Tab>
+    <Tab>
+    ```bash
+    bun add react-calendar-kit
+    ```
+  </Tab>
+</Tabs>
+
+### Add Calendar to your app
+
+It can be placed anywhere, even in server components such as `layout.tsx`.
+
+```tsx
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+```
+
+</Steps>

website/theme.config.tsx

@@ -2,16 +2,29 @@ import React from 'react';
 import { type DocsThemeConfig } from 'nextra-theme-docs';
 
 const config: DocsThemeConfig = {
-  logo: <span>My Project</span>,
+  logo: <span>React Calendar Kit</span>,
   project: {
-    link: 'https://github.com/shuding/nextra-docs-template',
+    link: 'https://github.com/HoangDevNull/react-calendar-kit',
   },
-  chat: {
-    link: 'https://discord.com',
+  docsRepositoryBase: 'https://github.com/HoangDevNull/react-calendar-kit/tree/main/website',
+  useNextSeoProps() {
+    return {
+      titleTemplate: '%s – Sonner',
+    };
+  },
+  feedback: {
+    content: null,
   },
-  docsRepositoryBase: 'https://github.com/shuding/nextra-docs-template',
   footer: {
-    text: 'Nextra Docs Template',
+    text: (
+      <span>
+        MIT {new Date().getFullYear()} ©{' '}
+        <a href="https://github.com/HoangDevNull" target="_blank">
+          HoangDevNull
+        </a>
+        .
+      </span>
+    ),
   },
 };