feat: update website

hoangdevnull · May 20, 2024 · 4c852db · 4c852db
1 parent a1eb687
commit 4c852db
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 37 deletions.
diff --git a/react-calendar-kit/src/calendar/calendar-context.tsx b/react-calendar-kit/src/calendar/calendar-context.tsx
@@ -5,36 +5,36 @@ import type { CalendarState, RangeCalendarState } from '@react-stately/calendar'
 import { createSafeContext } from '../utils/create-safe-context';
 
 export type CalendarClassNames = {
-  nav?: string;
-  navGroup?: string;
-  nextButton?: string;
-  previousButton?: string;
-  month?: string;
-  root?: string;
-  container?: string;
-  gridWrapper?: string;
-  gridGroup?: string;
-  header?: string;
-  grid?: string;
-  gridHead?: string;
-  gridHeadRow?: string;
-  gridHeadCell?: string;
-  gridBody?: string;
-  gridBodyRow?: string;
-  gridBodyCell?: string;
-  cellButton?: string;
+  nav?: string | undefined;
+  navGroup?: string | undefined;
+  nextButton?: string | undefined;
+  previousButton?: string | undefined;
+  month?: string | undefined;
+  root?: string | undefined;
+  container?: string | undefined;
+  gridWrapper?: string | undefined;
+  gridGroup?: string | undefined;
+  header?: string | undefined;
+  grid?: string | undefined;
+  gridHead?: string | undefined;
+  gridHeadRow?: string | undefined;
+  gridHeadCell?: string | undefined;
+  gridBody?: string | undefined;
+  gridBodyRow?: string | undefined;
+  gridBodyCell?: string | undefined;
+  cellButton?: string | undefined;
 
   picker?: {
-    root?: string;
-    button?: string;
-    buttonIcon?: string;
-    highlight?: string;
-    list?: string;
-    monthList?: string;
-    yearList?: string;
-    item?: string;
-    monthItem?: string;
-    yearItem?: string;
+    root?: string | undefined;
+    button?: string | undefined;
+    buttonIcon?: string | undefined;
+    highlight?: string | undefined;
+    list?: string | undefined;
+    monthList?: string | undefined;
+    yearList?: string | undefined;
+    item?: string | undefined;
+    monthItem?: string | undefined;
+    yearItem?: string | undefined;
   };
 };
 

diff --git a/react-calendar-kit/src/types/theme.types.ts b/react-calendar-kit/src/types/theme.types.ts
@@ -1,13 +1,13 @@
 import { type CSSProperties } from 'react';
 
 export type InputClassNames = {
-  root?: string;
-  group?: string;
-  label?: string;
-  container?: string;
-  segmentWrapper?: string;
-  segment?: string;
-  separator?: string;
+  root?: string | undefined;
+  group?: string | undefined;
+  label?: string | undefined;
+  container?: string | undefined;
+  segmentWrapper?: string | undefined;
+  segment?: string | undefined;
+  separator?: string | undefined;
 };
 
 export type InputClasses = keyof InputClassNames;

