87 | >(({ className, ...props }, ref) => (
88 | | [role=checkbox]]:translate-y-[2px]",
92 | className
93 | )}
94 | {...props}
95 | />
96 | ))
97 | TableCell.displayName = "TableCell"
98 |
99 | const TableCaption = React.forwardRef<
100 | HTMLTableCaptionElement,
101 | React.HTMLAttributes
102 | >(({ className, ...props }, ref) => (
103 |
108 | ))
109 | TableCaption.displayName = "TableCaption"
110 |
111 | export {
112 | Table,
113 | TableHeader,
114 | TableBody,
115 | TableFooter,
116 | TableHead,
117 | TableRow,
118 | TableCell,
119 | TableCaption,
120 | }
121 |
--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as TabsPrimitive from "@radix-ui/react-tabs"
3 |
4 | import { cn } from "@/lib/utils"
5 |
6 | const Tabs = TabsPrimitive.Root
7 |
8 | const TabsList = React.forwardRef<
9 | React.ElementRef,
10 | React.ComponentPropsWithoutRef
11 | >(({ className, ...props }, ref) => (
12 |
20 | ))
21 | TabsList.displayName = TabsPrimitive.List.displayName
22 |
23 | const TabsTrigger = React.forwardRef<
24 | React.ElementRef,
25 | React.ComponentPropsWithoutRef
26 | >(({ className, ...props }, ref) => (
27 |
35 | ))
36 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
37 |
38 | const TabsContent = React.forwardRef<
39 | React.ElementRef,
40 | React.ComponentPropsWithoutRef
41 | >(({ className, ...props }, ref) => (
42 |
50 | ))
51 | TabsContent.displayName = TabsPrimitive.Content.displayName
52 |
53 | export { Tabs, TabsList, TabsTrigger, TabsContent }
54 |
--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | export interface TextareaProps
6 | extends React.TextareaHTMLAttributes {}
7 |
8 | const Textarea = React.forwardRef(
9 | ({ className, ...props }, ref) => {
10 | return (
11 |
19 | )
20 | }
21 | )
22 | Textarea.displayName = "Textarea"
23 |
24 | export { Textarea }
25 |
--------------------------------------------------------------------------------
/src/components/ui/toast.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import { Cross2Icon } from "@radix-ui/react-icons"
3 | import * as ToastPrimitives from "@radix-ui/react-toast"
4 | import { cva, type VariantProps } from "class-variance-authority"
5 |
6 | import { cn } from "@/lib/utils"
7 |
8 | const ToastProvider = ToastPrimitives.Provider
9 |
10 | const ToastViewport = React.forwardRef<
11 | React.ElementRef,
12 | React.ComponentPropsWithoutRef
13 | >(({ className, ...props }, ref) => (
14 |
22 | ))
23 | ToastViewport.displayName = ToastPrimitives.Viewport.displayName
24 |
25 | const toastVariants = cva(
26 | "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
27 | {
28 | variants: {
29 | variant: {
30 | default: "border bg-background text-foreground",
31 | destructive:
32 | "destructive group border-destructive bg-destructive text-destructive-foreground",
33 | },
34 | },
35 | defaultVariants: {
36 | variant: "default",
37 | },
38 | }
39 | )
40 |
41 | const Toast = React.forwardRef<
42 | React.ElementRef,
43 | React.ComponentPropsWithoutRef &
44 | VariantProps
45 | >(({ className, variant, ...props }, ref) => {
46 | return (
47 |
52 | )
53 | })
54 | Toast.displayName = ToastPrimitives.Root.displayName
55 |
56 | const ToastAction = React.forwardRef<
57 | React.ElementRef,
58 | React.ComponentPropsWithoutRef
59 | >(({ className, ...props }, ref) => (
60 |
68 | ))
69 | ToastAction.displayName = ToastPrimitives.Action.displayName
70 |
71 | const ToastClose = React.forwardRef<
72 | React.ElementRef,
73 | React.ComponentPropsWithoutRef
74 | >(({ className, ...props }, ref) => (
75 |
84 |
85 |
86 | ))
87 | ToastClose.displayName = ToastPrimitives.Close.displayName
88 |
89 | const ToastTitle = React.forwardRef<
90 | React.ElementRef,
91 | React.ComponentPropsWithoutRef
92 | >(({ className, ...props }, ref) => (
93 |
98 | ))
99 | ToastTitle.displayName = ToastPrimitives.Title.displayName
100 |
101 | const ToastDescription = React.forwardRef<
102 | React.ElementRef,
103 | React.ComponentPropsWithoutRef
104 | >(({ className, ...props }, ref) => (
105 |
110 | ))
111 | ToastDescription.displayName = ToastPrimitives.Description.displayName
112 |
113 | type ToastProps = React.ComponentPropsWithoutRef
114 |
115 | type ToastActionElement = React.ReactElement
116 |
117 | export {
118 | type ToastProps,
119 | type ToastActionElement,
120 | ToastProvider,
121 | ToastViewport,
122 | Toast,
123 | ToastTitle,
124 | ToastDescription,
125 | ToastClose,
126 | ToastAction,
127 | }
128 |
--------------------------------------------------------------------------------
/src/components/ui/toaster.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Toast,
3 | ToastClose,
4 | ToastDescription,
5 | ToastProvider,
6 | ToastTitle,
7 | ToastViewport,
8 | } from "@/components/ui/toast"
9 | import { useToast } from "@/components/ui/use-toast"
10 |
11 | export function Toaster() {
12 | const { toasts } = useToast()
13 |
14 | return (
15 |
16 | {toasts.map(function ({ id, title, description, action, ...props }) {
17 | return (
18 |
19 |
20 | {title && {title}}
21 | {description && (
22 | {description}
23 | )}
24 |
25 | {action}
26 |
27 |
28 | )
29 | })}
30 |
31 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
3 |
4 | import { cn } from "@/lib/utils"
5 |
6 | const TooltipProvider = TooltipPrimitive.Provider
7 |
8 | const Tooltip = TooltipPrimitive.Root
9 |
10 | const TooltipTrigger = TooltipPrimitive.Trigger
11 |
12 | const TooltipContent = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, sideOffset = 4, ...props }, ref) => (
16 |
25 | ))
26 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
27 |
28 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
29 |
--------------------------------------------------------------------------------
/src/components/ui/use-toast.ts:
--------------------------------------------------------------------------------
1 | // Inspired by react-hot-toast library
2 | import * as React from "react"
3 |
4 | import type {
5 | ToastActionElement,
6 | ToastProps,
7 | } from "@/components/ui/toast"
8 |
9 | const TOAST_LIMIT = 1
10 | const TOAST_REMOVE_DELAY = 1000000
11 |
12 | type ToasterToast = ToastProps & {
13 | id: string
14 | title?: React.ReactNode
15 | description?: React.ReactNode
16 | action?: ToastActionElement
17 | }
18 |
19 | const actionTypes = {
20 | ADD_TOAST: "ADD_TOAST",
21 | UPDATE_TOAST: "UPDATE_TOAST",
22 | DISMISS_TOAST: "DISMISS_TOAST",
23 | REMOVE_TOAST: "REMOVE_TOAST",
24 | } as const
25 |
26 | let count = 0
27 |
28 | function genId() {
29 | count = (count + 1) % Number.MAX_SAFE_INTEGER
30 | return count.toString()
31 | }
32 |
33 | type ActionType = typeof actionTypes
34 |
35 | type Action =
36 | | {
37 | type: ActionType["ADD_TOAST"]
38 | toast: ToasterToast
39 | }
40 | | {
41 | type: ActionType["UPDATE_TOAST"]
42 | toast: Partial
43 | }
44 | | {
45 | type: ActionType["DISMISS_TOAST"]
46 | toastId?: ToasterToast["id"]
47 | }
48 | | {
49 | type: ActionType["REMOVE_TOAST"]
50 | toastId?: ToasterToast["id"]
51 | }
52 |
53 | interface State {
54 | toasts: ToasterToast[]
55 | }
56 |
57 | const toastTimeouts = new Map>()
58 |
59 | const addToRemoveQueue = (toastId: string) => {
60 | if (toastTimeouts.has(toastId)) {
61 | return
62 | }
63 |
64 | const timeout = setTimeout(() => {
65 | toastTimeouts.delete(toastId)
66 | dispatch({
67 | type: "REMOVE_TOAST",
68 | toastId: toastId,
69 | })
70 | }, TOAST_REMOVE_DELAY)
71 |
72 | toastTimeouts.set(toastId, timeout)
73 | }
74 |
75 | export const reducer = (state: State, action: Action): State => {
76 | switch (action.type) {
77 | case "ADD_TOAST":
78 | return {
79 | ...state,
80 | toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
81 | }
82 |
83 | case "UPDATE_TOAST":
84 | return {
85 | ...state,
86 | toasts: state.toasts.map((t) =>
87 | t.id === action.toast.id ? { ...t, ...action.toast } : t
88 | ),
89 | }
90 |
91 | case "DISMISS_TOAST": {
92 | const { toastId } = action
93 |
94 | // ! Side effects ! - This could be extracted into a dismissToast() action,
95 | // but I'll keep it here for simplicity
96 | if (toastId) {
97 | addToRemoveQueue(toastId)
98 | } else {
99 | state.toasts.forEach((toast) => {
100 | addToRemoveQueue(toast.id)
101 | })
102 | }
103 |
104 | return {
105 | ...state,
106 | toasts: state.toasts.map((t) =>
107 | t.id === toastId || toastId === undefined
108 | ? {
109 | ...t,
110 | open: false,
111 | }
112 | : t
113 | ),
114 | }
115 | }
116 | case "REMOVE_TOAST":
117 | if (action.toastId === undefined) {
118 | return {
119 | ...state,
120 | toasts: [],
121 | }
122 | }
123 | return {
124 | ...state,
125 | toasts: state.toasts.filter((t) => t.id !== action.toastId),
126 | }
127 | }
128 | }
129 |
130 | const listeners: Array<(state: State) => void> = []
131 |
132 | let memoryState: State = { toasts: [] }
133 |
134 | function dispatch(action: Action) {
135 | memoryState = reducer(memoryState, action)
136 | listeners.forEach((listener) => {
137 | listener(memoryState)
138 | })
139 | }
140 |
141 | type Toast = Omit
142 |
143 | function toast({ ...props }: Toast) {
144 | const id = genId()
145 |
146 | const update = (props: ToasterToast) =>
147 | dispatch({
148 | type: "UPDATE_TOAST",
149 | toast: { ...props, id },
150 | })
151 | const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
152 |
153 | dispatch({
154 | type: "ADD_TOAST",
155 | toast: {
156 | ...props,
157 | id,
158 | open: true,
159 | onOpenChange: (open) => {
160 | if (!open) dismiss()
161 | },
162 | },
163 | })
164 |
165 | return {
166 | id: id,
167 | dismiss,
168 | update,
169 | }
170 | }
171 |
172 | function useToast() {
173 | const [state, setState] = React.useState(memoryState)
174 |
175 | React.useEffect(() => {
176 | listeners.push(setState)
177 | return () => {
178 | const index = listeners.indexOf(setState)
179 | if (index > -1) {
180 | listeners.splice(index, 1)
181 | }
182 | }
183 | }, [state])
184 |
185 | return {
186 | ...state,
187 | toast,
188 | dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
189 | }
190 | }
191 |
192 | export { useToast, toast }
193 |
--------------------------------------------------------------------------------
/src/components/user-nav.tsx:
--------------------------------------------------------------------------------
1 | import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
2 | import { Button } from '@/components/custom/button'
3 | import {
4 | DropdownMenu,
5 | DropdownMenuContent,
6 | DropdownMenuGroup,
7 | DropdownMenuItem,
8 | DropdownMenuLabel,
9 | DropdownMenuSeparator,
10 | DropdownMenuShortcut,
11 | DropdownMenuTrigger,
12 | } from '@/components/ui/dropdown-menu'
13 | import { useNavigate } from 'react-router-dom'
14 |
15 | export function UserNav() {
16 | const navigate = useNavigate()
17 | const handleLogout = () => {
18 | sessionStorage.removeItem('token')
19 | navigate('/sign-in')
20 | }
21 | return (
22 |
23 |
24 |
30 |
31 |
32 |
33 |
34 | test
35 |
36 | test@gmail.com
37 |
38 |
54 |
55 |
56 |
57 |
58 |
59 |
65 |
66 | App Integrations
67 |
68 |
69 | Here's a list of your apps for the integration!
70 |
71 |
73 |
74 | setSearchTerm(e.target.value)}
79 | />
80 |
90 |
91 |
92 |
113 |
116 | {filteredApps.map((app) => (
117 | -
121 |
122 |
125 | {app.logo}
126 |
127 |
134 |
136 | {app.name}
137 | {app.desc}
138 |
140 | ))}
141 |
142 |
143 |
144 | )
145 | }
146 |
--------------------------------------------------------------------------------
/src/pages/auth/components/forgot-form.tsx:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes, useState } from 'react'
2 | import { cn } from '@/lib/utils'
3 | import { zodResolver } from '@hookform/resolvers/zod'
4 | import { useForm } from 'react-hook-form'
5 | import { z } from 'zod'
6 | import { Button } from '@/components/custom/button'
7 | import {
8 | Form,
9 | FormControl,
10 | FormField,
11 | FormItem,
12 | FormLabel,
13 | FormMessage,
14 | } from '@/components/ui/form'
15 | import { Input } from '@/components/ui/input'
16 |
17 | interface ForgotFormProps extends HTMLAttributes {}
18 |
19 | const formSchema = z.object({
20 | email: z
21 | .string()
22 | .min(1, { message: 'Please enter your email' })
23 | .email({ message: 'Invalid email address' }),
24 | })
25 |
26 | export function ForgotForm({ className, ...props }: ForgotFormProps) {
27 | const [isLoading, setIsLoading] = useState(false)
28 |
29 | const form = useForm>({
30 | resolver: zodResolver(formSchema),
31 | defaultValues: { email: '' },
32 | })
33 |
34 | function onSubmit(data: z.infer) {
35 | setIsLoading(true)
36 | console.log(data)
37 |
38 | setTimeout(() => {
39 | setIsLoading(false)
40 | }, 3000)
41 | }
42 |
43 | return (
44 |
68 | )
69 | }
70 |
--------------------------------------------------------------------------------
/src/pages/auth/components/otp-form.tsx:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes, useState } from 'react'
2 | import { cn } from '@/lib/utils'
3 | import { zodResolver } from '@hookform/resolvers/zod'
4 | import { useForm } from 'react-hook-form'
5 | import { z } from 'zod'
6 | import { Button } from '@/components/custom/button'
7 | import {
8 | Form,
9 | FormControl,
10 | FormField,
11 | FormItem,
12 | FormMessage,
13 | } from '@/components/ui/form'
14 | import { Input } from '@/components/ui/input'
15 | import { PinInput, PinInputField } from '@/components/custom/pin-input'
16 | import { Separator } from '@/components/ui/separator'
17 |
18 | interface OtpFormProps extends HTMLAttributes {}
19 |
20 | const formSchema = z.object({
21 | otp: z.string().min(1, { message: 'Please enter your otp code.' }),
22 | })
23 |
24 | export function OtpForm({ className, ...props }: OtpFormProps) {
25 | const [isLoading, setIsLoading] = useState(false)
26 | const [disabledBtn, setDisabledBtn] = useState(true)
27 |
28 | const form = useForm>({
29 | resolver: zodResolver(formSchema),
30 | defaultValues: { otp: '' },
31 | })
32 |
33 | function onSubmit(data: z.infer) {
34 | setIsLoading(true)
35 | console.log({ data })
36 |
37 | setTimeout(() => {
38 | form.reset()
39 | setIsLoading(false)
40 | }, 2000)
41 | }
42 |
43 | return (
44 |
84 | )
85 | }
86 |
--------------------------------------------------------------------------------
/src/pages/auth/components/sign-up-form.tsx:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes, useState } from 'react'
2 | import { useForm } from 'react-hook-form'
3 | import { zodResolver } from '@hookform/resolvers/zod'
4 | import { IconBrandFacebook, IconBrandGithub } from '@tabler/icons-react'
5 | import { z } from 'zod'
6 | import {
7 | Form,
8 | FormControl,
9 | FormField,
10 | FormItem,
11 | FormLabel,
12 | FormMessage,
13 | } from '@/components/ui/form'
14 | import { Input } from '@/components/ui/input'
15 | import { Button } from '@/components/custom/button'
16 | import { PasswordInput } from '@/components/custom/password-input'
17 | import { cn } from '@/lib/utils'
18 |
19 | interface SignUpFormProps extends HTMLAttributes {}
20 |
21 | const formSchema = z
22 | .object({
23 | email: z
24 | .string()
25 | .min(1, { message: 'Please enter your email' })
26 | .email({ message: 'Invalid email address' }),
27 | password: z
28 | .string()
29 | .min(1, {
30 | message: 'Please enter your password',
31 | })
32 | .min(7, {
33 | message: 'Password must be at least 7 characters long',
34 | }),
35 | confirmPassword: z.string(),
36 | })
37 | .refine((data) => data.password === data.confirmPassword, {
38 | message: "Passwords don't match.",
39 | path: ['confirmPassword'],
40 | })
41 |
42 | export function SignUpForm({ className, ...props }: SignUpFormProps) {
43 | const [isLoading, setIsLoading] = useState(false)
44 |
45 | const form = useForm>({
46 | resolver: zodResolver(formSchema),
47 | defaultValues: {
48 | email: '',
49 | password: '',
50 | confirmPassword: '',
51 | },
52 | })
53 |
54 | function onSubmit(data: z.infer) {
55 | setIsLoading(true)
56 | console.log(data)
57 |
58 | setTimeout(() => {
59 | setIsLoading(false)
60 | }, 3000)
61 | }
62 |
63 | return (
64 |
114 | )
115 | }
116 |
--------------------------------------------------------------------------------
/src/pages/auth/components/user-auth-form.tsx:
--------------------------------------------------------------------------------
1 | import { HTMLAttributes, useState } from 'react'
2 | import { useForm } from 'react-hook-form'
3 | import { Link } from 'react-router-dom'
4 | import { z } from 'zod'
5 | import { zodResolver } from '@hookform/resolvers/zod'
6 | import { IconBrandFacebook, IconBrandGithub } from '@tabler/icons-react'
7 | import {
8 | Form,
9 | FormControl,
10 | FormField,
11 | FormItem,
12 | FormLabel,
13 | FormMessage,
14 | } from '@/components/ui/form'
15 | import { Input } from '@/components/ui/input'
16 | import { Button } from '@/components/custom/button'
17 | import { PasswordInput } from '@/components/custom/password-input'
18 | import { cn } from '@/lib/utils'
19 | import { useNavigate } from 'react-router-dom'
20 | import { toast } from '@/components/ui/use-toast'
21 | import { _login } from '@/redux/actions/signIn'
22 | import { useDispatch } from 'react-redux'
23 |
24 | interface UserAuthFormProps extends HTMLAttributes {}
25 |
26 | const formSchema = z.object({
27 | email: z
28 | .string()
29 | .min(1, { message: 'Please enter your email' })
30 | .email({ message: 'Invalid email address' }),
31 | password: z
32 | .string()
33 | .min(1, {
34 | message: 'Please enter your password',
35 | })
36 | .min(7, {
37 | message: 'Password must be at least 7 characters long',
38 | }),
39 | })
40 |
41 | export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
42 | const dispatch = useDispatch();
43 | const [isLoading, setIsLoading] = useState(false)
44 | const navigate = useNavigate();
45 | const form = useForm>({
46 | resolver: zodResolver(formSchema),
47 | defaultValues: {
48 | email: '',
49 | password: '',
50 | },
51 | })
52 |
53 | async function onSubmit(data: z.infer) {
54 | setIsLoading(true)
55 | const request = {...data}
56 | const {payload} = await dispatch(_login({request, navigate}))
57 | if(payload && payload?.data && payload?.data?.token) {
58 | setIsLoading(false)
59 | sessionStorage.setItem('token', payload?.data?.token)
60 | navigate('/dashboard')
61 | toast({title: 'Login Successful'})
62 | }
63 | else {
64 | setIsLoading(false)
65 | toast({variant: "destructive", title: payload?.data?.message || 'Login unsuccessful'})
66 | }
67 | }
68 |
69 | return (
70 |
116 | )
117 | }
118 |
--------------------------------------------------------------------------------
/src/pages/auth/forgot-password.tsx:
--------------------------------------------------------------------------------
1 | import { Card } from '@/components/ui/card'
2 | import { ForgotForm } from './components/forgot-form'
3 | import { Link } from 'react-router-dom'
4 |
5 | export default function ForgotPassword() {
6 | return (
7 | <>
8 |
9 |
10 |
11 |
23 | Shadcn Admin
24 |
25 |
26 |
27 |
28 | Forgot Password
29 |
30 |
31 | Enter your registered email and
we will send you a link
32 | to reset your password.
33 |
34 |
37 | Don't have an account?{' '}
38 |
42 | Sign up
43 |
44 | .
45 |
46 |
47 |
48 |
9 |
10 |
11 |
23 | Shadcn Admin
24 |
25 |
26 |
27 |
28 | Two-factor Authentication
29 |
30 |
31 | Please enter the authentication code.
We have sent the
32 | authentication code to your email.
33 |
34 |
37 | Haven't received it?{' '}
38 |
42 | Resend a new code.
43 |
44 | .
45 |
46 |
47 |
48 |
8 |
9 |
10 |
22 | Shadcn Admin
23 |
24 |
25 |
26 | Login
27 |
28 | Enter your email and password below
29 | to log into your account
30 |
31 |
34 | By clicking login, you agree to our{' '}
35 |
39 | Terms of Service
40 | {' '}
41 | and{' '}
42 |
46 | Privacy Policy
47 |
48 | .
49 |
50 |
51 |
52 |
8 |
9 |
10 |
11 |
23 | Template
24 |
25 |
26 | 
33 |
34 |
35 |
36 |
37 |
38 | Login
39 |
40 | Enter your email and password below
41 | to log into your account
42 |
43 |
44 |
45 |
46 | By clicking login, you agree to our{' '}
47 |
51 | Terms of Service
52 | {' '}
53 | and{' '}
54 |
58 | Privacy Policy
59 |
60 | .
61 |
62 |
63 |
64 |
9 |
10 |
11 |
23 | Shadcn Admin
24 |
25 |
26 |
27 |
28 | Create an account
29 |
30 |
31 | Enter your email and password to create an account.
32 | Already have an account?{' '}
33 |
37 | Sign In
38 |
39 |
40 |
43 | By creating an account, you agree to our{' '}
44 |
48 | Terms of Service
49 | {' '}
50 | and{' '}
51 |
55 | Privacy Policy
56 |
57 | .
58 |
59 |
60 |
61 |
6 |
7 |
8 |
9 | OM
10 |
11 |
12 | Olivia Martin
13 |
14 | olivia.martin@email.com
15 |
16 |
17 | +$1,999.00
18 |
19 |
20 |
21 |
22 | JL
23 |
24 |
25 | Jackson Lee
26 | jackson.lee@email.com
27 |
28 | +$39.00
29 |
30 |
31 |
32 |
33 | IN
34 |
35 |
36 | Isabella Nguyen
37 |
38 | isabella.nguyen@email.com
39 |
40 |
41 | +$299.00
42 |
43 |
44 |
45 |
46 | WK
47 |
48 |
49 | William Kim
50 | will@email.com
51 |
52 | +$99.00
53 |
54 |
55 |
56 |
57 | SD
58 |
59 |
60 | Sofia Davis
61 | sofia.davis@email.com
62 |
63 | +$39.00
64 |
65 |
16 |
17 | {!minimal && (
18 | 500
19 | )}
20 | Oops! Something went wrong {`:')`}
21 |
22 | We apologize for the inconvenience.
Please try again later.
23 |
24 | {!minimal && (
25 |
26 |
29 |
30 |
31 | )}
32 |
33 |
6 |
7 | 503
8 | Website is under maintenance!
9 |
10 | The site is not available at the moment.
11 | We'll be back online shortly.
12 |
13 |
14 |
15 |
16 |
17 |
8 |
9 | 404
10 | Oops! Page Not Found!
11 |
12 | It seems like the page you're looking for
13 | does not exist or might have been removed.
14 |
15 |
16 |
19 |
20 |
21 |
22 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | Extra Components
52 |
53 |
54 | Breadcrumbs
55 | }>
56 | {items}
57 |
58 | {items}
59 |
60 |
61 |
62 | Pin Input
63 |
64 |
65 | Uncontrolled
66 |
67 |
68 | Preview
69 | Code
70 |
71 |
72 |
73 | console.log('completed', str)}
76 | autoFocus
77 | >
78 |
79 |
80 |
81 |
82 |
83 |
84 |
111 |
112 |
113 | Controlled
114 |
115 |
116 | Preview
117 | Code
118 |
119 |
120 |
121 | console.log('completed', str)}
126 | >
127 | {Array.from({ length: 4 }, (_, i) => (
128 |
129 | ))}
130 |
131 |
161 |
162 |
7 |
8 | Account
9 |
10 | Update your account settings. Set your preferred language and
11 | timezone.
12 |
13 |
14 |
15 |
16 |
7 |
8 | Appearance
9 |
10 | Customize the appearance of the app. Automatically switch between day
11 | and night themes.
12 |
13 |
14 |
15 |
16 |
38 |
53 |
56 |
80 |
81 |
82 | )
83 | }
84 |
--------------------------------------------------------------------------------
/src/pages/settings/display/display-form.tsx:
--------------------------------------------------------------------------------
1 | import { zodResolver } from '@hookform/resolvers/zod'
2 | import { useForm } from 'react-hook-form'
3 | import { z } from 'zod'
4 |
5 | import { Button } from '@/components/custom/button'
6 | import { Checkbox } from '@/components/ui/checkbox'
7 | import {
8 | Form,
9 | FormControl,
10 | FormDescription,
11 | FormField,
12 | FormItem,
13 | FormLabel,
14 | FormMessage,
15 | } from '@/components/ui/form'
16 | import { toast } from '@/components/ui/use-toast'
17 |
18 | const items = [
19 | {
20 | id: 'recents',
21 | label: 'Recents',
22 | },
23 | {
24 | id: 'home',
25 | label: 'Home',
26 | },
27 | {
28 | id: 'applications',
29 | label: 'Applications',
30 | },
31 | {
32 | id: 'desktop',
33 | label: 'Desktop',
34 | },
35 | {
36 | id: 'downloads',
37 | label: 'Downloads',
38 | },
39 | {
40 | id: 'documents',
41 | label: 'Documents',
42 | },
43 | ] as const
44 |
45 | const displayFormSchema = z.object({
46 | items: z.array(z.string()).refine((value) => value.some((item) => item), {
47 | message: 'You have to select at least one item.',
48 | }),
49 | })
50 |
51 | type DisplayFormValues = z.infer
52 |
53 | // This can come from your database or API.
54 | const defaultValues: Partial = {
55 | items: ['recents', 'home'],
56 | }
57 |
58 | export function DisplayForm() {
59 | const form = useForm({
60 | resolver: zodResolver(displayFormSchema),
61 | defaultValues,
62 | })
63 |
64 | function onSubmit(data: DisplayFormValues) {
65 | toast({
66 | title: 'You submitted the following values:',
67 | description: (
68 |
69 | {JSON.stringify(data, null, 2)}
70 |
71 | ),
72 | })
73 | }
74 |
75 | return (
76 |
128 |
129 | )
130 | }
131 |
--------------------------------------------------------------------------------
/src/pages/settings/display/index.tsx:
--------------------------------------------------------------------------------
1 | import { Separator } from '@/components/ui/separator'
2 | import { DisplayForm } from './display-form'
3 |
4 | export default function SettingsDisplay() {
5 | return (
6 |
7 |
8 | Display
9 |
10 | Turn items on or off to control what's displayed in the app.
11 |
12 |
13 |
14 |
15 | Error Example
4 | }
5 |
--------------------------------------------------------------------------------
/src/pages/settings/index.tsx:
--------------------------------------------------------------------------------
1 | import { Outlet } from 'react-router-dom'
2 | import {
3 | IconBrowserCheck,
4 | IconExclamationCircle,
5 | IconNotification,
6 | IconPalette,
7 | IconTool,
8 | IconUser,
9 | } from '@tabler/icons-react'
10 | import { Search } from '@/components/search'
11 | import { Separator } from '@/components/ui/separator'
12 | import ThemeSwitch from '@/components/theme-switch'
13 | import { UserNav } from '@/components/user-nav'
14 | import { Layout, LayoutBody, LayoutHeader } from '@/components/custom/layout'
15 | import SidebarNav from './components/sidebar-nav'
16 |
17 | export default function Settings() {
18 | return (
19 |
20 | {/* ===== Top Heading ===== */}
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | Settings
33 |
34 |
35 | Manage your account settings and set e-mail preferences.
36 |
37 |
7 |
8 | Notifications
9 |
10 | Configure how you receive notifications.
11 |
12 |
13 |
14 |
15 |
7 |
8 | Profile
9 |
10 | This is how others will see you on the site.
11 |
12 |
13 |
14 |
15 |
79 | {JSON.stringify(data, null, 2)}
80 |
81 | ),
82 | })
83 | }
84 |
85 | return (
86 |
186 |
187 | )
188 | }
189 |
--------------------------------------------------------------------------------
/src/pages/tasks/components/columns.tsx:
--------------------------------------------------------------------------------
1 | import { ColumnDef } from '@tanstack/react-table'
2 |
3 | import { Badge } from '@/components/ui/badge'
4 | import { Checkbox } from '@/components/ui/checkbox'
5 | import { DataTableColumnHeader } from './data-table-column-header'
6 | import { DataTableRowActions } from './data-table-row-actions'
7 |
8 | import { labels, priorities, statuses } from '../data/data'
9 | import { Task } from '../data/schema'
10 |
11 | export const columns: ColumnDef[] = [
12 | {
13 | id: 'select',
14 | header: ({ table }) => (
15 | table.toggleAllPageRowsSelected(!!value)}
21 | aria-label='Select all'
22 | className='translate-y-[2px]'
23 | />
24 | ),
25 | cell: ({ row }) => (
26 | row.toggleSelected(!!value)}
29 | aria-label='Select row'
30 | className='translate-y-[2px]'
31 | />
32 | ),
33 | enableSorting: false,
34 | enableHiding: false,
35 | },
36 | {
37 | accessorKey: 'id',
38 | header: ({ column }) => (
39 |
40 | ),
41 | cell: ({ row }) => {row.getValue('id')} ,
42 | enableSorting: false,
43 | enableHiding: false,
44 | },
45 | {
46 | accessorKey: 'title',
47 | header: ({ column }) => (
48 |
49 | ),
50 | cell: ({ row }) => {
51 | const label = labels.find((label) => label.value === row.original.label)
52 |
53 | return (
54 |
55 | {label && {label.label}}
56 |
57 | {row.getValue('title')}
58 |
59 |
60 | )
61 | },
62 | },
63 | {
64 | accessorKey: 'status',
65 | header: ({ column }) => (
66 |
67 | ),
68 | cell: ({ row }) => {
69 | const status = statuses.find(
70 | (status) => status.value === row.getValue('status')
71 | )
72 |
73 | if (!status) {
74 | return null
75 | }
76 |
77 | return (
78 |
79 | {status.icon && (
80 |
81 | )}
82 | {status.label}
83 |
84 | )
85 | },
86 | filterFn: (row, id, value) => {
87 | return value.includes(row.getValue(id))
88 | },
89 | },
90 | {
91 | accessorKey: 'priority',
92 | header: ({ column }) => (
93 |
94 | ),
95 | cell: ({ row }) => {
96 | const priority = priorities.find(
97 | (priority) => priority.value === row.getValue('priority')
98 | )
99 |
100 | if (!priority) {
101 | return null
102 | }
103 |
104 | return (
105 |
106 | {priority.icon && (
107 |
108 | )}
109 | {priority.label}
110 | {title}
32 | }
33 |
34 | return (
35 |
36 |
37 |
38 |
52 |
53 |
54 | column.toggleSorting(false)}>
55 |
56 | Asc
57 |
58 | column.toggleSorting(true)}>
59 |
60 | Desc
61 |
62 |
63 | column.toggleVisibility(false)}>
64 |
65 | Hide
66 |
67 |
68 |
69 |
114 |
115 |
116 | {option.icon && (
117 |
118 | )}
119 | {option.label}
120 | {facets?.get(option.value) && (
121 |
122 | {facets.get(option.value)}
123 |
124 | )}
125 |
126 | )
127 | })}
128 |
129 | {selectedValues.size > 0 && (
130 | <>
131 |
132 |
133 | column?.setFilterValue(undefined)}
135 | className='justify-center text-center'
136 | >
137 | Clear filters
138 |
139 |
140 |
141 | )}
142 |
143 |
144 |
145 |
146 | )
147 | }
148 |
--------------------------------------------------------------------------------
/src/pages/tasks/components/data-table-pagination.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | ChevronLeftIcon,
3 | ChevronRightIcon,
4 | DoubleArrowLeftIcon,
5 | DoubleArrowRightIcon,
6 | } from '@radix-ui/react-icons'
7 | import { Table } from '@tanstack/react-table'
8 |
9 | import { Button } from '@/components/custom/button'
10 | import {
11 | Select,
12 | SelectContent,
13 | SelectItem,
14 | SelectTrigger,
15 | SelectValue,
16 | } from '@/components/ui/select'
17 |
18 | interface DataTablePaginationProps {
19 | table: Table
20 | }
21 |
22 | export function DataTablePagination({
23 | table,
24 | }: DataTablePaginationProps) {
25 | return (
26 |
27 |
28 | {table.getFilteredSelectedRowModel().rows.length} of{' '}
29 | {table.getFilteredRowModel().rows.length} row(s) selected.
30 |
31 |
32 |
33 | Rows per page
34 |
51 |
52 |
53 | Page {table.getState().pagination.pageIndex + 1} of{' '}
54 | {table.getPageCount()}
55 |
56 |
57 |
66 |
75 |
84 |
93 |
94 |
95 |
22 |
23 |
27 | table.getColumn('title')?.setFilterValue(event.target.value)
28 | }
29 | className='h-8 w-[150px] lg:w-[250px]'
30 | />
31 |
32 | {table.getColumn('status') && (
33 |
38 | )}
39 | {table.getColumn('priority') && (
40 |
45 | )}
46 |
47 | {isFiltered && (
48 |
56 | )}
57 |
58 |
59 |
70 |
71 |
72 |
73 |
74 | {table.getHeaderGroups().map((headerGroup) => (
75 |
76 | {headerGroup.headers.map((header) => {
77 | return (
78 |
79 | {header.isPlaceholder
80 | ? null
81 | : flexRender(
82 | header.column.columnDef.header,
83 | header.getContext()
84 | )}
85 |
86 | )
87 | })}
88 |
89 | ))}
90 |
91 |
92 | {table.getRowModel().rows?.length ? (
93 | table.getRowModel().rows.map((row) => (
94 |
98 | {row.getVisibleCells().map((cell) => (
99 |
100 | {flexRender(
101 | cell.column.columnDef.cell,
102 | cell.getContext()
103 | )}
104 |
105 | ))}
106 |
107 | ))
108 | ) : (
109 |
110 |
114 | No results.
115 |
116 |
117 | )}
118 |
119 |
120 |
121 |
122 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | Welcome back!
25 |
26 | Here's a list of your tasks for this month!
27 |
28 |
29 |
31 |
32 |
33 |
34 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/src/redux/actions/signIn.tsx:
--------------------------------------------------------------------------------
1 | //For reference
2 | import { createAsyncThunk } from '@reduxjs/toolkit'
3 | import axios from 'axios';
4 | import { apiURL } from '@/config';
5 | import { toast } from '@/components/ui/use-toast'
6 |
7 | export const _login = createAsyncThunk('user/_login', async (data: any) => {
8 | try {
9 | const response = await axios(
10 | {
11 | method: 'POST',
12 | url: apiURL + '/user/login',
13 | data: data.request,
14 | headers: { Authorization: 'Bearer ' + sessionStorage.getItem('token') },
15 | })
16 | return response
17 | } catch (error: any) {
18 | const err = error;
19 | if (err.response) {
20 |
21 | if (err.response.status < 200 || err.response.status >= 300) {
22 | if (err.response.status === 401 || err.response.status === 402) {
23 | data.history('/LoginScreens/default-login');
24 | toast({
25 | variant: "destructive",
26 | title: "Please Login Again",
27 | });
28 | } else if (err.response.status === 422) {
29 | toast({
30 | variant: "destructive",
31 | title: err.response?.data?.error || 'Please Try Again',
32 | });
33 | } else {
34 | toast({
35 | variant: "destructive",
36 | title: 'Please Try Again',
37 | });
38 | }
39 | }
40 | } else {
41 | toast({
42 | variant: "destructive",
43 | title: 'Please Check Your Network',
44 | });
45 | }
46 | return error.response;
47 | }
48 | })
--------------------------------------------------------------------------------
/src/redux/reduces/index.tsx:
--------------------------------------------------------------------------------
1 | import { UnknownAction, combineReducers } from 'redux';
2 | import signinSlice from './signIn';
3 |
4 | const reducers = combineReducers({
5 | signin: signinSlice,
6 | });
7 |
8 | const rootReducer = (state: { signin: { isloading: boolean; }; } | Partial<{ signin: { isloading: boolean; } | undefined; }> | undefined, action: UnknownAction) => {
9 | if (action.type === 'user/_logout/fulfilled' || sessionStorage.getItem('token') === null) {
10 | return reducers(undefined, action);
11 | }
12 |
13 | return reducers(state, action);
14 | };
15 |
16 | export default rootReducer;
17 |
--------------------------------------------------------------------------------
/src/redux/reduces/signIn.tsx:
--------------------------------------------------------------------------------
1 | import { createSlice } from '@reduxjs/toolkit'
2 | import { _login } from '../actions/signIn'
3 |
4 | const signinSlice = createSlice({
5 | name: 'user',
6 | initialState: { isloading: false },
7 | reducers: {},
8 | extraReducers: (builder) => {
9 | builder
10 | .addCase(_login.pending, (state, action) => (
11 | {
12 | ...state,
13 | isloading: true,
14 | }))
15 | .addCase(_login.fulfilled, (state, action) => (
16 | {
17 | ...state,
18 | isloading: false,
19 | ...action.payload,
20 | }))
21 | .addCase(_login.rejected, (state, action) => (
22 | {
23 | ...state,
24 | isloading: false,
25 | ...action.error,
26 | }))
27 | },
28 | })
29 |
30 | export default signinSlice.reducer
--------------------------------------------------------------------------------
/src/redux/store.tsx:
--------------------------------------------------------------------------------
1 | import {configureStore} from '@reduxjs/toolkit';
2 | import rootReducer from './reduces';
3 | import { persistStore, persistReducer } from "redux-persist";
4 | import storage from "redux-persist/lib/storage";
5 |
6 | const persistConfig = {
7 | key: "root", // Key for the persisted state in storage
8 | storage, // Storage engine (e.g., localStorage)
9 | safelist: ["auth"], // Array of reducers to persist (only 'auth' in this case)
10 | };
11 |
12 | const persistedReducer = persistReducer(persistConfig, rootReducer)
13 |
14 | const store = configureStore({
15 | reducer: persistedReducer,
16 | middleware: (getDefaultMiddleware) => getDefaultMiddleware({
17 | serializableCheck: false,
18 | }),
19 | });
20 |
21 | const persistor = persistStore(store);
22 |
23 | export {persistor, store};
24 |
--------------------------------------------------------------------------------
/src/router.tsx:
--------------------------------------------------------------------------------
1 | import { Navigate, createBrowserRouter, useLocation } from 'react-router-dom'
2 | import GeneralError from './pages/errors/general-error'
3 | import NotFoundError from './pages/errors/not-found-error'
4 | import MaintenanceError from './pages/errors/maintenance-error'
5 | import { toast } from './components/ui/use-toast';
6 | import { ToastAction } from "@/components/ui/toast"
7 |
8 | function RequireAuth({ children }: { children: JSX.Element }) {
9 | let auth = useAuth();
10 | let location = useLocation();
11 |
12 | if (!auth) {
13 | toast({
14 | variant: "destructive",
15 | title: "Invalid Token",
16 | action: Try again,
17 | })
18 | return ;
19 | }
20 |
21 | return children;
22 | }
23 |
24 | function useAuth() {
25 | return sessionStorage.getItem('token');
26 | }
27 |
28 | const router = createBrowserRouter([
29 | // Auth routes
30 | {
31 | path: '/sign-in',
32 | lazy: async () => ({
33 | Component: (await import('./pages/auth/sign-in')).default,
34 | }),
35 | },
36 | { path: '/', element: sessionStorage.getItem('token') ? :},
37 | {
38 | path: '/sign-in-2',
39 | lazy: async () => ({
40 | Component: (await import('./pages/auth/sign-in-2')).default,
41 | }),
42 | },
43 | {
44 | path: '/sign-up',
45 | lazy: async () => ({
46 | Component: (await import('./pages/auth/sign-up')).default,
47 | }),
48 | },
49 | {
50 | path: '/forgot-password',
51 | lazy: async () => ({
52 | Component: (await import('./pages/auth/forgot-password')).default,
53 | }),
54 | },
55 | {
56 | path: '/otp',
57 | lazy: async () => ({
58 | Component: (await import('./pages/auth/otp')).default,
59 | }),
60 | },
61 |
62 | // Main routes
63 | {
64 | path: '/',
65 | lazy: async () => {
66 | const AppShell = await import('./components/app-shell')
67 | const DashboardComponent = AppShell.default;
68 | return {
69 | Component: () => (
70 |
71 |
72 |
73 | ),
74 | }
75 | },
76 | children: [
77 | {
78 | path: '/dashboard',
79 | lazy: async () => ({
80 | Component: (await import('@/pages/dashboard')).default,
81 | }),
82 | },
83 | {
84 | path: 'tasks',
85 | lazy: async () => ({
86 | Component: (await import('@/pages/tasks')).default,
87 | }),
88 | },
89 | {
90 | path: 'chats',
91 | lazy: async () => ({
92 | Component: (await import('@/components/coming-soon')).default,
93 | }),
94 | },
95 | {
96 | path: 'apps',
97 | lazy: async () => ({
98 | Component: (await import('@/pages/apps')).default,
99 | }),
100 | },
101 | {
102 | path: 'users',
103 | lazy: async () => ({
104 | Component: (await import('@/components/coming-soon')).default,
105 | }),
106 | },
107 | {
108 | path: 'analysis',
109 | lazy: async () => ({
110 | Component: (await import('@/components/coming-soon')).default,
111 | }),
112 | },
113 | {
114 | path: 'extra-components',
115 | lazy: async () => ({
116 | Component: (await import('@/pages/extra-components')).default,
117 | }),
118 | },
119 | {
120 | path: 'settings',
121 | lazy: async () => ({
122 | Component: (await import('./pages/settings')).default,
123 | }),
124 | errorElement: ,
125 | children: [
126 | {
127 | index: true,
128 | lazy: async () => ({
129 | Component: (await import('./pages/settings/profile')).default,
130 | }),
131 | },
132 | {
133 | path: 'account',
134 | lazy: async () => ({
135 | Component: (await import('./pages/settings/account')).default,
136 | }),
137 | },
138 | {
139 | path: 'appearance',
140 | lazy: async () => ({
141 | Component: (await import('./pages/settings/appearance')).default,
142 | }),
143 | },
144 | {
145 | path: 'notifications',
146 | lazy: async () => ({
147 | Component: (await import('./pages/settings/notifications'))
148 | .default,
149 | }),
150 | },
151 | {
152 | path: 'display',
153 | lazy: async () => ({
154 | Component: (await import('./pages/settings/display')).default,
155 | }),
156 | },
157 | {
158 | path: 'error-example',
159 | lazy: async () => ({
160 | Component: (await import('./pages/settings/error-example'))
161 | .default,
162 | }),
163 | errorElement: ,
164 | },
165 | ],
166 | },
167 | ],
168 | },
169 |
170 | // Error routes
171 | { path: '/500', Component: GeneralError },
172 | { path: '/404', Component: NotFoundError },
173 | { path: '/503', Component: MaintenanceError },
174 |
175 | // Fallback 404 route
176 | { path: '*', Component: NotFoundError },
177 | ])
178 |
179 | export default router
180 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | darkMode: ["class"],
4 | content: [
5 | './pages/**/*.{ts,tsx}',
6 | './components/**/*.{ts,tsx}',
7 | './app/**/*.{ts,tsx}',
8 | './src/**/*.{ts,tsx}',
9 | ],
10 | prefix: "",
11 | theme: {
12 | container: {
13 | center: true,
14 | padding: "2rem",
15 | screens: {
16 | "2xl": "1400px",
17 | },
18 | },
19 | extend: {
20 | colors: {
21 | border: "hsl(var(--border))",
22 | input: "hsl(var(--input))",
23 | ring: "hsl(var(--ring))",
24 | background: "hsl(var(--background))",
25 | foreground: "hsl(var(--foreground))",
26 | primary: {
27 | DEFAULT: "hsl(var(--primary))",
28 | foreground: "hsl(var(--primary-foreground))",
29 | },
30 | secondary: {
31 | DEFAULT: "hsl(var(--secondary))",
32 | foreground: "hsl(var(--secondary-foreground))",
33 | },
34 | destructive: {
35 | DEFAULT: "hsl(var(--destructive))",
36 | foreground: "hsl(var(--destructive-foreground))",
37 | },
38 | muted: {
39 | DEFAULT: "hsl(var(--muted))",
40 | foreground: "hsl(var(--muted-foreground))",
41 | },
42 | accent: {
43 | DEFAULT: "hsl(var(--accent))",
44 | foreground: "hsl(var(--accent-foreground))",
45 | },
46 | popover: {
47 | DEFAULT: "hsl(var(--popover))",
48 | foreground: "hsl(var(--popover-foreground))",
49 | },
50 | card: {
51 | DEFAULT: "hsl(var(--card))",
52 | foreground: "hsl(var(--card-foreground))",
53 | },
54 | },
55 | borderRadius: {
56 | lg: "var(--radius)",
57 | md: "calc(var(--radius) - 2px)",
58 | sm: "calc(var(--radius) - 4px)",
59 | },
60 | keyframes: {
61 | "accordion-down": {
62 | from: { height: "0" },
63 | to: { height: "var(--radix-accordion-content-height)" },
64 | },
65 | "accordion-up": {
66 | from: { height: "var(--radix-accordion-content-height)" },
67 | to: { height: "0" },
68 | },
69 | },
70 | animation: {
71 | "accordion-down": "accordion-down 0.2s ease-out",
72 | "accordion-up": "accordion-up 0.2s ease-out",
73 | },
74 | },
75 | },
76 | plugins: [require("tailwindcss-animate")],
77 | }
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 |
9 | /* Bundler mode */
10 | "moduleResolution": "bundler",
11 | "allowImportingTsExtensions": true,
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "noEmit": true,
15 | "jsx": "react-jsx",
16 |
17 | /* Alias */
18 | "baseUrl": ".",
19 | "paths": {
20 | "@/*": ["./src/*"],
21 | },
22 |
23 | /* Linting */
24 | "strict": true,
25 | "noUnusedLocals": true,
26 | "noUnusedParameters": true,
27 | "noFallthroughCasesInSwitch": true,
28 | },
29 | "include": ["src"],
30 | "references": [{ "path": "./tsconfig.node.json" }],
31 | }
32 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true
8 | },
9 | "include": ["vite.config.ts"]
10 | }
11 |
--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
1 | import path from 'path'
2 | import { defineConfig } from 'vite'
3 | import react from '@vitejs/plugin-react-swc'
4 |
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [react()],
8 | resolve: {
9 | alias: {
10 | '@': path.resolve(__dirname, './src'),
11 | },
12 | },
13 | })
14 |
--------------------------------------------------------------------------------
|