40 |
49 | )
50 | }
51 |
52 | interface OptionsPanelProps {
53 | isAdmin?: boolean;
54 | img: string;
55 | }
56 |
57 | const OptionsPanel = ({img, isAdmin}: OptionsPanelProps) => {
58 | const navigate = useNavigate();
59 |
60 | return (
61 |
41 |
47 | {showPanel &&
42 | 
43 | {!isAdmin && }
44 |
45 | {showPanel ?
46 |
62 |
81 | )
82 | }
83 |
84 | export default Avatar
--------------------------------------------------------------------------------
/src/components/avatar/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as Avatar } from './avatar'
--------------------------------------------------------------------------------
/src/components/button/button.tsx:
--------------------------------------------------------------------------------
1 | interface ButtonProps {
2 | className?: string;
3 | type?: "default" | "primary" | "success" | "warning";
4 | icon?: React.ReactNode;
5 | label: string;
6 | onClick?: () => void;
7 | disabled?: boolean;
8 | rounded?: boolean;
9 | size?: "md" | "lg";
10 | }
11 |
12 | const Button = ({className, type = "default", icon, disabled = false, label, onClick, rounded = false, size = "lg"}: ButtonProps) => {
13 | const types = {
14 | default: `bg-white text-midblack ${!rounded && "hover:border-midgrey hover:bg-tangerine border border-black"}`,
15 | primary: `bg-primary-500 hover:bg-primary-400 ${rounded ? "text-midblack" : "text-white"} border border-primary-500`,
16 | success: `bg-success hover:bg-success ${rounded ? "text-midblack" : "text-white"} border border-success`,
17 | warning: `bg-warning hover:bg-warning ${rounded ? "text-midblack" : "text-white"} border border-warning`,
18 | }
19 | let buttonClassName = `px-6.5 ${size === "lg" ? "h-16" : "h-11"} flex ${rounded ? "rounded-15" : "rounded-2.5"} disabled:cursor-not-allowed disabled:bg-disabled-bg disabled:text-disabled-text disabled:border-disabled-text ${types[type]} ${className}`
20 | return (
21 |
27 | )
28 | }
29 |
30 | export default Button
--------------------------------------------------------------------------------
/src/components/button/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as Button } from './button'
--------------------------------------------------------------------------------
/src/components/card/card.tsx:
--------------------------------------------------------------------------------
1 | import { IconStar, IconWhiteHeart, IconGreyHeart } from "../../assets/icons";
2 |
3 | export interface CardProps {
4 | className?: string;
5 | data: CardData;
6 | }
7 |
8 | export interface CardData {
9 | price: number;
10 | name: string;
11 | title: string;
12 | like: boolean;
13 | ratings: number;
14 | img: string;
15 | size: "md" | "lg";
16 | }
17 |
18 | const Card = ({className, data}: CardProps) => {
19 | const {price, name, title, like, ratings, img, size} = data
20 | const cardClassName = `flex flex-col ${size === "lg" ? "w-101 h-80 " : " w-75 h-90"} rounded-2.5 bg-white shadow-custom3 cursor-pointer ${className}`
21 | return (
22 |
63 |
64 |
69 |
65 |
68 | Arnand Siem
66 | Koppert
67 |
23 |
45 | )
46 | }
47 |
48 | export default Card
--------------------------------------------------------------------------------
/src/components/card/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as Card } from './card'
--------------------------------------------------------------------------------
/src/components/checkbox/checkbox.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | interface CheckboxProps {
4 | className?: string;
5 | label?: string;
6 | }
7 |
8 | const Checkbox = ({className, label}: CheckboxProps) => {
9 | const checkboxClassName = `flex items-center ${className}`
10 | const [isChecked, setChecked] = useState(false);
11 |
12 | const handleCheckboxChange = () => {
13 | setChecked(!isChecked);
14 | };
15 |
16 | return (
17 |
24 |
25 |
27 | ${price}
26 |
28 |
44 |
29 |
32 | {name}
30 | {title}
31 |
33 |
43 |
34 |
37 |
38 |
39 | {like ?
42 |
18 |
25 |
47 |
48 | )
49 | }
50 |
51 | export default Checkbox
--------------------------------------------------------------------------------
/src/components/checkbox/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as Checkbox } from './checkbox'
--------------------------------------------------------------------------------
/src/components/dropdown/dropdown.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect } from 'react';
2 | import { IconDownArrow, IconRightArrow } from '../../assets/icons';
3 |
4 | interface DropdownProps {
5 | options: string[];
6 | label?: string;
7 | className?: string;
8 | }
9 |
10 | const Dropdown: React.FC
32 |
55 | );
56 | };
57 |
58 | export default Dropdown;
59 |
--------------------------------------------------------------------------------
/src/components/dropdown/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as Dropdown } from './dropdown'
--------------------------------------------------------------------------------
/src/components/input/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as Input } from './input'
--------------------------------------------------------------------------------
/src/components/input/input.tsx:
--------------------------------------------------------------------------------
1 | interface InputProps {
2 | className?: string;
3 | label?: string;
4 | icon?: React.ReactNode;
5 | placeholder?: string;
6 | isRequired?: boolean;
7 | type?: "default" | "rounded"
8 | }
9 |
10 | const Input = ({className, label, icon, placeholder, isRequired = false, type = "default"}: InputProps) => {
11 | const inputClassName = `block ${className}`
12 |
13 | return (
14 |
33 |
40 | {isOpen && (
41 |
54 | -
42 | {options.map((option) => (
43 |
-
47 | {option}
48 |
49 |
50 | ))}
51 |
15 | {label &&
23 | )
24 | }
25 |
26 | export default Input
--------------------------------------------------------------------------------
/src/components/modal/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as Modal } from './modal'
--------------------------------------------------------------------------------
/src/components/modal/modal.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef } from "react";
2 |
3 | interface ModalProps {
4 | classNames? : string;
5 | children: React.ReactNode;
6 | visible: boolean;
7 | setVisible: (value: boolean) => void;
8 | }
9 |
10 | const Modal = ({classNames, children, visible, setVisible}: ModalProps) => {
11 | const selectRef = useRef
16 | {label}
17 |
}
18 |
19 | {icon &&
22 | {icon}
}
20 |
21 |
33 |
}
38 |
39 | )
40 | }
41 |
42 | export default Modal
--------------------------------------------------------------------------------
/src/components/radio-group/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as RadioGroup } from './radio-group'
--------------------------------------------------------------------------------
/src/components/radio-group/radio-group.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | interface CustomRadioGroupProps {
4 | className?: string;
5 | label?: string;
6 | options: RadioOption[]
7 | }
8 |
9 | interface RadioOption {
10 | value: string;
11 | label: string;
12 | }
13 |
14 | const CustomRadioGroup = ({className, label, options}: CustomRadioGroupProps) => {
15 | const [selectedOption, setSelectedOption] = useState
34 | {children}
35 |
36 |
37 |
25 | {label &&
43 | );
44 | };
45 |
46 | export default CustomRadioGroup;
47 |
--------------------------------------------------------------------------------
/src/components/select/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as Select } from './select'
--------------------------------------------------------------------------------
/src/components/select/select.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect } from 'react';
2 | import { IconDownArrow } from '../../assets/icons';
3 |
4 | interface CustomSelectProps {
5 | options: string[];
6 | label?: string;
7 | className?: string;
8 | placeholder?: string;
9 | icon?: React.ReactNode;
10 | }
11 |
12 | const CustomSelect: React.FC
26 | {label}
27 |
}
28 |
29 | {options.map((option) => (
30 |
42 | handleOptionChange(option.value)}
34 | >
35 |
40 | ))}
41 |
36 |
37 |
38 |
39 |
40 | {label && (
41 |
69 | );
70 | };
71 |
72 | export default CustomSelect;
73 |
--------------------------------------------------------------------------------
/src/components/slider/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as Slider } from './slider'
--------------------------------------------------------------------------------
/src/components/slider/slider.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { CardData } from '../card/card';
3 | import Card from '../card/card';
4 | import { IconLeftArrow, IconLgRightArrow } from '../../assets/icons';
5 |
6 | interface SliderProps {
7 | className?: string;
8 | cards: CardData[];
9 | cardsPerPage: number;
10 | label?: string;
11 | }
12 |
13 | const Slider: React.FC
42 | {label}
43 |
44 | )}
45 |
46 |
54 | {isOpen && (
55 |
68 | -
56 | {options.map((option) => (
57 |
- handleOptionClick(option)} 61 | > 62 | {option} 63 | 64 | ))} 65 |
37 |
78 | );
79 | };
80 |
81 | export default Slider;
82 |
--------------------------------------------------------------------------------
/src/components/switch/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as Switch } from './switch'
--------------------------------------------------------------------------------
/src/components/switch/switch.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | interface SwitchProps {
4 | label?: string;
5 | checked: boolean;
6 | onChange: (checked: boolean) => void;
7 | }
8 |
9 | const Switch: React.FC
38 | {label}
39 |
40 |
41 |
66 |
42 | {visibleCards.map((card, index) => (
43 |
48 |
44 |
46 | ))}
47 |
49 |
64 |
65 |
50 |
56 |
62 |
63 |
67 | {pages.map((page: number) => {
68 | return (
69 | <>
70 | { page === currentPage - 1 ?
71 | :
72 | }
73 |
74 | )
75 | })}
76 |
77 |
16 |
25 | );
26 | };
27 |
28 | export default Switch;
29 |
--------------------------------------------------------------------------------
/src/components/table/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as Table } from './table'
--------------------------------------------------------------------------------
/src/components/table/table.tsx:
--------------------------------------------------------------------------------
1 | // CustomTable.tsx
2 | import React, { useState } from 'react';
3 |
4 | interface TableColumn {
5 | header: string;
6 | width?: string;
7 | }
8 |
9 | interface TableProps {
10 | columns: TableColumn[];
11 | data: any[][];
12 | showCheckbox?: boolean;
13 | }
14 |
15 | const CustomTable: React.FC
21 |
22 |
23 | {label && {label}}
24 |
41 |
42 |
43 |
78 |
79 | );
80 | };
81 |
82 | export default CustomTable;
83 |
--------------------------------------------------------------------------------
/src/components/textarea/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as TextArea } from './textarea'
--------------------------------------------------------------------------------
/src/components/textarea/textarea.tsx:
--------------------------------------------------------------------------------
1 | interface TextAreaProps {
2 | label?: string;
3 | className?: string;
4 | placeholder?: string;
5 | }
6 |
7 | const TextArea = ({label, className, placeholder}: TextAreaProps) => {
8 | const textAreaClassName = `${className}`
9 |
10 | return (
11 | | 45 | 50 | | } 51 | {columns.map((column, index) => ( 52 |53 | {column.header} 54 | | 55 | ))} 56 |
|---|---|
| 62 | handleRowCheckboxClick(rowIndex)} 67 | /> 68 | | } 69 | {row.map((cell, cellIndex) => ( 70 |71 | {cell} 72 | | 73 | ))} 74 |
12 | {label &&
19 | )
20 | }
21 |
22 | export default TextArea
--------------------------------------------------------------------------------
/src/components/tour-stepper/index.tsx:
--------------------------------------------------------------------------------
1 | export { default as TourStepper } from './tour-stepper'
--------------------------------------------------------------------------------
/src/components/tour-stepper/tour-stepper.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from "../button";
2 | import { useState, useCallback, useEffect } from 'react'
3 |
4 | interface TourStepperProps {
5 | classNames? : string;
6 | stepComponents: React.ReactNode[];
7 | }
8 |
9 | const TourStepper = ({classNames, stepComponents}: TourStepperProps) => {
10 | const modalClassNames = `p-16 w-131 my-auto justify-center bg-white items-center overflow-x-hidden overflow-y-auto inset-0 z-50 my-auto rounded-5 shadow-custom ${classNames}`;
11 | const stepsCount = stepComponents?.length;
12 | const [currentStep, setCurrentStep] = useState
13 | {label}
14 |
}
15 |
16 |
17 |
18 |
38 |
}
52 |
53 | )
54 | }
55 |
56 | interface StepperProps {
57 | count: number;
58 | currentStep: number;
59 | }
60 |
61 | const Stepper = ({ count, currentStep }: StepperProps) => {
62 | const steps = Array.from({ length: count }, (_, index) => index);
63 |
64 | return (
65 |
39 |
50 |
51 |
40 |
42 |
43 | {stepComponents[currentStep]}
44 |
45 |
46 | {currentStep !== stepsCount - 1 && }
47 |
48 |
49 |
66 | {steps.map((step) => (
67 |
68 | ))}
69 |
70 | );
71 | };
72 |
73 | export default TourStepper
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
--------------------------------------------------------------------------------
/src/layout/index.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from "react";
2 | import Nav from "./nav";
3 | import { useLocation } from "react-router-dom";
4 |
5 | interface AppLayoutProps {
6 | children: React.ReactNode;
7 | }
8 |
9 | const AppLayout = ({children}: AppLayoutProps) => {
10 | const location = useLocation()
11 |
12 | const isShowNav = useMemo(() => !['/signin', 'reset-password', 'new-password'].includes(location.pathname), [location.pathname])
13 | const isAdmin = useMemo(() => location.pathname.includes('/admin'), [location.pathname])
14 |
15 | return (
16 |
17 | {isShowNav && }
18 |
22 | )
23 | }
24 |
25 | export default AppLayout
--------------------------------------------------------------------------------
/src/layout/nav.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback } from "react";
2 | import { useNavigate, NavLink, useLocation } from "react-router-dom";
3 | import { Input } from "../components/input";
4 | import { IconSearch } from "../assets/icons";
5 | import { Avatar } from "../components/avatar";
6 | import { UserAvatar, AdminAvatar } from "../assets/imgs";
7 | import { IconWhiteHeart, IconUser } from "../assets/icons";
8 |
9 | interface NavProps {
10 | isAdmin?: boolean;
11 | }
12 |
13 | const Nav = ({isAdmin} : NavProps) => {
14 | const navigate = useNavigate()
15 | const navigation = useLocation()
16 | const pathName = navigation.pathname
17 |
18 | const gotoHome = useCallback(() => {
19 | navigate('/overview')
20 | }, [navigate])
21 |
22 | const gotoAllCourses = useCallback(() => {
23 | navigate('/all-courses')
24 | }, [navigate])
25 |
26 | return (
27 | <>
28 |
19 | {children}
20 |
21 |
29 |
43 | {isAdmin &&
30 |
33 | ACE ACADEMY
31 | {!isAdmin && } />}
32 |
34 | {!isAdmin &&
42 |
35 | All courses
36 | My courses
37 |
}
38 |
39 |
41 |
44 | requests
47 | analytics
48 | settings
49 |
}
50 |
51 | )
52 | }
53 |
54 | export default Nav
--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
1 | import ReactDOM from 'react-dom/client'
2 | import App from './App.tsx'
3 | import React from 'react'
4 | import './index.css'
5 |
6 | ReactDOM.createRoot(document.getElementById('root')!).render(
7 | Analytics
5 |
6 | )
7 | }
8 |
9 | export default Analytics
--------------------------------------------------------------------------------
/src/pages/admin/dashboard.tsx:
--------------------------------------------------------------------------------
1 | const Dashboard = () => {
2 | return (
3 | <>
4 | Dashboard
5 |
6 | )
7 | }
8 |
9 | export default Dashboard
--------------------------------------------------------------------------------
/src/pages/admin/index.tsx:
--------------------------------------------------------------------------------
1 | import { Routes, Route } from "react-router-dom"
2 | import Dashboard from "./dashboard"
3 | import Werknemers from "./werknemers"
4 | import Requests from "./requests"
5 | import Analytics from "./analytics"
6 | import Settings from "./settings"
7 |
8 | const Admin = () => {
9 | return (
10 | Employees
40 |
41 |
42 |
43 |
44 |
46 |
55 |
47 |
50 | Approve request
48 | Are you sure you want to approve this request?
49 |
51 |
52 |
53 |
54 |
59 |
68 |
60 |
62 |
63 | Deny request
61 |
64 |
65 |
66 |
67 |
87 |
88 |
91 | )
92 | }
93 |
94 |
95 | export default Requests
--------------------------------------------------------------------------------
/src/pages/admin/settings.tsx:
--------------------------------------------------------------------------------
1 | import { useCallback, useState } from "react";
2 | import { AdminAvatarLg, UserAvatar } from "../../assets/imgs"
3 | import { Switch } from "../../components/switch";
4 | import { Input } from "../../components/input";
5 | import { IconSearch, IconPlus } from "../../assets/icons";
6 | import { Button } from "../../components/button";
7 | import { Checkbox } from "../../components/checkbox";
8 |
9 | const Settings = () => {
10 | const [checked, setChecked] = useState
19 |
41 |
}
44 | />
45 | Account settings
20 |
21 | 
22 |
34 |
}
37 | />
38 |
23 |
27 |
}
30 | />
31 | info@koppert.nl
28 | Verified
29 | accounts@koppert.nl
35 | Verified
36 | €2500
43 |
71 |
99 |
100 | )
101 | }
102 |
103 | interface SettingRowProps {
104 | name: string;
105 | value: any;
106 | divider?: boolean
107 | }
108 |
109 | const SettingRow = ({name, value, divider = true}: SettingRowProps) => {
110 | return (
111 | Admin members
72 |
73 |
85 |
98 |
74 | } />
75 | } />
76 |
77 |
78 |
84 |
79 |
82 | Admins
81 | Status
83 | 85 |
86 |
97 |
87 |
96 |
89 | 
90 |
95 |
91 |
94 | Arnand Siem
92 | Product owner
93 |
112 |
} 120 |
121 | )
122 | }
123 |
124 | export default Settings
--------------------------------------------------------------------------------
/src/pages/admin/werknemers.tsx:
--------------------------------------------------------------------------------
1 | import { Table } from "../../components/table"
2 | import { TableUserAvatar } from "../../assets/imgs";
3 |
4 | const Werknemers = () => {
5 | const tableColumns = [
6 | { header: '', width: '4.5%' },
7 | { header: 'Naam', width: '18%' },
8 | { header: 'Reports to', width: '15%' },
9 | { header: 'Budget spent', width: '15%' },
10 | { header: 'Total active time', width: '30%' },
11 | { header: '', width: '10%' },
12 | ];
13 | const tableData = [
14 | [
113 |
119 | {divider && {name}
114 | {value}
115 |
116 |
117 |
118 | } 120 |
Employees
24 |
25 |
26 |
27 |
28 | )
29 | }
30 |
31 | const UserAvatar = () => {
32 | return (
33 |
55 |
78 | )
79 | }
80 |
81 | export default AllCourses
--------------------------------------------------------------------------------
/src/pages/auth/layout/index.tsx:
--------------------------------------------------------------------------------
1 | import { BgSignUp } from "../../../assets/imgs";
2 |
3 | interface AuthLayoutProps {
4 | children: React.ReactNode;
5 | }
6 |
7 | const AuthLayout = ({children}: AuthLayoutProps) => {
8 | return (
9 | <>
10 | All courses
56 |
57 |
67 |
58 |
63 |
64 |
66 |
68 | 167 courses available
69 |
74 |
70 | Sort by:
71 | Relevance
73 |
75 | {mdcards.map((card) =>
77 |
11 |
18 |
19 | )
20 | }
21 |
22 | export default AuthLayout
--------------------------------------------------------------------------------
/src/pages/auth/new-password/index.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useCallback } from "react"
2 | import AuthLayout from "../layout"
3 | import { Button } from "../../../components/button"
4 | import { Input } from "../../../components/input"
5 | import { IconLock, IconCheckMark } from "../../../assets/icons"
6 | import { useNavigate } from "react-router-dom"
7 |
8 | const NewPassword = () => {
9 | const navigate = useNavigate();
10 | const [isNewPass, setIsNewPass] = useState
12 | 
13 |
14 |
15 | {children}
16 |
17 |
23 |
:
31 |
24 |
27 | } />
28 | } />
29 |
30 | New password
25 | Your password must contain at least 8 characters and 1 number
26 |
32 |
}
41 |
33 |
35 |
36 |
40 | Password reset
37 | Your password has been reset successfully
38 |
39 |
17 |
:
24 |
18 |
21 | } />
22 |
23 | Reset your password
19 | Enter your email and we’ll send you a link to reset your password
20 |
25 |
}
33 |
26 |
28 |
29 |
32 | Email sent
30 | Check your email and open the link we sent to continue.
31 |
23 |
26 | Welcome back
24 | Sign in to your account to continue
25 |
27 | } />
28 | } />
29 |
30 | Or
31 | } isRequired />
32 | } isRequired />
33 |
34 |
37 |
38 | Forgot password?
36 |
7 | 
8 |
19 | )
20 | }
21 |
22 | export default Banner
--------------------------------------------------------------------------------
/src/pages/overview/components/tour.tsx:
--------------------------------------------------------------------------------
1 | import { TourStepper } from "../../../components/tour-stepper"
2 | import { Input } from "../../../components/input"
3 | import { IconLock, IconDegree, IconToolbox, IconMap, IconCongrats } from "../../../assets/icons"
4 | import { Select } from "../../../components/select"
5 | import { RadioGroup } from "../../../components/radio-group"
6 |
7 |
8 | const Tour = () => {
9 | const stepcomponents = [
10 |
9 |
14 | Welkom Jeffrey
10 | Je hebt nog 1000 euro learn budget
11 | "Learning never exhausts the mind."
12 | LEONARDO DA VINCI
13 |
15 |
16 |
17 |
18 |
26 |
29 | )
30 | }
31 |
32 | const Step2 = () => {
33 | return (
34 | Welcome Jeffrey
27 | Please check your mail. We’ve sent you a confirmation link.
28 |
35 |
42 | )
43 | }
44 |
45 | const Step3 = () => {
46 | return (
47 |
36 |
39 | } />
40 | } />
41 | Create a password
37 | Your password must be 8 characters long and contain at least one letter, one digit and one special character.
38 |
48 |
52 | )
53 | }
54 |
55 | const Step4 = () => {
56 | const options = [
57 | "Primary education",
58 | "High school",
59 | "Bachelor's degree",
60 | "Master's degree",
61 | "Doctorate or higher"
62 | ]
63 |
64 | return (
65 | Terms & Conditions
49 | These terms and conditions outline the rules and regulations for the use of Company Name's Website, located at Website .com.
50 | By accessing this website we assume you accept these terms and conditions. Do not continue to use Website Name if you do not agree to take all of the terms and conditions stated on this page.
51 |
66 |
72 | )
73 | }
74 |
75 | const Step5 = () => {
76 | const options1 = [
77 | {
78 | label: "Disagree",
79 | value: "Disagree"
80 | },
81 | {
82 | label: "Neutral",
83 | value: "Neutral"
84 | },
85 | {
86 | label: "Agree",
87 | value: "Agree"
88 | },
89 | ]
90 |
91 | return (
92 | Tell us about yourself
67 | } />
68 | } />
69 | } />
70 |
71 |
93 |
98 | )
99 | }
100 |
101 | const Step6 = () => {
102 | return (
103 | Likert-scale
94 |
104 |
112 | )
113 | }
114 |
115 | export default Tour
--------------------------------------------------------------------------------
/src/pages/overview/index.tsx:
--------------------------------------------------------------------------------
1 | import Tour from "./components/tour"
2 | import { CardData } from "../../components/card/card"
3 | import { Slider } from "../../components/slider"
4 | import { CardImgLg01, CardImgLg02, CardImgLg03, CardImgMd01, CardImgMd02, CardImgMd03, CardImgMd04 } from "../../assets/imgs"
5 | import Banner from "./components/banner"
6 |
7 | const lgcards: CardData[] = [
8 | {name: "Frank Gehry", title: "Teaches Design and Architecture", ratings: 4.9, like: false, price: 300, img: CardImgLg01, size: 'lg'},
9 | {name: "Gordon Ramsay", title: "Take your cooking to the next level in Gordon’s masterclass", ratings: 4.9, like: true, price: 240, img: CardImgLg02, size: 'lg'},
10 | {name: "Lewis Hamilton", title: "Lewis Hamilton teaches a Winning Mindset", ratings: 4.9, like: false, price: 200, img: CardImgLg03, size: 'lg'},
11 | {name: "Lewis Hamilton", title: "Lewis Hamilton teaches a Winning Mindset", ratings: 4.9, like: false, price: 200, img: CardImgLg03, size: 'lg'},
12 | {name: "Gordon Ramsay", title: "Take your cooking to the next level in Gordon’s masterclass", ratings: 4.9, like: true, price: 240, img: CardImgLg02, size: 'lg'},
13 | {name: "Frank Gehry", title: "Teaches Design and Architecture", ratings: 4.9, like: false, price: 300, img: CardImgLg01, size: 'lg'},
14 | {name: "Gordon Ramsay", title: "Take your cooking to the next level in Gordon’s masterclass", ratings: 4.9, like: true, price: 240, img: CardImgLg02, size: 'lg'},
15 | {name: "Lewis Hamilton", title: "Lewis Hamilton teaches a Winning Mindset", ratings: 4.9, like: false, price: 200, img: CardImgLg03, size: 'lg'},
16 | {name: "Gordon Ramsay", title: "Take your cooking to the next level in Gordon’s masterclass", ratings: 4.9, like: true, price: 240, img: CardImgLg02, size: 'lg'},
17 | {name: "Frank Gehry", title: "Teaches Design and Architecture", ratings: 4.9, like: false, price: 300, img: CardImgLg01, size: 'lg'},
18 | {name: "Frank Gehry", title: "Teaches Design and Architecture", ratings: 4.9, like: false, price: 300, img: CardImgLg01, size: 'lg'},
19 | {name: "Gordon Ramsay", title: "Take your cooking to the next level in Gordon’s masterclass", ratings: 4.9, like: true, price: 240, img: CardImgLg02, size: 'lg'}
20 | ]
21 |
22 | const mdcards: CardData[] = [
23 | {name: "Office Newb", title: "Microsoft Excel - Excel from Beginner to Advanced", ratings: 4.7, like: true, price: 240, img: CardImgMd01, size: 'md'},
24 | {name: "Scrum Academy", title: "Productivity for Creators: Systems, Organization & Workflow", ratings: 4.7, like: false, price: 400, img: CardImgMd02, size: 'md'},
25 | {name: "Ran Segall", title: "The Complete Web Developer Course 3.0", ratings: 4.3, like: true, price: 140, img: CardImgMd03, size: 'md'},
26 | {name: "Phil Ebiner & Kevin Gardin", title: "Drawing Masterclass: Art, Sketching, Drawing Course", ratings: 4.3, like: false, price: 340, img: CardImgMd04, size: 'md'},
27 | {name: "Scrum Academy", title: "Productivity for Creators: Systems, Organization & Workflow", ratings: 4.7, like: false, price: 400, img: CardImgMd02, size: 'md'},
28 | {name: "Ran Segall", title: "The Complete Web Developer Course 3.0", ratings: 4.3, like: true, price: 140, img: CardImgMd03, size: 'md'},
29 | {name: "Scrum Academy", title: "Productivity for Creators: Systems, Organization & Workflow", ratings: 4.7, like: false, price: 400, img: CardImgMd02, size: 'md'},
30 | {name: "Ran Segall", title: "The Complete Web Developer Course 3.0", ratings: 4.3, like: true, price: 140, img: CardImgMd03, size: 'md'},
31 | {name: "Phil Ebiner & Kevin Gardin", title: "Drawing Masterclass: Art, Sketching, Drawing Course", ratings: 4.3, like: false, price: 340, img: CardImgMd04, size: 'md'},
32 | {name: "Scrum Academy", title: "Productivity for Creators: Systems, Organization & Workflow", ratings: 4.7, like: false, price: 400, img: CardImgMd02, size: 'md'},
33 | {name: "Phil Ebiner & Kevin Gardin", title: "Drawing Masterclass: Art, Sketching, Drawing Course", ratings: 4.3, like: false, price: 340, img: CardImgMd04, size: 'md'},
34 | {name: "Scrum Academy", title: "Productivity for Creators: Systems, Organization & Workflow", ratings: 4.7, like: false, price: 400, img: CardImgMd02, size: 'md'},
35 | {name: "Ran Segall", title: "The Complete Web Developer Course 3.0", ratings: 4.3, like: true, price: 140, img: CardImgMd03, size: 'md'},
36 | {name: "Scrum Academy", title: "Productivity for Creators: Systems, Organization & Workflow", ratings: 4.7, like: false, price: 400, img: CardImgMd02, size: 'md'},
37 | {name: "Ran Segall", title: "The Complete Web Developer Course 3.0", ratings: 4.3, like: true, price: 140, img: CardImgMd03, size: 'md'},
38 | {name: "Phil Ebiner & Kevin Gardin", title: "Drawing Masterclass: Art, Sketching, Drawing Course", ratings: 4.3, like: false, price: 340, img: CardImgMd04, size: 'md'},
39 | {name: "Scrum Academy", title: "Productivity for Creators: Systems, Organization & Workflow", ratings: 4.7, like: false, price: 400, img: CardImgMd02, size: 'md'},
40 | {name: "Ran Segall", title: "The Complete Web Developer Course 3.0", ratings: 4.3, like: true, price: 140, img: CardImgMd03, size: 'md'},
41 | {name: "Phil Ebiner & Kevin Gardin", title: "Drawing Masterclass: Art, Sketching, Drawing Course", ratings: 4.3, like: false, price: 340, img: CardImgMd04, size: 'md'},
42 | {name: "Scrum Academy", title: "Productivity for Creators: Systems, Organization & Workflow", ratings: 4.7, like: false, price: 400, img: CardImgMd02, size: 'md'}
43 | ]
44 |
45 | const OverView = () => {
46 |
47 | return (
48 | <>
49 |
105 |
107 |
108 |
111 | You’re ready to go!
109 | Your account has been created successfully.
110 |