diff --git a/test/pages/components/primitives.tsx b/test/pages/components/primitives.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import React, { forwardRef, type ElementRef } from 'react';
 import {
   CalendarKit,

diff --git a/website/src/app/(home)/components/CalendarMain.tsx b/website/src/app/(home)/components/CalendarMain.tsx
@@ -0,0 +1,73 @@
+import { forwardRef, type ElementRef } from 'react';
+import { Calendar, type CalendarProps } from 'react-calendar-kit';
+
+import { cn } from '@/lib/utils';
+
+export const CalendarMain = forwardRef<ElementRef<typeof Calendar>, CalendarProps>((props, ref) => (
+  <Calendar
+    ref={ref}
+    classNames={{
+      root: 'bg-gray-950 rounded-lg w-fit',
+      gridWrapper: 'flex justify-between',
+      gridGroup: 'relative w-full h-full pb-4',
+      header: 'relative p-4 flex items-center justify-between gap-2',
+      navGroup: 'flex items-center gap-2',
+      nav: 'min-w-10 aspect-square h-10 flex items-center justify-center rounded-full cursor-pointer hover:bg-gray-800',
+      month: cn([
+        'flex w-full items-center justify-center',
+
+        // Position for each layout
+        'data-[layout=apart]:justify-center',
+        'data-[layout=left]:justify-end data-[layout=left]:pr-2',
+        'data-[layout=right]:justify-start data-[layout=right]:pl-2',
+      ]),
+      gridHead: '',
+      gridHeadRow: 'text-default-400 flex justify-center px-4 pb-2',
+      gridHeadCell: 'flex w-10 justify-center items-center font-normal text-sm',
+      gridBodyRow:
+        'flex justify-center items-center data-[picker-expanded=true]:pointer-events-none pointer-events-auto',
+      gridBodyCell: 'py-0.5 px-0',
+      cellButton: cn([
+        // Base
+        'tap-highlight-transparent box-border flex h-10 w-10 origin-center select-none appearance-none items-center justify-center overflow-hidden whitespace-nowrap rounded-full text-sm font-normal text-white subpixel-antialiased shadow-none outline-none transition-[transform,background-color,color] duration-100',
+
+        // Disabled state
+        'data-[disabled=true]:cursor-default data-[readonly=true]:cursor-default data-[unavailable=true]:cursor-default data-[disabled=true]:text-gray-500 data-[unavailable=true]:text-gray-500 data-[unavailable=true]:line-through data-[disabled=true]:transition-none',
+
+        // Focus state
+        'data-[focus-visible=true]:outline-focus data-[focus-visible=true]:z-10 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-offset-2',
+
+        // Selected
+        'data-[selected=true]:bg-primary data-[selected=true]:data-[hover=true]:bg-primary data-[hover=true]:bg-gray-800 data-[hover=true]:text-white data-[selected=true]:data-[hover=true]:text-blue-50 data-[selected=true]:text-white data-[selected=true]:shadow-none',
+
+        // Click state
+        'data-[pressed=true]:bg-primary scale-100 data-[pressed=true]:scale-90 data-[pressed=true]:text-white',
+      ]),
+      // Styles for month/year picker
+      picker: {
+        root: cn([
+          '!duration-250 absolute inset-x-0 top-0 z-20 flex w-full justify-center rounded-lg bg-gray-950 transition-opacity',
+          // Opened state
+          'pointer-events-none opacity-0 data-[expanded=true]:pointer-events-auto data-[expanded=true]:opacity-100',
+        ]),
+
+        button: cn([
+          'flex items-center justify-between gap-2 rounded-full !bg-gray-900 px-4 py-2 ',
+          '!duration-250 group scale-100 shadow-sm outline-none transition-transform data-[pressed=true]:scale-90',
+        ]),
+        buttonIcon: 'group-data-[expanded=true]:rotate-180 transition-transform duration-250',
+        highlight:
+          'h-10 border-y border-gray-600 absolute w-[calc(100%_-_16px)] z-0 top-1/2 -translate-y-1/2 pointer-events-none',
+        list: cn([
+          'scrollbar-hide flex snap-y snap-mandatory flex-col items-center overflow-y-scroll px-4 ',
+          '[--scroll-shadow-size:100px] [mask-image:linear-gradient(#000,#000,transparent_0,#000_var(--scroll-shadow-size),#000_calc(100%_-_var(--scroll-shadow-size)),transparent)]',
+        ]),
+        item: cn([
+          'text-foreground z-20 flex h-10 min-h-10 w-full snap-center items-center text-base transition-opacity',
+          'data-[focus-visible=true]:outline-focus outline-none data-[focus-visible=true]:z-20 data-[pressed=true]:opacity-50 data-[focus-visible=true]:outline-2 data-[focus-visible=true]:outline-offset-2 ',
+        ]),
+      },
+    }}
+    {...props}
+  />
+));
diff --git a/website/src/app/(home)/page.tsx b/website/src/app/(home)/page.tsx
@@ -8,6 +8,7 @@ import { HStack } from '@/components/h-stack';
 import { container, subtitle } from '@/components/primitives';
 import { VStack } from '@/components/v-stack';
 
+import { CalendarMain } from './components/CalendarMain';
 import { FeatureCard } from './components/FeatureCard';
 import NpmBox from './components/NpmBox';
 
@@ -49,7 +50,7 @@ const HomePage = () => {
         className="inset-x-center pointer-events-none top-0 max-h-screen"
       />
 
-      <div className={container({ size: 'sm' })}>
+      <div className={container({ size: 'sm', className: 'z-10 relative' })}>
         {/* <BackgroundBeams className="z-[-1]" /> */}
         <VStack spacing={24} align="center">
           <h1 className="bg-gradient-text bg-clip-text pt-12 text-center font-mono text-2xl uppercase text-transparent sm:text-3xl md:text-4xl lg:text-6xl">
@@ -85,13 +86,18 @@ const HomePage = () => {
         </VStack>
       </div>
 
-      <div className={container({ size: '2xl', className: 'mt-14' })}>
+      <div className={container({ size: '2xl', className: 'mt-14 z-10 relative ' })}>
         <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
           {FEATURES.map((feature, index) => (
             <FeatureCard {...feature} key={index} />
           ))}
         </div>
       </div>
+
+      <div className="relative z-10 mt-20 flex flex-wrap items-stretch justify-center gap-8">
+        <CalendarMain headerLayout="left" />
+        <CalendarMain withPicker />
+      </div>
     </section>
   );
 };

diff --git a/website/src/app/layout.tsx b/website/src/app/layout.tsx
@@ -5,6 +5,7 @@ import clsx from 'clsx';
 
 import { fontMono, fontSans } from '@/config/fonts';
 import { APP_URL, siteConfig } from '@/config/site';
+import { container } from '@/components/primitives';
 
 import { Providers } from './providers';
 
@@ -69,6 +70,16 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <Providers attribute="class" defaultTheme="dark">
           {children}
         </Providers>
+
+        <footer className={container({ size: '2xl', className: 'mt-16 border-t border-gray-600 text-center py-6' })}>
+          <span className="text-sm">
+            MIT {new Date().getFullYear()} ©{' '}
+            <a href="https://github.com/HoangDevNull" target="_blank">
+              HoangDevNull
+            </a>
+            .
+          </span>
+        </footer>
       </body>
     </html>
   );