-
-
+
diff --git a/src/components/header/page-title.tsx b/src/components/header/page-title.tsx
new file mode 100644
index 0000000..f3ea94d
--- /dev/null
+++ b/src/components/header/page-title.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import { AnimatePresence } from 'framer-motion';
+import { usePathname } from 'next/navigation';
+
+import { allRoutes } from '@/lib/routes';
+import { easeInExpo, fadeIn } from '@/lib/transitions';
+
+import { MotionTypography } from '../ui/typography';
+
+const HOME_PAGE = '/';
+
+export const PageTitle = () => {
+ const pathname = usePathname();
+
+ const currentPageName =
+ pathname === HOME_PAGE
+ ? 'Home'
+ : allRoutes.find((route) => route.href === pathname)?.name ?? '404';
+
+ return (
+
+
+
+ {currentPageName}
+
+
+
+ );
+};
diff --git a/src/components/notification/notification-dropdown-item.tsx b/src/components/notification/notification-dropdown-item.tsx
new file mode 100644
index 0000000..415f48a
--- /dev/null
+++ b/src/components/notification/notification-dropdown-item.tsx
@@ -0,0 +1,19 @@
+import type { INotification } from '@/lib/types';
+import { capitalize } from '@/utils';
+import { formatDistance } from '@/utils/format';
+
+import { DropdownMenuItem } from '../ui/dropdown-menu';
+
+export const NotificationDropdownItem = ({ notification }: { notification: INotification }) => {
+ return (
+
+ {notification.title}
+
+ {notification.description}
+
+
+ {capitalize(formatDistance(notification.date))}
+
+
+ );
+};
diff --git a/src/components/notification/notification-dropdown.tsx b/src/components/notification/notification-dropdown.tsx
new file mode 100644
index 0000000..02eb0eb
--- /dev/null
+++ b/src/components/notification/notification-dropdown.tsx
@@ -0,0 +1,66 @@
+import { Bell } from 'lucide-react';
+import React from 'react';
+
+import type { INotification } from '@/lib/types';
+
+import { Button } from '../ui/button';
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '../ui/dropdown-menu';
+
+import { NotificationDropdownItem } from './notification-dropdown-item';
+
+const notifications: INotification[] = [
+ {
+ id: '1',
+ title: 'New notification',
+ description: 'You have a new notification from John Doe 123456',
+ date: new Date(),
+ isRead: false,
+ },
+ {
+ id: '2',
+ title: 'New notification',
+ description: 'You have a new notification from John Doe 123456',
+ date: new Date(),
+ isRead: true,
+ },
+];
+
+export const NotificationDropdown = () => {
+ return (
+
+
+
+
+
+
+ Notification
+
+ {notifications.map((notification, index) => (
+
+ {index !== 0 &&
+ ))}
+
+
+
+ );
+};
diff --git a/src/components/rich-text-editor/index.tsx b/src/components/rich-text-editor/index.tsx
new file mode 100644
index 0000000..3533615
--- /dev/null
+++ b/src/components/rich-text-editor/index.tsx
@@ -0,0 +1 @@
+export * from './rich-text-editor';
diff --git a/src/components/rich-text-editor/rich-text-bubble-menu.tsx b/src/components/rich-text-editor/rich-text-bubble-menu.tsx
new file mode 100644
index 0000000..aaac5ff
--- /dev/null
+++ b/src/components/rich-text-editor/rich-text-bubble-menu.tsx
@@ -0,0 +1,18 @@
+import type { Editor } from '@tiptap/react';
+import { BubbleMenu } from '@tiptap/react';
+
+export const RichTextBubbleMenu = ({ editor }: { editor: Editor | null }) => {
+ if (!editor) return null;
+
+ return (
+
+ This is the bubble menu
+
+ );
+};
diff --git a/src/components/rich-text-editor/rich-text-editor.tsx b/src/components/rich-text-editor/rich-text-editor.tsx
new file mode 100644
index 0000000..f7d49e9
--- /dev/null
+++ b/src/components/rich-text-editor/rich-text-editor.tsx
@@ -0,0 +1,71 @@
+'use client';
+
+import { EditorContent, useEditor } from '@tiptap/react';
+
+import { RichTextBubbleMenu } from './rich-text-bubble-menu';
+import { richTextExtensions } from './rich-text-extenstions';
+import { RichTextFloatingMenu } from './rich-text-floating-menu';
+import { RichTextToolbar } from './rich-text-toolbar';
+
+const content = `
+
+ Hi there,
+
+
+ this is a basic example of tiptap . Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+
+
+
+ That’s a bullet list with one …
+
+
+ … or two list items.
+
+
+
+ Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
+
+
body {
+display: none;
+}
+
+ I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
+
+
+ Wow, that’s amazing. Good work, boy! 👏
+
+`;
+
+export const RichTextEditor = ({ children }: Partial
) => {
+ const editor = useEditor({
+ content,
+ extensions: richTextExtensions,
+ editorProps: {
+ attributes: {
+ class:
+ 'prose dark:prose-invert prose-sm sm:prose-base lg:prose-lg xl:prose-2xl m-5 focus:outline-none leading-loose font-normal text-sm',
+ },
+ },
+ });
+
+ return (
+ <>
+
+ Hi there,
+
+
+ this is a basic example of tiptap . Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+
+
+
+ That’s a bullet list with one …
+
+
+ … or two list items.
+
+
+
+ Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
+
+body {
+display: none;
+}
+ I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
+
+
+ Wow, that’s amazing. Good work, boy! 👏
+
+`;
+
+export const richTextExtensions: Extensions = [
+ StarterKit.configure({
+ // heading: {
+ // levels: [1, 2, 3, 4, 5, 6],
+ // HTMLAttributes: {
+ // class: 'text-4xl font-bold',
+ // },
+ // },
+ bulletList: {
+ keepMarks: true,
+ // Making this as `false` because marks are not preserved when I try to preserve attrs, awaiting a bit of help
+ keepAttributes: false,
+ },
+ orderedList: {
+ keepMarks: true,
+ // Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
+ keepAttributes: false,
+ },
+ }),
+ TextStyle,
+ Heading.extend({
+ levels: [1, 2, 3, 4, 5, 6],
+ renderHTML({ node, HTMLAttributes }) {
+ const level = this.options.levels.includes(node.attrs.level)
+ ? node.attrs.level
+ : this.options.levels[0];
+ const classes: { [index: number]: string } = {
+ 1: 'text-5xl',
+ 2: 'text-4xl',
+ 3: 'text-3xl',
+ 4: 'text-2xl',
+ 5: 'text-xl',
+ 6: 'text-lg',
+ };
+ return [
+ `h${level}`,
+ mergeAttributes(this.options.HTMLAttributes, HTMLAttributes, {
+ class: `${classes[level]}`,
+ }),
+ 0,
+ ];
+ },
+ }).configure({ levels: [1, 2, 3, 4, 5, 6] }),
+ TextAlign.configure({
+ alignments: ['left', 'center', 'right'],
+ }),
+ Link.configure({
+ protocols: ['ftp', 'mailto'],
+ linkOnPaste: true,
+ HTMLAttributes: {
+ class: 'text-primary underline cursor-pointer underline-offset-2',
+ rel: 'noopener noreferrer',
+ // Remove target entirely so links open in current tab
+ target: '_blank',
+ },
+ }),
+ Highlight.configure({
+ multicolor: true,
+ }),
+ Underline.configure({
+ HTMLAttributes: {
+ class: 'underline underline-offset-2',
+ },
+ }),
+ Color.configure({ types: [TextStyle.name, ListItem.name] }),
+];
diff --git a/src/components/rich-text-editor/rich-text-floating-menu.tsx b/src/components/rich-text-editor/rich-text-floating-menu.tsx
new file mode 100644
index 0000000..5a26de5
--- /dev/null
+++ b/src/components/rich-text-editor/rich-text-floating-menu.tsx
@@ -0,0 +1,18 @@
+import type { Editor } from '@tiptap/react';
+import { FloatingMenu } from '@tiptap/react';
+
+export const RichTextFloatingMenu = ({ editor }: { editor: Editor | null }) => {
+ if (!editor) return null;
+
+ return (
+
+ This is the floating menu
+
+ );
+};
diff --git a/src/components/rich-text-editor/rich-text-formatting.tsx b/src/components/rich-text-editor/rich-text-formatting.tsx
new file mode 100644
index 0000000..eb33b59
--- /dev/null
+++ b/src/components/rich-text-editor/rich-text-formatting.tsx
@@ -0,0 +1,128 @@
+import type { Editor } from '@tiptap/react';
+import {
+ CodeIcon,
+ CodeSquareIcon,
+ LinkIcon,
+ QuoteIcon,
+ RemoveFormattingIcon,
+ UnlinkIcon,
+} from 'lucide-react';
+
+import { Button } from '../ui/button';
+import { Toggle } from '../ui/toggle';
+
+const CodeToggle = ({ editor }: { editor: Editor }) => {
+ return (
+ editor.chain().focus().toggleCode().run()}
+ disabled={!editor.can().chain().focus().toggleCode().run()}
+ >
+
+ );
+};
+
+const CodeBlockToggle = ({ editor }: { editor: Editor }) => {
+ return (
+ editor.chain().focus().toggleCodeBlock().run()}
+ disabled={!editor.can().chain().focus().toggleCodeBlock().run()}
+ >
+
+ );
+};
+
+const BlockquoteToggle = ({ editor }: { editor: Editor }) => {
+ return (
+ editor.chain().focus().toggleBlockquote().run()}
+ disabled={!editor.can().chain().focus().toggleBlockquote().run()}
+ >
+
+ );
+};
+
+const LinkToggle = ({ editor }: { editor: Editor }) => {
+ const setLink = async () => {
+ const url = await navigator.clipboard.readText();
+
+ if (url === null) {
+ return;
+ }
+
+ if (url === '') {
+ editor.chain().focus().unsetLink().run();
+
+ return;
+ }
+ editor.chain().focus().toggleLink({ href: url }).run();
+ };
+
+ return (
+
+
+ );
+};
+
+const UnlinkButton = ({ editor }: { editor: Editor }) => {
+ return (
+ editor.chain().focus().unsetLink().run()}
+ >
+
+ );
+};
+
+const RemoveFormattingButton = ({ editor }: { editor: Editor }) => {
+ return (
+ editor.chain().focus().unsetAllMarks().run()}
+ >
+
+ );
+};
+
+const TOGGLE_COMPONENTS = [
+ CodeToggle,
+ CodeBlockToggle,
+ BlockquoteToggle,
+ LinkToggle,
+ UnlinkButton,
+ RemoveFormattingButton,
+];
+
+export const RichTextFormatting = ({ editor }: { editor: Editor }) => {
+ return (
+ <>
+ {TOGGLE_COMPONENTS.map((Component) => (
+
+
+ );
+};
+
+export const RichTextHeading = ({ editor }: { editor: Editor }) => {
+ const handleValueChange = useCallback(
+ (level: string) => {
+ if (level === '0') {
+ editor.chain().focus().setParagraph().run();
+ } else {
+ editor
+ .chain()
+ .focus()
+ .toggleHeading({ level: parseInt(level) as unknown as Level })
+ .run();
+ }
+ },
+ [editor]
+ );
+
+ return (
+
+
+
+
+
+ Text
+
+ {[1, 2, 3, 4, 5, 6].map((value) => (
+
+
+ );
+};
diff --git a/src/components/rich-text-editor/rich-text-list.tsx b/src/components/rich-text-editor/rich-text-list.tsx
new file mode 100644
index 0000000..1280ee8
--- /dev/null
+++ b/src/components/rich-text-editor/rich-text-list.tsx
@@ -0,0 +1,56 @@
+import type { Editor } from '@tiptap/react';
+import { ListIcon, ListOrderedIcon, ListXIcon } from 'lucide-react';
+
+import { Button } from '../ui/button';
+import { Toggle } from '../ui/toggle';
+
+const OrderListToggle = ({ editor }: { editor: Editor }) => {
+ return (
+ editor.chain().focus().toggleOrderedList().run()}
+ disabled={!editor.can().chain().focus().toggleOrderedList().run()}
+ >
+
+ );
+};
+
+const BulletListToggle = ({ editor }: { editor: Editor }) => {
+ return (
+ editor.chain().focus().toggleBulletList().run()}
+ disabled={!editor.can().chain().focus().toggleBulletList().run()}
+ >
+
+ );
+};
+
+const RemoveListButton = ({ editor }: { editor: Editor }) => {
+ return (
+ editor.chain().focus().clearNodes().run()}
+ >
+
+ );
+};
+
+const TOGGLE_COMPONENTS = [BulletListToggle, OrderListToggle, RemoveListButton];
+
+export const RichTextList = ({ editor }: { editor: Editor }) => {
+ return (
+ <>
+ {TOGGLE_COMPONENTS.map((Component) => (
+ editor.chain().focus().undo().run()}
+ disabled={!editor.can().chain().focus().undo().run()}
+ >
+
+ editor.chain().focus().redo().run()}
+ disabled={!editor.can().chain().focus().redo().run()}
+ >
+
+
+ );
+};
diff --git a/src/components/rich-text-editor/rich-text-text-style.tsx b/src/components/rich-text-editor/rich-text-text-style.tsx
new file mode 100644
index 0000000..b8232f9
--- /dev/null
+++ b/src/components/rich-text-editor/rich-text-text-style.tsx
@@ -0,0 +1,89 @@
+import type { Editor } from '@tiptap/react';
+import {
+ BoldIcon,
+ HighlighterIcon,
+ ItalicIcon,
+ StrikethroughIcon,
+ UnderlineIcon,
+} from 'lucide-react';
+
+import { Toggle } from '../ui/toggle';
+
+const BoldToggle = ({ editor }: { editor: Editor }) => {
+ return (
+ editor.chain().focus().toggleBold().run()}
+ disabled={!editor.can().chain().focus().toggleBold().run()}
+ >
+
+ );
+};
+
+const ItalicToggle = ({ editor }: { editor: Editor }) => {
+ return (
+ editor.chain().focus().toggleItalic().run()}
+ disabled={!editor.can().chain().focus().toggleItalic().run()}
+ >
+
+ );
+};
+
+const StrikeToggle = ({ editor }: { editor: Editor }) => {
+ return (
+ editor.chain().focus().toggleStrike().run()}
+ disabled={!editor.can().chain().focus().toggleStrike().run()}
+ >
+
+ );
+};
+
+const UnderlineToggle = ({ editor }: { editor: Editor }) => {
+ return (
+ editor.chain().focus().toggleUnderline().run()}
+ disabled={!editor.can().chain().focus().toggleUnderline().run()}
+ >
+
+ );
+};
+
+const HighlightToggle = ({ editor }: { editor: Editor }) => {
+ return (
+ editor.chain().focus().toggleHighlight().run()}
+ disabled={!editor.can().chain().focus().toggleHighlight().run()}
+ >
+
+ );
+};
+
+const TOGGLE_COMPONENTS = [
+ BoldToggle,
+ ItalicToggle,
+ StrikeToggle,
+ UnderlineToggle,
+ HighlightToggle,
+];
+
+export const RichTextTextStyle = ({ editor }: { editor: Editor }) => (
+ <>
+ {TOGGLE_COMPONENTS.map((Component) => (
+
+
+ );
+};
diff --git a/src/components/search-input.tsx b/src/components/search-input.tsx
new file mode 100644
index 0000000..4c8af6f
--- /dev/null
+++ b/src/components/search-input.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const SearchInput = () => {
+ return SearchInput
;
+};
diff --git a/src/components/sidebar/main-sidebar-nav.tsx b/src/components/sidebar/main-sidebar-nav.tsx
new file mode 100644
index 0000000..2e8a3c6
--- /dev/null
+++ b/src/components/sidebar/main-sidebar-nav.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { siteRoutes } from '@/lib/routes';
+import type { IRoute } from '@/lib/types';
+import { cn } from '@/utils';
+
+export const MainSidebarNav = () => {
+ const pathname = usePathname();
+ return (
+ <>
+ {siteRoutes.map((route) => (
+
+
+ {route.icon}
+
+ )}
+
+ {route.name}
+
+
+
+ );
+};
diff --git a/src/components/sidebar/sidebar-nav.tsx b/src/components/sidebar/sidebar-nav.tsx
deleted file mode 100644
index 1c9c96d..0000000
--- a/src/components/sidebar/sidebar-nav.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { AnimatePresence } from 'framer-motion';
-import { useRouter } from 'next/navigation';
-
-import { siteRoutes } from '@/lib/routes';
-import { fadeInLeft } from '@/lib/transitions';
-import { cn } from '@/utils';
-
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../tooltip';
-import { MotionTypography } from '../typography';
-
-import { useSidebar } from '.';
-
-export const SidebarNav = () => {
- return (
-
-
-
- {siteRoutes.map((route, i) => (
-
-
-
- );
-};
-
-interface SidebarNavItemProps {
- name: string;
- href: string;
- active?: boolean;
- icon?: React.ReactNode;
-}
-
-const SidebarNavItem = ({ icon, name, href, active }: SidebarNavItemProps) => {
- const { isVisible } = useSidebar();
- const router = useRouter();
-
- return (
-
-
- router.push(href)}
- >
- {icon}
-
-
- {isVisible && (
-
- {name}
-
- )}
-
-
-
-
- {name}
-
-
- );
-};
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
index 756d4fb..3b67289 100644
--- a/src/components/sidebar/sidebar.tsx
+++ b/src/components/sidebar/sidebar.tsx
@@ -1,175 +1,53 @@
'use client';
-import type { Variants } from 'framer-motion';
-import { AnimatePresence, m } from 'framer-motion';
-import { ChevronLeft, XIcon } from 'lucide-react';
+import useHover from '@react-hook/hover';
+import Image from 'next/image';
import Link from 'next/link';
-import {
- createContext,
- memo,
- useCallback,
- useContext,
- useEffect,
- useMemo,
- useRef,
- useState,
-} from 'react';
+import { memo, useRef } from 'react';
-import { useBreakpoint } from '@/hooks/useBreakpoint';
-import { SiteConfig } from '@/lib/site-config';
-import { fadeIn, fadeInLeft } from '@/lib/transitions';
-import { cn } from '@/utils';
+import Logo from '@/public/icon.ico';
-import { Button } from '../button';
-import { MotionBox } from '../motion-box';
-import { ThemedLogo } from '../themed-logo';
-import { MotionTypography } from '../typography';
-
-import { SidebarNav } from './sidebar-nav';
-import { useSidebarHandlers } from './useSidebarHandlers';
-
-interface SidebarContextType {
- isTabletView: boolean;
- isVisible: boolean;
- setIsVisible: (value: boolean) => void;
-}
-
-const SidebarContext = createContext({} as SidebarContextType);
-
-export const useSidebar = () => {
- const context = useContext(SidebarContext);
- if (!context) {
- throw new Error('useSidebar must be used within a SidebarProvider');
- }
- return context;
-};
-
-export const SidebarProvider = ({ children }: PropsWithChildren) => {
- const isTabletView = useBreakpoint('md', 'max');
- const [isVisible, setIsVisible] = useState(!isTabletView);
-
- const contextValue: SidebarContextType = useMemo(
- () => ({ isTabletView, isVisible, setIsVisible }),
- [isTabletView, isVisible, setIsVisible]
- );
-
- return {children} ;
-};
-
-const sidebarVariants: Variants = {
- expanded: { width: '18rem', x: 0 },
- collapsed: { width: '4.5rem', x: 0 },
- hidden: { width: '18rem', x: '-120%' },
-};
+import { MainSidebarNav } from './main-sidebar-nav';
+import { UserSidebarMenu } from './user-sidebar-menu';
export const Sidebar = memo(() => {
- const { ref, isTabletView, isVisible } = useSidebarHandlers();
+ const ref = useRef(null);
+ const isHover = useHover(ref);
return (
<>
-
-
-
- {isTabletView && isVisible && (
-
+
+
+
+
+
);
});
Sidebar.displayName = 'Sidebar';
-
-const SidebarHeader = memo(() => {
- const { isVisible } = useSidebar();
- return (
-
-
-
- {isVisible && (
-
- {SiteConfig.name}
-
- )}
-
-
- );
-});
-
-SidebarHeader.displayName = 'SidebarHeader';
-
-const SidebarToggle = memo(() => {
- const ref = useRef(null);
- const { isTabletView, isVisible, setIsVisible } = useSidebar();
-
- const toggleExpanded = useCallback(() => {
- setIsVisible(!isVisible);
- }, [isVisible]);
-
- useEffect(() => {
- if (!ref.current) return;
- if (isTabletView && isVisible) {
- ref.current.focus();
- }
- }, [isTabletView, isVisible, ref]);
-
- return (
-
- {isTabletView ? (
-
- );
-});
-
-SidebarToggle.displayName = 'SidebarToggle';
diff --git a/src/components/sidebar/theme-switch.tsx b/src/components/sidebar/theme-switch.tsx
new file mode 100644
index 0000000..c450bc8
--- /dev/null
+++ b/src/components/sidebar/theme-switch.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+
+import { useMount } from '@/hooks/useMount';
+
+import { MenubarRadioGroup, MenubarRadioItem } from '../ui/menubar';
+
+export const ThemeSwitch = () => {
+ const { theme, setTheme } = useTheme();
+ const isMount = useMount();
+
+ const handleSwitchTheme = (value: string) => {
+ if (value === theme) return;
+ setTheme(value);
+ };
+
+ if (!isMount) return null;
+
+ return (
+
+ System
+ Light
+ Dark
+
+ );
+};
diff --git a/src/components/sidebar/useSidebarHandlers.ts b/src/components/sidebar/useSidebarHandlers.ts
deleted file mode 100644
index 66dae8b..0000000
--- a/src/components/sidebar/useSidebarHandlers.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { useCallback, useEffect, useRef } from 'react';
-
-import { useSidebar } from './sidebar';
-
-export function useSidebarHandlers() {
- const ref = useRef(null);
- const { isTabletView, isVisible, setIsVisible } = useSidebar();
-
- const handleClick = useCallback(
- ({ target }: MouseEvent) => {
- if (!ref.current) return;
- if (!isVisible || !isTabletView || ref.current.contains(target as Node)) return;
- setIsVisible(false);
- },
- [isVisible, isTabletView, ref]
- );
-
- const handleKeydown = useCallback(
- ({ key }: KeyboardEvent) => {
- if (!isVisible || !isTabletView || key !== 'Escape') return;
- setIsVisible(false);
- },
- [isVisible, isTabletView]
- );
-
- useEffect(() => {
- if (isTabletView) setIsVisible(false);
- else setIsVisible(true);
- }, [isTabletView]);
-
- useEffect(() => {
- document.addEventListener('click', handleClick);
- return () => document.removeEventListener('click', handleClick);
- }, [handleClick]);
-
- useEffect(() => {
- document.addEventListener('keydown', handleKeydown);
- return () => document.removeEventListener('keydown', handleKeydown);
- }, [handleKeydown]);
-
- return { ref, isTabletView, isVisible, setIsVisible };
-}
diff --git a/src/components/sidebar/user-sidebar-menu.tsx b/src/components/sidebar/user-sidebar-menu.tsx
new file mode 100644
index 0000000..8f5904c
--- /dev/null
+++ b/src/components/sidebar/user-sidebar-menu.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import { CircleUserRoundIcon } from 'lucide-react';
+import Link from 'next/link';
+
+import { userRoutes } from '@/lib/routes';
+
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
+import { Button } from '../ui/button';
+import {
+ Menubar,
+ MenubarContent,
+ MenubarItem,
+ MenubarLabel,
+ MenubarMenu,
+ MenubarSeparator,
+ MenubarTrigger,
+} from '../ui/menubar';
+
+import { ThemeSwitch } from './theme-switch';
+
+const AccountName = ({ title }: { title: string }) => {
+ return (
+
+ {title}
+
+ );
+};
+
+const AccountEmail = ({ email }: { email: string }) => {
+ return (
+
+ {email}
+
+ );
+};
+
+export const UserSidebarMenu = () => {
+ return (
+
+
+
+
+
+
+
+ e.currentTarget.classList.remove('blur-sm')}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ ))}
+ Theme
+
+
+
+
+
+
+ );
+};
diff --git a/src/components/theme-switcher.tsx b/src/components/theme-switcher.tsx
deleted file mode 100644
index 9e42082..0000000
--- a/src/components/theme-switcher.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-'use client';
-
-import { useTheme } from 'next-themes';
-
-export const ThemeSwitcher = () => {
- const { setTheme } = useTheme();
- return (
-
- setTheme('light')}>Light Mode
- setTheme('dark')}>Dark Mode
-
- );
-};
diff --git a/src/components/themed-logo.tsx b/src/components/themed-logo.tsx
index 7815ffe..3c501a5 100644
--- a/src/components/themed-logo.tsx
+++ b/src/components/themed-logo.tsx
@@ -4,9 +4,11 @@ import Image from 'next/image';
import Logo from '@/public/icon.ico';
-export const ThemedLogo = () => {
+import { cn } from '@/utils';
+
+export const ThemedLogo = ({ className }: WithClassName) => {
return (
-
+
,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ VariantProps {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+ return (
+
+ );
+}
+
+export { Badge, badgeVariants };
diff --git a/src/components/button.tsx b/src/components/ui/button.tsx
similarity index 87%
rename from src/components/button.tsx
rename to src/components/ui/button.tsx
index 165767e..e06d7f6 100644
--- a/src/components/button.tsx
+++ b/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
import { cn } from '@/utils';
const buttonVariants = cva(
- 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+ 'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors duration-200 ease-in-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
@@ -18,8 +18,8 @@ const buttonVariants = cva(
},
size: {
default: 'h-10 px-4 py-2',
- sm: 'h-9 rounded-md px-3',
- lg: 'h-11 rounded-md px-8',
+ sm: 'h-8 px-3',
+ lg: 'h-12 px-8',
icon: 'size-10',
circle: 'rounded-full p-2',
},
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..2cf9904
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { Check } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/utils';
+
+const Checkbox = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
new file mode 100644
index 0000000..d363df1
--- /dev/null
+++ b/src/components/ui/command.tsx
@@ -0,0 +1,152 @@
+'use client';
+
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { Command as CommandPrimitive } from 'cmdk';
+import { Search } from 'lucide-react';
+import * as React from 'react';
+
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { cn } from '@/utils';
+
+const Command = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+ );
+};
+
+const CommandInput = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>((props, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+ {children}
+
+ Close
+
+
+
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes) => (
+
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes) => (
+
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+ = FieldPath,
+> = {
+ name: TName;
+};
+
+const FormFieldContext = React.createContext({} as FormFieldContextValue);
+
+const FormField = <
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath = FieldPath,
+>({
+ ...props
+}: ControllerProps) => {
+ const contextValue = React.useMemo(() => ({ name: props.name }), [props.name]);
+ return (
+
+
+ );
+};
+
+const useFormField = () => {
+ const fieldContext = React.useContext(FormFieldContext);
+ const itemContext = React.useContext(FormItemContext);
+ const { getFieldState, formState } = useFormContext();
+
+ const fieldState = getFieldState(fieldContext.name, formState);
+
+ if (!fieldContext) {
+ throw new Error('useFormField should be used within ');
+ }
+
+ const { id } = itemContext;
+
+ return {
+ id,
+ name: fieldContext.name,
+ formItemId: `${id}-form-item`,
+ formDescriptionId: `${id}-form-item-description`,
+ formMessageId: `${id}-form-item-message`,
+ ...fieldState,
+ };
+};
+
+type FormItemContextValue = {
+ id: string;
+};
+
+const FormItemContext = React.createContext({} as FormItemContextValue);
+
+const FormItem = React.forwardRef>(
+ ({ className, ...props }, ref) => {
+ const id = React.useId();
+
+ return (
+
+
+
+ );
+ }
+);
+FormItem.displayName = 'FormItem';
+
+const FormLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
+ const { error, formItemId } = useFormField();
+
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ ...props }, ref) => {
+ const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+ return (
+
+>(({ className, ...props }, ref) => {
+ const { formDescriptionId } = useFormField();
+
+ return (
+
+ );
+});
+FormDescription.displayName = 'FormDescription';
+
+const FormMessage = React.forwardRef<
+ HTMLParagraphElement,
+ React.HTMLAttributes
+>(({ className, children, ...props }, ref) => {
+ const { error, formMessageId } = useFormField();
+
+ const body = error ? String(error?.message) : children;
+
+ if (!body) {
+ return null;
+ }
+
+ return (
+
+ {body}
+
+ );
+});
+FormMessage.displayName = 'FormMessage';
+
+export {
+ Form,
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+ useFormField,
+};
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
new file mode 100644
index 0000000..9daa809
--- /dev/null
+++ b/src/components/ui/input.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+
+import { cn } from '@/utils';
+
+export interface InputProps extends React.InputHTMLAttributes {
+ startDecorator?: React.ReactNode;
+ endDecorator?: React.ReactNode;
+ side?: LeftOrRight;
+ inputClassName?: string;
+}
+
+const Input = React.forwardRef(
+ ({ className, type, startDecorator, endDecorator, inputClassName, ...props }, ref) => {
+ return (
+
+ {startDecorator}
+
+ );
+ }
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx
new file mode 100644
index 0000000..6e77ee6
--- /dev/null
+++ b/src/components/ui/label.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/utils';
+
+const labelVariants = cva(
+ 'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+);
+
+const Label = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & VariantProps
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, children, ...props }, ref) => (
+
+ {children}
+
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, align = 'start', alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+
+
+));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, checked, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+ {children}
+
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean;
+ }
+>(({ className, inset, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+
+
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverContent, PopoverTrigger };
diff --git a/src/components/ui/radio-group.tsx b/src/components/ui/radio-group.tsx
new file mode 100644
index 0000000..244e721
--- /dev/null
+++ b/src/components/ui/radio-group.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/utils';
+
+const RadioGroup = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
+ return (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => {
+ return (
+
+
+
+
+ );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
diff --git a/src/components/screen-reader.tsx b/src/components/ui/screen-reader.tsx
similarity index 100%
rename from src/components/screen-reader.tsx
rename to src/components/ui/screen-reader.tsx
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
new file mode 100644
index 0000000..ebb8d9b
--- /dev/null
+++ b/src/components/ui/select.tsx
@@ -0,0 +1,153 @@
+'use client';
+
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/utils';
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+ span]:line-clamp-1',
+ className
+ )}
+ {...props}
+ >
+ {children}
+
+
+
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, children, position = 'popper', ...props }, ref) => (
+
+
+
+ {children}
+
+
+
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, children, ...props }, ref) => (
+
+
+
+
+
+
+ {children}
+
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+ ,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
new file mode 100644
index 0000000..8beac25
--- /dev/null
+++ b/src/components/ui/table.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react';
+
+import { cn } from '@/utils';
+
+const Table = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+ )
+);
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+ HTMLTableSectionElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+ tr]:last:border-b-0', className)}
+ {...props}
+ />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef>(
+ ({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+
+>(({ className, ...props }, ref) => (
+ {}
+
+const Textarea = React.forwardRef(
+ ({ className, ...props }, ref) => {
+ return (
+
+ );
+ }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };
diff --git a/src/components/ui/toggle.tsx b/src/components/ui/toggle.tsx
new file mode 100644
index 0000000..228b389
--- /dev/null
+++ b/src/components/ui/toggle.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/utils';
+
+const toggleVariants = cva(
+ 'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+ {
+ variants: {
+ variant: {
+ default: 'bg-transparent',
+ outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
+ },
+ size: {
+ default: 'h-10 px-3',
+ sm: 'h-9 px-2.5',
+ lg: 'h-11 px-5',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ }
+);
+
+const Toggle = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & VariantProps
+>(({ className, variant, size, ...props }, ref) => (
+ ();
+
+ const mediaQueryString = useMemo(
+ () => `(${direction}-width: ${BREAKPOINTS[breakpoint]})`,
+ [breakpoint, direction]
+ );
+
+ useEffect(() => {
+ const mediaQueryList = window.matchMedia(mediaQueryString);
+ const listener = () => setMatches(!!mediaQueryList.matches);
+ listener();
+ mediaQueryList.addEventListener('change', listener); // updated from .addListener
+ return () => mediaQueryList.removeEventListener('change', listener); // updated from .removeListener
+ }, [mediaQueryString]);
+
+ return matches;
+}
diff --git a/src/lib/cookie-service.ts b/src/lib/cookie-service.ts
new file mode 100644
index 0000000..da4af1d
--- /dev/null
+++ b/src/lib/cookie-service.ts
@@ -0,0 +1,42 @@
+// src/services/CookieService.ts
+
+export const CookieService = {
+ /**
+ * Sets a cookie in the browser.
+ * @param name The name of the cookie.
+ * @param value The value of the cookie.
+ * @param days The number of days until the cookie expires.
+ */
+ set: (name: string, value: string, days?: number) => {
+ let expires = '';
+ if (days) {
+ const date = new Date();
+ date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+ expires = `; expires=${date.toUTCString()}`;
+ }
+ document.cookie = `${name}=${value || ''}${expires}; path=/`;
+ },
+
+ /**
+ * Gets a cookie by name.
+ * @param name The name of the cookie to retrieve.
+ * @returns The value of the cookie or null if not found.
+ */
+ get: (name: string) => {
+ const nameEQ = `${name}=`;
+ const ca = document.cookie.split(';');
+ for (let i = 0; i < ca.length; i++) {
+ let c = ca[i];
+ while (c.charAt(0) === ' ') c = c.substring(1, c.length);
+ if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+ }
+ },
+
+ /**
+ * Deletes a cookie by name.
+ * @param name The name of the cookie to delete.
+ */
+ delete: (name: string) => {
+ document.cookie = `${name}=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;`;
+ },
+};
diff --git a/src/lib/countries.ts b/src/lib/countries.ts
new file mode 100644
index 0000000..81577b7
--- /dev/null
+++ b/src/lib/countries.ts
@@ -0,0 +1,33 @@
+import countryData from 'world_countries_lists/data/countries/zh-tw/world.json';
+
+export const countries = countryData.map((country) => ({
+ name: country.name,
+ value: country.alpha2,
+}));
+
+export const searchCountry = (query: { id?: number; alpha2?: string; alpha3?: string }) => {
+ // if argument is not valid return false
+ if (undefined === query.id && undefined === query.alpha2 && undefined === query.alpha3)
+ return undefined;
+
+ // iterate over the array of countries
+ const targetCountry = countryData
+ .filter(function (country) {
+ // return country's data if
+ return (
+ // we are searching by ID and we have a match
+ (undefined !== query.id && country.id === query.id) ||
+ // or we are searching by alpha2 and we have a match
+ (undefined !== query.alpha2 && country.alpha2 === query.alpha2.toLowerCase()) ||
+ // or we are searching by alpha3 and we have a match
+ (undefined !== query.alpha3 && country.alpha3 === query.alpha3.toLowerCase())
+ );
+
+ // since "filter" returns an array we use pop to get just the data object
+ })
+ .pop();
+ return {
+ name: targetCountry?.name,
+ value: targetCountry?.alpha2,
+ };
+};
diff --git a/src/lib/routes.tsx b/src/lib/routes.tsx
index 614c791..105c1a0 100644
--- a/src/lib/routes.tsx
+++ b/src/lib/routes.tsx
@@ -1,4 +1,14 @@
-import { PieChart, StickyNote } from 'lucide-react';
+import {
+ FileSpreadsheet,
+ HeadsetIcon,
+ PieChart,
+ SettingsIcon,
+ Sheet,
+ StickyNote,
+ UserRoundIcon,
+} from 'lucide-react';
+
+import type { IRoute } from './types';
export const siteRoutes: IRoute[] = [
{
@@ -11,4 +21,34 @@ export const siteRoutes: IRoute[] = [
href: '/reports',
icon: {
size?: number;
color?: string;
}
+
+export interface INotification {
+ id: string;
+ title: string;
+ description: string;
+ date: Date;
+ isRead: boolean;
+}
+
+export type IRoute = {
+ name: string;
+ href: string;
+ icon?: React.ReactNode;
+ routes?: IRoute[];
+};
+
+export interface Option {
+ value: string;
+ name: string;
+}
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..c5cb9b2
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,21 @@
+import type { NextRequest } from 'next/server';
+
+import { updateSession } from '@/utils/supabase/middleware';
+
+export async function middleware(request: NextRequest) {
+ return await updateSession(request);
+}
+
+export const config = {
+ matcher: [
+ /*
+ * Match all request paths except:
+ * - _next/static (static files)
+ * - _next/image (image optimization files)
+ * - favicon.ico (favicon file)
+ * - images - .svg, .png, .jpg, .jpeg, .gif, .webp
+ * Feel free to modify this pattern to include more paths.
+ */
+ '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+ ],
+};
diff --git a/src/stores/userStore.ts b/src/stores/userStore.ts
new file mode 100644
index 0000000..3888ba8
--- /dev/null
+++ b/src/stores/userStore.ts
@@ -0,0 +1,118 @@
+import { jwtDecode } from 'jwt-decode';
+import { z } from 'zod';
+import type { useStore } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { useStoreWithEqualityFn } from 'zustand/traditional';
+import { createStore } from 'zustand/vanilla';
+
+import { CookieService } from '@/lib/cookie-service';
+
+const ACCESS_TOKEN_KEY = process.env.ACCESS_TOKEN_KEY;
+const REFRESH_TOKEN_KEY = process.env.REFRESH_TOKEN_KEY;
+
+const roles = z.enum(['admin', 'user']);
+
+type Role = z.infer;
+
+const TokenDataSchema = z.object({
+ userId: z.string(),
+ roles,
+});
+
+type TokenData = z.infer;
+
+type AuthStore = {
+ accessToken: string | undefined;
+ accessTokenData: TokenData | undefined;
+ refreshToken: string | undefined;
+
+ actions: {
+ setAccessToken: (accessToken: string | undefined) => void;
+ setRefreshToken: (refreshToken: string | undefined) => void;
+ // set tokens on the app start
+ init: () => void;
+ clearTokens: () => void;
+ };
+};
+
+export const decodeAccessToken = (accessToken: string) =>
+ TokenDataSchema.parse(jwtDecode(accessToken));
+
+const authStore = createStore()(
+ devtools(
+ (set, get) => ({
+ accessToken: undefined,
+ accessTokenData: undefined,
+ refreshToken: undefined,
+
+ actions: {
+ setAccessToken: (accessToken: string | undefined) => {
+ const accessTokenData = (() => {
+ try {
+ return accessToken ? decodeAccessToken(accessToken) : undefined;
+ } catch (error) {
+ console.error(error);
+ return undefined;
+ }
+ })();
+ set({
+ accessToken,
+ accessTokenData,
+ });
+ },
+ setRefreshToken: (refreshToken: string | undefined) =>
+ set({
+ refreshToken,
+ }),
+ init: () => {
+ const { setAccessToken, setRefreshToken } = get().actions;
+ setAccessToken(CookieService.get(ACCESS_TOKEN_KEY));
+ setRefreshToken(CookieService.get(REFRESH_TOKEN_KEY));
+ },
+ clearTokens: () =>
+ set({
+ accessToken: undefined,
+ accessTokenData: undefined,
+ refreshToken: undefined,
+ }),
+ },
+ }),
+ {
+ name: 'auth-store',
+ // enabled: !import.meta.env.PROD,
+ }
+ )
+);
+
+/**
+ * Required for zustand stores, as the lib doesn't expose this type
+ */
+export type ExtractState = S extends {
+ getState: () => infer T;
+}
+ ? T
+ : never;
+
+type Params = Parameters>;
+
+// Selectors
+const accessTokenSelector = (state: ExtractState) => state.accessToken;
+const accessTokenDataSelector = (state: ExtractState) => state.accessTokenData;
+const refreshTokenSelector = (state: ExtractState) => state.refreshToken;
+const actionsSelector = (state: ExtractState) => state.actions;
+
+// getters
+export const getAccessToken = () => accessTokenSelector(authStore.getState());
+export const getAccessTokenData = () => accessTokenDataSelector(authStore.getState());
+export const getRefreshToken = () => refreshTokenSelector(authStore.getState());
+export const getActions = () => actionsSelector(authStore.getState());
+
+function useAuthStore(selector: Params[1], equalityFn?: Params[2]) {
+ return useStoreWithEqualityFn(authStore, selector, equalityFn);
+}
+
+// Hooks
+export const useAccessToken = () => useAuthStore(accessTokenSelector);
+export const useAccessTokenData = () => useAuthStore(accessTokenDataSelector);
+export const useRefreshToken = () => useAuthStore(refreshTokenSelector);
+export const useActions = () => useAuthStore(actionsSelector);
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index 2c7addb..48da2a2 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -25,7 +25,7 @@
--ring: 221.2 83.2% 53.3%;
--radius: 0.5rem;
--gw: 4vw;
- --scroll-width: 0.5rem;
+ --scroll-size: 0.5rem;
--duration: 0.5s;
--delay: 0.2s;
}
@@ -75,23 +75,23 @@
}
::selection {
- @apply bg-primary text-white;
+ @apply bg-primary text-primary-foreground;
}
/* width */
::-webkit-scrollbar {
- width: var(--scroll-width);
+ width: var(--scroll-size);
+ height: var(--scroll-size);
}
/* Track */
::-webkit-scrollbar-track {
- @apply rounded-md;
- background: #c8c8c8;
+ @apply rounded-md bg-muted;
}
/* Handle */
::-webkit-scrollbar-thumb {
- @apply rounded-md bg-primary/70;
+ @apply rounded-md bg-primary/80 transition-colors duration-200 ease-in-out;
}
/* Handle on hover */
@@ -135,6 +135,32 @@
}
}
+// TipTap Editor Styles
+@layer components {
+ .tiptap {
+ ul,
+ ol {
+ @apply list-outside pl-4;
+ }
+
+ ul {
+ @apply list-disc;
+ }
+
+ ol {
+ @apply list-decimal;
+ }
+
+ pre {
+ @apply relative rounded-md bg-muted p-4 font-mono text-muted-foreground before:absolute before:left-2 before:top-2 before:text-sm before:leading-none before:text-muted-foreground before:content-["```"] after:absolute after:bottom-0 after:left-2 after:text-sm after:leading-none after:text-muted-foreground after:content-["```"];
+ }
+
+ :not(pre) > code {
+ @apply relative rounded-md bg-muted p-1 font-mono text-muted-foreground before:absolute before:-left-0.5 before:top-0.5 before:text-sm before:leading-none before:text-muted-foreground before:content-["`"] after:absolute after:-right-0.5 after:top-0.5 after:text-sm after:leading-none after:text-muted-foreground after:content-["`"];
+ }
+ }
+}
+
// @layer components {
// .mask {
// @apply absolute top-0 flex h-full w-full cursor-default items-center justify-center;
@@ -148,11 +174,6 @@
// }
@layer utilities {
- .no-scrollbar {
- scrollbar-width: none;
- -ms-overflow-style: none;
- }
-
.auto-grid {
--min-column-size: 15rem;
display: grid;
diff --git a/src/utils/format.ts b/src/utils/format.ts
new file mode 100644
index 0000000..0299843
--- /dev/null
+++ b/src/utils/format.ts
@@ -0,0 +1,35 @@
+import {
+ format,
+ formatDistance as formatAsDistance,
+ formatRelative as formatAsRelativeDate,
+ intlFormat,
+} from 'date-fns';
+import { zhTW } from 'date-fns/locale/zh-TW';
+
+export const formatDate = (date: Date | number, formatString = 'PPPP') => {
+ return format(date, formatString, {
+ locale: zhTW,
+ weekStartsOn: 1,
+ useAdditionalWeekYearTokens: true,
+ });
+};
+
+export const formatRelative = (date: number | Date, baseDate: number | Date = new Date()) => {
+ return formatAsRelativeDate(date, baseDate);
+};
+
+export const formatTime = (date: Date | number) => {
+ return intlFormat(
+ date,
+ {
+ hour: 'numeric',
+ minute: 'numeric',
+ hour12: false,
+ },
+ { locale: 'zh-TW' }
+ );
+};
+
+export const formatDistance = (date: Date | number, baseDate: Date | number = new Date()) => {
+ return formatAsDistance(date, baseDate, { addSuffix: true });
+};
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
new file mode 100644
index 0000000..ddc91ea
--- /dev/null
+++ b/src/utils/helpers.ts
@@ -0,0 +1,21 @@
+export const getURL = (path: string = '') => {
+ // Check if NEXT_PUBLIC_SITE_URL is set and non-empty. Set this to your site URL in production env.
+ let url =
+ process?.env?.NEXT_PUBLIC_SITE_URL && process.env.NEXT_PUBLIC_SITE_URL.trim() !== ''
+ ? process.env.NEXT_PUBLIC_SITE_URL
+ : // If not set, check for NEXT_PUBLIC_VERCEL_URL, which is automatically set by Vercel.
+ process?.env?.NEXT_PUBLIC_VERCEL_URL && process.env.NEXT_PUBLIC_VERCEL_URL.trim() !== ''
+ ? process.env.NEXT_PUBLIC_VERCEL_URL
+ : // If neither is set, default to localhost for local development.
+ 'http://localhost:3000/';
+
+ // Trim the URL and remove trailing slash if exists.
+ url = url.replace(/\/+$/, '');
+ // Make sure to include `https://` when not localhost.
+ url = url.includes('http') ? url : `https://${url}`;
+ // Ensure path starts without a slash to avoid double slashes in the final URL.
+ path = path.replace(/^\/+/, '');
+
+ // Concatenate the URL and the path.
+ return path ? `${url}/${path}` : url;
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 203df48..59eba9b 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -23,7 +23,6 @@ export async function fetcher(input: RequestInfo, init?: RequestIni
* @param target - 要轉換的字串
*/
export const capitalize = (target: string) => {
- if (typeof target !== 'string') return '';
return target.charAt(0).toUpperCase() + target.slice(1);
};
diff --git a/src/utils/supabase/admin.ts b/src/utils/supabase/admin.ts
new file mode 100644
index 0000000..b02c091
--- /dev/null
+++ b/src/utils/supabase/admin.ts
@@ -0,0 +1,245 @@
+// import { createClient } from '@supabase/supabase-js';
+// import type Stripe from 'stripe';
+// import type { Database, Tables, TablesInsert } from 'types_db';
+
+// import { toDateTime } from '@/utils/helpers';
+// import { stripe } from '@/utils/stripe/config';
+
+// type Product = Tables<'products'>;
+// type Price = Tables<'prices'>;
+
+// // Change to control trial period length
+// const TRIAL_PERIOD_DAYS = 0;
+
+// // Note: supabaseAdmin uses the SERVICE_ROLE_KEY which you must only use in a secure server-side context
+// // as it has admin privileges and overwrites RLS policies!
+// const supabaseAdmin = createClient(
+// process.env.NEXT_PUBLIC_SUPABASE_URL || '',
+// process.env.SUPABASE_SERVICE_ROLE_KEY || ''
+// );
+
+// const upsertProductRecord = async (product: Stripe.Product) => {
+// const productData: Product = {
+// id: product.id,
+// active: product.active,
+// name: product.name,
+// description: product.description ?? null,
+// image: product.images?.[0] ?? null,
+// metadata: product.metadata,
+// };
+
+// const { error: upsertError } = await supabaseAdmin.from('products').upsert([productData]);
+// if (upsertError) throw new Error(`Product insert/update failed: ${upsertError.message}`);
+// console.log(`Product inserted/updated: ${product.id}`);
+// };
+
+// const upsertPriceRecord = async (price: Stripe.Price, retryCount = 0, maxRetries = 3) => {
+// const priceData: Price = {
+// id: price.id,
+// product_id: typeof price.product === 'string' ? price.product : '',
+// active: price.active,
+// currency: price.currency,
+// type: price.type,
+// unit_amount: price.unit_amount ?? null,
+// interval: price.recurring?.interval ?? null,
+// interval_count: price.recurring?.interval_count ?? null,
+// trial_period_days: price.recurring?.trial_period_days ?? TRIAL_PERIOD_DAYS,
+// };
+
+// const { error: upsertError } = await supabaseAdmin.from('prices').upsert([priceData]);
+
+// if (upsertError?.message.includes('foreign key constraint')) {
+// if (retryCount < maxRetries) {
+// console.log(`Retry attempt ${retryCount + 1} for price ID: ${price.id}`);
+// await new Promise((resolve) => setTimeout(resolve, 2000));
+// await upsertPriceRecord(price, retryCount + 1, maxRetries);
+// } else {
+// throw new Error(
+// `Price insert/update failed after ${maxRetries} retries: ${upsertError.message}`
+// );
+// }
+// } else if (upsertError) {
+// throw new Error(`Price insert/update failed: ${upsertError.message}`);
+// } else {
+// console.log(`Price inserted/updated: ${price.id}`);
+// }
+// };
+
+// const deleteProductRecord = async (product: Stripe.Product) => {
+// const { error: deletionError } = await supabaseAdmin
+// .from('products')
+// .delete()
+// .eq('id', product.id);
+// if (deletionError) throw new Error(`Product deletion failed: ${deletionError.message}`);
+// console.log(`Product deleted: ${product.id}`);
+// };
+
+// const deletePriceRecord = async (price: Stripe.Price) => {
+// const { error: deletionError } = await supabaseAdmin.from('prices').delete().eq('id', price.id);
+// if (deletionError) throw new Error(`Price deletion failed: ${deletionError.message}`);
+// console.log(`Price deleted: ${price.id}`);
+// };
+
+// const upsertCustomerToSupabase = async (uuid: string, customerId: string) => {
+// const { error: upsertError } = await supabaseAdmin
+// .from('customers')
+// .upsert([{ id: uuid, stripe_customer_id: customerId }]);
+
+// if (upsertError)
+// throw new Error(`Supabase customer record creation failed: ${upsertError.message}`);
+
+// return customerId;
+// };
+
+// const createCustomerInStripe = async (uuid: string, email: string) => {
+// const customerData = { metadata: { supabaseUUID: uuid }, email: email };
+// const newCustomer = await stripe.customers.create(customerData);
+// if (!newCustomer) throw new Error('Stripe customer creation failed.');
+
+// return newCustomer.id;
+// };
+
+// const createOrRetrieveCustomer = async ({ email, uuid }: { email: string; uuid: string }) => {
+// // Check if the customer already exists in Supabase
+// const { data: existingSupabaseCustomer, error: queryError } = await supabaseAdmin
+// .from('customers')
+// .select('*')
+// .eq('id', uuid)
+// .maybeSingle();
+
+// if (queryError) {
+// throw new Error(`Supabase customer lookup failed: ${queryError.message}`);
+// }
+
+// // Retrieve the Stripe customer ID using the Supabase customer ID, with email fallback
+// let stripeCustomerId: string | undefined;
+// if (existingSupabaseCustomer?.stripe_customer_id) {
+// const existingStripeCustomer = await stripe.customers.retrieve(
+// existingSupabaseCustomer.stripe_customer_id
+// );
+// stripeCustomerId = existingStripeCustomer.id;
+// } else {
+// // If Stripe ID is missing from Supabase, try to retrieve Stripe customer ID by email
+// const stripeCustomers = await stripe.customers.list({ email: email });
+// stripeCustomerId = stripeCustomers.data.length > 0 ? stripeCustomers.data[0].id : undefined;
+// }
+
+// // If still no stripeCustomerId, create a new customer in Stripe
+// const stripeIdToInsert = stripeCustomerId
+// ? stripeCustomerId
+// : await createCustomerInStripe(uuid, email);
+// if (!stripeIdToInsert) throw new Error('Stripe customer creation failed.');
+
+// if (existingSupabaseCustomer && stripeCustomerId) {
+// // If Supabase has a record but doesn't match Stripe, update Supabase record
+// if (existingSupabaseCustomer.stripe_customer_id !== stripeCustomerId) {
+// const { error: updateError } = await supabaseAdmin
+// .from('customers')
+// .update({ stripe_customer_id: stripeCustomerId })
+// .eq('id', uuid);
+
+// if (updateError)
+// throw new Error(`Supabase customer record update failed: ${updateError.message}`);
+// console.warn(`Supabase customer record mismatched Stripe ID. Supabase record updated.`);
+// }
+// // If Supabase has a record and matches Stripe, return Stripe customer ID
+// return stripeCustomerId;
+// } else {
+// console.warn(`Supabase customer record was missing. A new record was created.`);
+
+// // If Supabase has no record, create a new record and return Stripe customer ID
+// const upsertedStripeCustomer = await upsertCustomerToSupabase(uuid, stripeIdToInsert);
+// if (!upsertedStripeCustomer) throw new Error('Supabase customer record creation failed.');
+
+// return upsertedStripeCustomer;
+// }
+// };
+
+// /**
+// * Copies the billing details from the payment method to the customer object.
+// */
+// const copyBillingDetailsToCustomer = async (uuid: string, payment_method: Stripe.PaymentMethod) => {
+// //Todo: check this assertion
+// const customer = payment_method.customer as string;
+// const { name, phone, address } = payment_method.billing_details;
+// if (!name || !phone || !address) return;
+
+// await stripe.customers.update(customer, { name, phone, address });
+// const { error: updateError } = await supabaseAdmin
+// .from('users')
+// .update({
+// billing_address: { ...address },
+// payment_method: { ...payment_method[payment_method.type] },
+// })
+// .eq('id', uuid);
+// if (updateError) throw new Error(`Customer update failed: ${updateError.message}`);
+// };
+
+// const manageSubscriptionStatusChange = async (
+// subscriptionId: string,
+// customerId: string,
+// createAction = false
+// ) => {
+// // Get customer's UUID from mapping table.
+// const { data: customerData, error: noCustomerError } = await supabaseAdmin
+// .from('customers')
+// .select('id')
+// .eq('stripe_customer_id', customerId)
+// .single();
+
+// if (noCustomerError) throw new Error(`Customer lookup failed: ${noCustomerError.message}`);
+
+// const { id: uuid } = customerData!;
+
+// const subscription = await stripe.subscriptions.retrieve(subscriptionId, {
+// expand: ['default_payment_method'],
+// });
+// // Upsert the latest status of the subscription object.
+// const subscriptionData: TablesInsert<'subscriptions'> = {
+// id: subscription.id,
+// user_id: uuid,
+// metadata: subscription.metadata,
+// status: subscription.status,
+// price_id: subscription.items.data[0].price.id,
+// //TODO check quantity on subscription
+
+// quantity: subscription.quantity,
+// cancel_at_period_end: subscription.cancel_at_period_end,
+// cancel_at: subscription.cancel_at ? toDateTime(subscription.cancel_at).toISOString() : null,
+// canceled_at: subscription.canceled_at
+// ? toDateTime(subscription.canceled_at).toISOString()
+// : null,
+// current_period_start: toDateTime(subscription.current_period_start).toISOString(),
+// current_period_end: toDateTime(subscription.current_period_end).toISOString(),
+// created: toDateTime(subscription.created).toISOString(),
+// ended_at: subscription.ended_at ? toDateTime(subscription.ended_at).toISOString() : null,
+// trial_start: subscription.trial_start
+// ? toDateTime(subscription.trial_start).toISOString()
+// : null,
+// trial_end: subscription.trial_end ? toDateTime(subscription.trial_end).toISOString() : null,
+// };
+
+// const { error: upsertError } = await supabaseAdmin
+// .from('subscriptions')
+// .upsert([subscriptionData]);
+// if (upsertError) throw new Error(`Subscription insert/update failed: ${upsertError.message}`);
+// console.log(`Inserted/updated subscription [${subscription.id}] for user [${uuid}]`);
+
+// // For a new subscription copy the billing details to the customer object.
+// // NOTE: This is a costly operation and should happen at the very end.
+// if (createAction && subscription.default_payment_method && uuid)
+// //@ts-ignore
+// await copyBillingDetailsToCustomer(
+// uuid,
+// subscription.default_payment_method as Stripe.PaymentMethod
+// );
+// };
+
+// export {
+// createOrRetrieveCustomer,
+// deletePriceRecord,
+// deleteProductRecord,
+// manageSubscriptionStatusChange,
+// upsertPriceRecord,
+// upsertProductRecord,
+// };
diff --git a/src/utils/supabase/client.ts b/src/utils/supabase/client.ts
new file mode 100644
index 0000000..1667951
--- /dev/null
+++ b/src/utils/supabase/client.ts
@@ -0,0 +1,11 @@
+import { createBrowserClient } from '@supabase/ssr';
+
+// import type { Database } from '@/types_db';
+
+// Define a function to create a Supabase client for client-side operations
+export const createClient = () =>
+ createBrowserClient(
+ // Pass Supabase URL and anonymous key from the environment to the client
+ process.env.NEXT_PUBLIC_SUPABASE_URL!,
+ process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+ );
diff --git a/src/utils/supabase/middleware.ts b/src/utils/supabase/middleware.ts
new file mode 100644
index 0000000..7717fdc
--- /dev/null
+++ b/src/utils/supabase/middleware.ts
@@ -0,0 +1,86 @@
+import type { CookieOptions } from '@supabase/ssr';
+import { createServerClient } from '@supabase/ssr';
+import type { NextRequest } from 'next/server';
+import { NextResponse } from 'next/server';
+
+export const createClient = (request: NextRequest) => {
+ // Create an unmodified response
+ let response = NextResponse.next({
+ request: {
+ headers: request.headers,
+ },
+ });
+
+ const supabase = createServerClient(
+ process.env.NEXT_PUBLIC_SUPABASE_URL!,
+ process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+ {
+ cookies: {
+ get(name: string) {
+ return request.cookies.get(name)?.value;
+ },
+ set(name: string, value: string, options: CookieOptions) {
+ // If the cookie is updated, update the cookies for the request and response
+ request.cookies.set({
+ name,
+ value,
+ ...options,
+ });
+ response = NextResponse.next({
+ request: {
+ headers: request.headers,
+ },
+ });
+ response.cookies.set({
+ name,
+ value,
+ ...options,
+ });
+ },
+ remove(name: string, options: CookieOptions) {
+ // If the cookie is removed, update the cookies for the request and response
+ request.cookies.set({
+ name,
+ value: '',
+ ...options,
+ });
+ response = NextResponse.next({
+ request: {
+ headers: request.headers,
+ },
+ });
+ response.cookies.set({
+ name,
+ value: '',
+ ...options,
+ });
+ },
+ },
+ }
+ );
+
+ return { supabase, response };
+};
+
+export const updateSession = async (request: NextRequest) => {
+ try {
+ // This `try/catch` block is only here for the interactive tutorial.
+ // Feel free to remove once you have Supabase connected.
+ const { supabase, response } = createClient(request);
+
+ // This will refresh session if expired - required for Server Components
+ // https://supabase.com/docs/guides/auth/server-side/nextjs
+ await supabase.auth.getUser();
+
+ return response;
+ } catch (e) {
+ // If you are here, a Supabase client could not be created!
+ // This is likely because you have not set up environment variables.
+ // Check out http://localhost:3000 for Next Steps.
+ return NextResponse.next({
+ request: {
+ headers: request.headers,
+ },
+ });
+ }
+};
diff --git a/src/utils/supabase/server.ts b/src/utils/supabase/server.ts
new file mode 100644
index 0000000..ed9d4c9
--- /dev/null
+++ b/src/utils/supabase/server.ts
@@ -0,0 +1,37 @@
+import type { CookieOptions } from '@supabase/ssr';
+import { createServerClient } from '@supabase/ssr';
+import { cookies } from 'next/headers';
+
+export function createClient() {
+ const cookieStore = cookies();
+
+ return createServerClient(
+ process.env.NEXT_PUBLIC_SUPABASE_URL!,
+ process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+ {
+ cookies: {
+ get(name: string) {
+ return cookieStore.get(name)?.value;
+ },
+ set(name: string, value: string, options: CookieOptions) {
+ try {
+ cookieStore.set({ name, value, ...options });
+ } catch (error) {
+ // The `set` method was called from a Server Component.
+ // This can be ignored if you have middleware refreshing
+ // user sessions.
+ }
+ },
+ remove(name: string, options: CookieOptions) {
+ try {
+ cookieStore.set({ name, value: '', ...options });
+ } catch (error) {
+ // The `delete` method was called from a Server Component.
+ // This can be ignored if you have middleware refreshing
+ // user sessions.
+ }
+ },
+ },
+ }
+ );
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index f44c0fc..be24c2b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -11,7 +11,50 @@ const config: Config = {
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
mode: 'jit',
darkMode: ['class'],
+
theme: {
+ colors: {
+ inherit: 'inherit',
+ current: 'currentColor',
+ transparent: 'transparent',
+ black: '#131417',
+ white: '#ffffff',
+ border: 'hsl(var(--border))',
+ input: 'hsl(var(--input))',
+ ring: 'hsl(var(--ring))',
+ background: 'hsl(var(--background))',
+ foreground: 'hsl(var(--foreground))',
+ primary: {
+ DEFAULT: 'hsl(var(--primary))',
+ foreground: 'hsl(var(--primary-foreground))',
+ },
+ secondary: {
+ DEFAULT: 'hsl(var(--secondary))',
+ foreground: 'hsl(var(--secondary-foreground))',
+ },
+ destructive: {
+ DEFAULT: 'hsl(var(--destructive))',
+ foreground: 'hsl(var(--destructive-foreground))',
+ },
+ muted: {
+ DEFAULT: 'hsl(var(--muted))',
+ foreground: 'hsl(var(--muted-foreground))',
+ },
+ accent: {
+ DEFAULT: 'hsl(var(--accent))',
+ foreground: 'hsl(var(--accent-foreground))',
+ },
+ popover: {
+ DEFAULT: 'hsl(var(--popover))',
+ foreground: 'hsl(var(--popover-foreground))',
+ },
+ card: {
+ DEFAULT: 'hsl(var(--card))',
+ foreground: 'hsl(var(--card-foreground))',
+ },
+ },
+ screens,
+ fontSize,
extend: {
fontFamily: {
mono: ['Consolas', ...fontFamily.mono],
@@ -21,43 +64,6 @@ const config: Config = {
padding: 'var(--gw)',
screens: { DEFAULT: '100%' },
},
- colors: {
- black: '#131417',
- white: '#ffffff',
- border: 'hsl(var(--border))',
- input: 'hsl(var(--input))',
- ring: 'hsl(var(--ring))',
- background: 'hsl(var(--background))',
- foreground: 'hsl(var(--foreground))',
- primary: {
- DEFAULT: 'hsl(var(--primary))',
- foreground: 'hsl(var(--primary-foreground))',
- },
- secondary: {
- DEFAULT: 'hsl(var(--secondary))',
- foreground: 'hsl(var(--secondary-foreground))',
- },
- destructive: {
- DEFAULT: 'hsl(var(--destructive))',
- foreground: 'hsl(var(--destructive-foreground))',
- },
- muted: {
- DEFAULT: 'hsl(var(--muted))',
- foreground: 'hsl(var(--muted-foreground))',
- },
- accent: {
- DEFAULT: 'hsl(var(--accent))',
- foreground: 'hsl(var(--accent-foreground))',
- },
- popover: {
- DEFAULT: 'hsl(var(--popover))',
- foreground: 'hsl(var(--popover-foreground))',
- },
- card: {
- DEFAULT: 'hsl(var(--card))',
- foreground: 'hsl(var(--card-foreground))',
- },
- },
borderRadius: {
half: '50%',
inherit: 'inherit',
@@ -99,8 +105,6 @@ const config: Config = {
'4/5': '80%',
...settings.extendedLength,
},
- screens,
- fontSize,
minHeight: spaces.height,
height: spaces.height,
minWidth: spaces.width,
@@ -114,6 +118,10 @@ const config: Config = {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
+ transitionProperty: {
+ height: 'height',
+ width: 'width',
+ },
keyframes: {
'accordion-down': {
from: { height: '0' },
@@ -137,6 +145,15 @@ const config: Config = {
addVariant('hocus', ['&:hover', '&:focus']);
addVariant('inverted-colors', '@media (inverted-colors: inverted)');
}),
+ plugin(({ addUtilities }) => {
+ addUtilities({
+ '.no-scrollbar': {
+ 'scrollbar-width': 'none',
+ '-ms-overflow-style': 'none',
+ '-webkit-scrollbar': 'none',
+ },
+ });
+ }),
plugin(({ addUtilities, matchUtilities }) => {
addUtilities({
'.perspective-none': {