SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

формат кода

Browse Source
This commit is contained in:
Nastya 2023-12-31 05:53:25 +03:00
parent a67d687bc4
commit eb4537cbba
395 changed files with 26230 additions and 18261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -24,6 +24,7 @@
"cypress-file-upload": "^5.0.8",
"cytoscape": "^3.26.0",
"cytoscape-popper": "^2.0.0",
"date-fns": "^3.0.6",
"dayjs": "^1.11.10",
"emoji-mart": "^5.5.2",
"file-saver": "^2.0.5",
@ -59,7 +60,7 @@
"test": "craco test",
"eject": "craco eject",
"cypress:open": "cypress open",
"code:format": "prettier ./public --write --ignore-unknown",
"code:format": "prettier ./src --write --ignore-unknown",
"prepare": "husky install"
},
"browserslist": {

274
src/App.tsx
View File

@ -6,7 +6,13 @@ import SigninDialog from "./pages/auth/Signin";
import SignupDialog from "./pages/auth/Signup";
import { ViewPage } from "./pages/ViewPublicationPage";
import { DesignPage } from "./pages/DesignPage/DesignPage";
import { Route, Routes, useLocation, useNavigate, Navigate } from "react-router-dom";
import {
Route,
Routes,
useLocation,
useNavigate,
Navigate,
} from "react-router-dom";
import "./index.css";
import ContactFormPage from "./pages/ContactFormPage/ContactFormPage";
import InstallQuiz from "./pages/InstallQuiz/InstallQuiz";
@ -17,8 +23,21 @@ import { ResultSettings } from "./pages/ResultPage/ResultSettings";
import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
import Main from "./pages/main";
import EditPage from "./pages/startPage/EditPage";
import { clearAuthToken, getMessageFromFetchError, useUserFetcher, UserAccount, makeRequest, devlog, createUserAccount } from "@frontend/kitui";
import { clearUserData, setUser, setUserAccount, useUserStore } from "@root/user";
import {
clearAuthToken,
getMessageFromFetchError,
useUserFetcher,
UserAccount,
makeRequest,
devlog,
createUserAccount,
} from "@frontend/kitui";
import {
clearUserData,
setUser,
setUserAccount,
useUserStore,
} from "@root/user";
import { enqueueSnackbar } from "notistack";
import PrivateRoute from "@ui_kit/PrivateRoute";
@ -26,122 +45,163 @@ import { Restore } from "./pages/startPage/Restore";
import { isAxiosError } from "axios";
import { useEffect, useLayoutEffect, useRef } from "react";
export function useUserAccountFetcher({ onError, onNewUserAccount, url, userId }: {
url: string;
userId: string | null;
onNewUserAccount: (response: UserAccount) => void;
onError?: (error: any) => void;
export function useUserAccountFetcher({
onError,
onNewUserAccount,
url,
userId,
}: {
url: string;
userId: string | null;
onNewUserAccount: (response: UserAccount) => void;
onError?: (error: any) => void;
}) {
const onNewUserAccountRef = useRef(onNewUserAccount);
const onErrorRef = useRef(onError);
useLayoutEffect(() => {
onNewUserAccountRef.current = onNewUserAccount;
onErrorRef.current = onError;
}, [onError, onNewUserAccount]);
useEffect(() => {
if (!userId) return;
const controller = new AbortController();
makeRequest<never, UserAccount>({
url,
contentType: true,
method: "GET",
useToken: true,
withCredentials: false,
signal: controller.signal,
}).then(result => {
devlog("User account", result);
onNewUserAccountRef.current(result);
}).catch(error => {
devlog("Error fetching user account", error);
if (isAxiosError(error) && error.response?.status === 404) {
createUserAccount(controller.signal, url.replace('get','create')).then(result => {
devlog("Created user account", result);
onNewUserAccountRef.current(result);
}).catch(error => {
devlog("Error creating user account", error);
onErrorRef.current?.(error);
});
} else {
onErrorRef.current?.(error);
}
});
return () => controller.abort();
}, [url, userId]);
const onNewUserAccountRef = useRef(onNewUserAccount);
const onErrorRef = useRef(onError);
useLayoutEffect(() => {
onNewUserAccountRef.current = onNewUserAccount;
onErrorRef.current = onError;
}, [onError, onNewUserAccount]);
useEffect(() => {
if (!userId) return;
const controller = new AbortController();
makeRequest<never, UserAccount>({
url,
contentType: true,
method: "GET",
useToken: true,
withCredentials: false,
signal: controller.signal,
})
.then((result) => {
devlog("User account", result);
onNewUserAccountRef.current(result);
})
.catch((error) => {
devlog("Error fetching user account", error);
if (isAxiosError(error) && error.response?.status === 404) {
createUserAccount(controller.signal, url.replace("get", "create"))
.then((result) => {
devlog("Created user account", result);
onNewUserAccountRef.current(result);
})
.catch((error) => {
devlog("Error creating user account", error);
onErrorRef.current?.(error);
});
} else {
onErrorRef.current?.(error);
}
});
return () => controller.abort();
}, [url, userId]);
}
dayjs.locale("ru");
const routeslink = [
{ path: "/list", page: <MyQuizzesFull />, header: false, sidebar: false },
{ path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true },
{ path: "/contacts", page: <ContactFormPage />, header: true, sidebar: true },
{ path: "/result", page: <Result />, header: true, sidebar: true },
{ path: "/settings", page: <ResultSettings />, header: true, sidebar: true },
{ path: "/list", page: <MyQuizzesFull />, header: false, sidebar: false },
{
path: "/questions/:quizId",
page: <QuestionsPage />,
header: true,
sidebar: true,
},
{ path: "/contacts", page: <ContactFormPage />, header: true, sidebar: true },
{ path: "/result", page: <Result />, header: true, sidebar: true },
{ path: "/settings", page: <ResultSettings />, header: true, sidebar: true },
] as const;
export default function App() {
const userId = useUserStore((state) => state.userId);
const location = useLocation();
const navigate = useNavigate();
const userId = useUserStore((state) => state.userId);
const location = useLocation();
const navigate = useNavigate();
useUserFetcher({
url: `https://hub.pena.digital/user/${userId}`,
userId,
onNewUser: setUser,
onError: (error) => {
const errorMessage = getMessageFromFetchError(error);
if (errorMessage) {
enqueueSnackbar(errorMessage);
clearUserData();
clearAuthToken();
}
},
});
useUserFetcher({
url: `https://hub.pena.digital/user/${userId}`,
userId,
onNewUser: setUser,
onError: (error) => {
const errorMessage = getMessageFromFetchError(error);
if (errorMessage) {
enqueueSnackbar(errorMessage);
clearUserData();
clearAuthToken();
}
},
});
useUserAccountFetcher({
url: "https://squiz.pena.digital/squiz/account/get",
userId,
onNewUserAccount: setUserAccount,
onError: (error) => {
const errorMessage = getMessageFromFetchError(error);
if (errorMessage) {
enqueueSnackbar(errorMessage);
clearUserData();
clearAuthToken();
navigate("/signin");
}
},
});
if (location.state?.redirectTo)
return <Navigate to={location.state.redirectTo} replace state={{ backgroundLocation: location }} />;
useUserAccountFetcher({
url: "https://squiz.pena.digital/squiz/account/get",
userId,
onNewUserAccount: setUserAccount,
onError: (error) => {
const errorMessage = getMessageFromFetchError(error);
if (errorMessage) {
enqueueSnackbar(errorMessage);
clearUserData();
clearAuthToken();
navigate("/signin");
}
},
});
if (location.state?.redirectTo)
return (
<>
<ContactFormModal />
{location.state?.backgroundLocation && (
<Routes>
<Route path="/signin" element={<SigninDialog />} />
<Route path="/signup" element={<SignupDialog />} />
<Route path="/restore" element={<Restore />} />
</Routes>
)}
<Routes location={location.state?.backgroundLocation || location}>
<Route path="/" element={<Landing />} />
<Route path="/signin" element={<Navigate to="/" replace state={{ redirectTo: "/signin" }} />} />
<Route path="/signup" element={<Navigate to="/" replace state={{ redirectTo: "/signup" }} />} />
<Route path="/restore" element={<Navigate to="/" replace state={{ redirectTo: "/restore" }} />} />
<Route element={<PrivateRoute />}>
{routeslink.map((e, i) => (
<Route key={i} path={e.path} element={<Main page={e.page} header={e.header} sidebar={e.sidebar} />} />
))}
<Route path="edit" element={<EditPage />} />
<Route path="crop" element={<ImageCrop />} />
<Route path="/view" element={<ViewPage />} />
<Route path="/design" element={<DesignPage />} />
</Route>
</Routes>
</>
<Navigate
to={location.state.redirectTo}
replace
state={{ backgroundLocation: location }}
/>
);
return (
<>
<ContactFormModal />
{location.state?.backgroundLocation && (
<Routes>
<Route path="/signin" element={<SigninDialog />} />
<Route path="/signup" element={<SignupDialog />} />
<Route path="/restore" element={<Restore />} />
</Routes>
)}
<Routes location={location.state?.backgroundLocation || location}>
<Route path="/" element={<Landing />} />
<Route
path="/signin"
element={
<Navigate to="/" replace state={{ redirectTo: "/signin" }} />
}
/>
<Route
path="/signup"
element={
<Navigate to="/" replace state={{ redirectTo: "/signup" }} />
}
/>
<Route
path="/restore"
element={
<Navigate to="/" replace state={{ redirectTo: "/restore" }} />
}
/>
<Route element={<PrivateRoute />}>
{routeslink.map((e, i) => (
<Route
key={i}
path={e.path}
element={
<Main page={e.page} header={e.header} sidebar={e.sidebar} />
}
/>
))}
<Route path="edit" element={<EditPage />} />
<Route path="crop" element={<ImageCrop />} />
<Route path="/view" element={<ViewPage />} />
<Route path="/design" element={<DesignPage />} />
</Route>
</Routes>
</>
);
}

5
src/api/auth.ts
View File

@ -1,6 +1,5 @@
import { makeRequest } from "@frontend/kitui";
import type {
LoginRequest,
LoginResponse,
@ -17,7 +16,7 @@ const apiUrl =
export async function register(
login: string,
password: string,
phoneNumber: string
phoneNumber: string,
): Promise<[RegisterResponse | null, string?]> {
try {
const registerResponse = await makeRequest<
@ -40,7 +39,7 @@ export async function register(
export async function login(
login: string,
password: string
password: string,
): Promise<[LoginResponse | null, string?]> {
try {
const loginResponse = await makeRequest<LoginRequest, LoginResponse>({

26
src/api/contactForm.ts
View File

@ -1,17 +1,19 @@
import axios from "axios";
const domen = window.location.hostname === "localhost" ? "squiz.pena.digital" : window.location.hostname
const domen =
window.location.hostname === "localhost"
? "squiz.pena.digital"
: window.location.hostname;
export function sendContactFormRequest(body: {
contact: string;
whoami: string;
contact: string;
whoami: string;
}) {
return axios(`https://${domen}/feedback/callme`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
data: body,
});
}
return axios(`https://${domen}/feedback/callme`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
data: body,
});
}

120
src/api/question.ts
View File

@ -1,79 +1,97 @@
import { makeRequest } from "@frontend/kitui";
import { CreateQuestionRequest } from "model/question/create";
import { RawQuestion } from "model/question/question";
import { GetQuestionListRequest, GetQuestionListResponse } from "@model/question/getList";
import { EditQuestionRequest, EditQuestionResponse } from "@model/question/edit";
import { DeleteQuestionRequest, DeleteQuestionResponse } from "@model/question/delete";
import { CopyQuestionRequest, CopyQuestionResponse } from "@model/question/copy";
import {
GetQuestionListRequest,
GetQuestionListResponse,
} from "@model/question/getList";
import {
EditQuestionRequest,
EditQuestionResponse,
} from "@model/question/edit";
import {
DeleteQuestionRequest,
DeleteQuestionResponse,
} from "@model/question/delete";
import {
CopyQuestionRequest,
CopyQuestionResponse,
} from "@model/question/copy";
import { replaceSpacesToEmptyLines } from "../utils/replaceSpacesToEmptyLines";
const baseUrl = process.env.NODE_ENV === "production" ? "/squiz" : "https://squiz.pena.digital/squiz";
const baseUrl =
process.env.NODE_ENV === "production"
? "/squiz"
: "https://squiz.pena.digital/squiz";
function createQuestion(body: CreateQuestionRequest) {
return makeRequest<CreateQuestionRequest, RawQuestion>({
url: `${baseUrl}/question/create`,
body,
method: "POST",
});
return makeRequest<CreateQuestionRequest, RawQuestion>({
url: `${baseUrl}/question/create`,
body,
method: "POST",
});
}
async function getQuestionList(body?: Partial<GetQuestionListRequest>) {
if (!body?.quiz_id) return null;
if (!body?.quiz_id) return null;
const response = await makeRequest<GetQuestionListRequest, GetQuestionListResponse>({
url: `${baseUrl}/question/getList`,
body: { ...defaultGetQuestionListBody, ...body },
method: "POST",
});
console.log(response.items)
const clearArrayFromEmptySpaceBlaBlaValue = response.items?.map(question => {
let data = question
for (let key in question) {
if (question[key] === " ") data[key] = ""
}
return data
})
const response = await makeRequest<
GetQuestionListRequest,
GetQuestionListResponse
>({
url: `${baseUrl}/question/getList`,
body: { ...defaultGetQuestionListBody, ...body },
method: "POST",
});
console.log(response.items);
const clearArrayFromEmptySpaceBlaBlaValue = response.items?.map(
(question) => {
let data = question;
for (let key in question) {
if (question[key] === " ") data[key] = "";
}
return data;
},
);
return replaceSpacesToEmptyLines(clearArrayFromEmptySpaceBlaBlaValue);
return replaceSpacesToEmptyLines(clearArrayFromEmptySpaceBlaBlaValue);
}
function editQuestion(body: EditQuestionRequest, signal?: AbortSignal) {
return makeRequest<EditQuestionRequest, EditQuestionResponse>({
url: `${baseUrl}/question/edit`,
body,
method: "PATCH",
signal,
});
return makeRequest<EditQuestionRequest, EditQuestionResponse>({
url: `${baseUrl}/question/edit`,
body,
method: "PATCH",
signal,
});
}
function copyQuestion(questionId: number, quizId: number) {
return makeRequest<CopyQuestionRequest, CopyQuestionResponse>({
url: `${baseUrl}/question/copy`,
body: { id: questionId, quiz_id: quizId },
method: "POST",
});
return makeRequest<CopyQuestionRequest, CopyQuestionResponse>({
url: `${baseUrl}/question/copy`,
body: { id: questionId, quiz_id: quizId },
method: "POST",
});
}
function deleteQuestion(id: number) {
return makeRequest<DeleteQuestionRequest, DeleteQuestionResponse>({
url: `${baseUrl}/question/delete`,
body: { id },
method: "DELETE",
});
return makeRequest<DeleteQuestionRequest, DeleteQuestionResponse>({
url: `${baseUrl}/question/delete`,
body: { id },
method: "DELETE",
});
}
export const questionApi = {
create: createQuestion,
getList: getQuestionList,
edit: editQuestion,
copy: copyQuestion,
delete: deleteQuestion,
create: createQuestion,
getList: getQuestionList,
edit: editQuestion,
copy: copyQuestion,
delete: deleteQuestion,
};
const defaultGetQuestionListBody: GetQuestionListRequest = {
"limit": 100,
"offset": 0,
"type": "",
limit: 100,
offset: 0,
type: "",
};

148
src/api/quiz.ts
View File

@ -8,111 +8,115 @@ import { GetQuizRequest, GetQuizResponse } from "model/quiz/get";
import { GetQuizListRequest, GetQuizListResponse } from "model/quiz/getList";
import { RawQuiz } from "model/quiz/quiz";
const baseUrl = process.env.NODE_ENV === "production" ? "/squiz" : "https://squiz.pena.digital/squiz";
const imagesUrl = process.env.NODE_ENV === "production" ? "/squizstorer" : "https://squiz.pena.digital/squizstorer";
const baseUrl =
process.env.NODE_ENV === "production"
? "/squiz"
: "https://squiz.pena.digital/squiz";
const imagesUrl =
process.env.NODE_ENV === "production"
? "/squizstorer"
: "https://squiz.pena.digital/squizstorer";
function createQuiz(body?: Partial<CreateQuizRequest>) {
return makeRequest<CreateQuizRequest, RawQuiz>({
url: `${baseUrl}/quiz/create`,
body: { ...defaultCreateQuizBody, ...body },
method: "POST",
});
return makeRequest<CreateQuizRequest, RawQuiz>({
url: `${baseUrl}/quiz/create`,
body: { ...defaultCreateQuizBody, ...body },
method: "POST",
});
}
async function getQuizList(body?: Partial<GetQuizListRequest>) {
const response = await makeRequest<GetQuizListRequest, GetQuizListResponse>({
url: `${baseUrl}/quiz/getList`,
body: { ...defaultGetQuizListBody, ...body },
method: "POST",
});
const response = await makeRequest<GetQuizListRequest, GetQuizListResponse>({
url: `${baseUrl}/quiz/getList`,
body: { ...defaultGetQuizListBody, ...body },
method: "POST",
});
return response.items;
return response.items;
}
function getQuiz(body?: Partial<GetQuizRequest>) {
return makeRequest<GetQuizRequest, GetQuizResponse>({
url: `${baseUrl}/quiz/get`,
body: { ...defaultGetQuizBody, ...body },
method: "GET",
});
return makeRequest<GetQuizRequest, GetQuizResponse>({
url: `${baseUrl}/quiz/get`,
body: { ...defaultGetQuizBody, ...body },
method: "GET",
});
}
async function editQuiz(body: EditQuizRequest, signal?: AbortSignal) {
return makeRequest<EditQuizRequest, EditQuizResponse>({
url: `${baseUrl}/quiz/edit`,
body,
method: "PATCH",
signal,
});
return makeRequest<EditQuizRequest, EditQuizResponse>({
url: `${baseUrl}/quiz/edit`,
body,
method: "PATCH",
signal,
});
}
function copyQuiz(id: number) {
return makeRequest<CopyQuizRequest, CopyQuizResponse>({
url: `${baseUrl}/quiz/copy`,
body: { id },
method: "POST",
});
return makeRequest<CopyQuizRequest, CopyQuizResponse>({
url: `${baseUrl}/quiz/copy`,
body: { id },
method: "POST",
});
}
function deleteQuiz(id: number) {
return makeRequest<DeleteQuizRequest, DeleteQuizResponse>({
url: `${baseUrl}/quiz/delete`,
body: { id },
method: "DELETE",
});
return makeRequest<DeleteQuizRequest, DeleteQuizResponse>({
url: `${baseUrl}/quiz/delete`,
body: { id },
method: "DELETE",
});
}
function addQuizImages(quizId: number, image: Blob) {
const formData = new FormData();
const formData = new FormData();
formData.append("quiz", quizId.toString());
formData.append("image", image);
formData.append("quiz", quizId.toString());
formData.append("image", image);
return makeRequest<FormData, { [key: string]: string; }>({
url: `${imagesUrl}/quiz/putImages`,
body: formData,
method: "PUT",
});
return makeRequest<FormData, { [key: string]: string }>({
url: `${imagesUrl}/quiz/putImages`,
body: formData,
method: "PUT",
});
}
export const quizApi = {
create: createQuiz,
getList: getQuizList,
get: getQuiz,
edit: editQuiz,
copy: copyQuiz,
delete: deleteQuiz,
addImages: addQuizImages,
create: createQuiz,
getList: getQuizList,
get: getQuiz,
edit: editQuiz,
copy: copyQuiz,
delete: deleteQuiz,
addImages: addQuizImages,
};
const defaultCreateQuizBody: CreateQuizRequest = {
"fingerprinting": true,
"repeatable": true,
"note_prevented": true,
"mail_notifications": false,
"unique_answers": true,
"name": "",
"description": "",
"config": JSON.stringify(defaultQuizConfig),
"status": "stop",
"limit": 0,
"due_to": 0,
"time_of_passing": 0,
"pausable": false,
"super": false,
"group_id": 0,
fingerprinting: true,
repeatable: true,
note_prevented: true,
mail_notifications: false,
unique_answers: true,
name: "",
description: "",
config: JSON.stringify(defaultQuizConfig),
status: "stop",
limit: 0,
due_to: 0,
time_of_passing: 0,
pausable: false,
super: false,
group_id: 0,
};
const defaultGetQuizBody: GetQuizRequest = {
"quiz_id": "string",
"limit": 0,
"page": 0,
"need_config": true,
quiz_id: "string",
limit: 0,
page: 0,
need_config: true,
};
const defaultGetQuizListBody: GetQuizListRequest = {
"limit": 100,
"offset": 0,
limit: 100,
offset: 0,
};

71
src/api/quizRelase.ts
View File

@ -1,45 +1,56 @@
import { makeRequest } from "@frontend/kitui";
import { CreateQuestionRequest } from "model/question/create";
import { RawQuestion } from "model/question/question";
import { GetQuestionListRequest, GetQuestionListResponse } from "@model/question/getList";
import { EditQuestionRequest, EditQuestionResponse } from "@model/question/edit";
import { DeleteQuestionRequest, DeleteQuestionResponse } from "@model/question/delete";
import { CopyQuestionRequest, CopyQuestionResponse } from "@model/question/copy";
import {
GetQuestionListRequest,
GetQuestionListResponse,
} from "@model/question/getList";
import {
EditQuestionRequest,
EditQuestionResponse,
} from "@model/question/edit";
import {
DeleteQuestionRequest,
DeleteQuestionResponse,
} from "@model/question/delete";
import {
CopyQuestionRequest,
CopyQuestionResponse,
} from "@model/question/copy";
const baseUrl = process.env.NODE_ENV === "production" ? "/squiz" : "https://squiz.pena.digital";
const baseUrl =
process.env.NODE_ENV === "production"
? "/squiz"
: "https://squiz.pena.digital";
function get(quizId: string) {
return makeRequest<any>({
url: `${baseUrl}/question/copy`,
body: { id: questionId, quiz_id: quizId },
method: "POST",
});
return makeRequest<any>({
url: `${baseUrl}/question/copy`,
body: { id: questionId, quiz_id: quizId },
method: "POST",
});
}
function quizRelase(quizId: string, status: "start"|"stop") {
return makeRequest<any>({
url: `https://squiz.pena.digital/answer/quiz/get`,
body: {
quiz_id: quizId,
limit: 100,
page: 0,
need_config: true,
},
method: "POST",
});
function quizRelase(quizId: string, status: "start" | "stop") {
return makeRequest<any>({
url: `https://squiz.pena.digital/answer/quiz/get`,
body: {
quiz_id: quizId,
limit: 100,
page: 0,
need_config: true,
},
method: "POST",
});
}
export const relaseApi = {
relase: quizRelase,
get: quizRelase,
relase: quizRelase,
get: quizRelase,
};
const defaultGetQuestionListBody: GetQuestionListRequest = {
"limit": 100,
"offset": 0,
"type": "",
limit: 100,
offset: 0,
type: "",
};

48
src/assets/LandingPict/titleIcon.tsx
View File

@ -1,25 +1,33 @@
import { Box } from "@mui/material";
interface Props {
color?: string;
color?: string;
}
export default function TitleIcon({color}:Props) {
return (
<Box
sx={{
height: "30px",
width: "33px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="33" height="30" viewBox="0 0 33 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Title" d="M33 0V5.11111C31.3704 5.40741 30.037 6.14815 29 7.33334C28.037 8.44445 27.2963 9.85185 26.7778 11.5556C26.3333 13.2593 26.1111 15.1111 26.1111 17.1111H32V30H19.6667V18.3333C19.6667 14.037 20.2963 10.6296 21.5556 8.11111C22.8889 5.5926 24.5556 3.70371 26.5556 2.44445C28.6296 1.18518 30.7778 0.37037 33 0ZM13.3333 0V5.11111C11.7037 5.40741 10.3704 6.14815 9.33333 7.33334C8.37037 8.44445 7.62963 9.85185 7.11111 11.5556C6.66667 13.2593 6.44444 15.1111 6.44444 17.1111H12.3333V30H0V18.3333C0 14.037 0.629629 10.6296 1.88889 8.11111C3.22222 5.5926 4.88889 3.70371 6.88889 2.44445C8.96296 1.18518 11.1111 0.37037 13.3333 0Z" fill="#7E2AEA"/>
</svg>
</Box>
);
}
export default function TitleIcon({ color }: Props) {
return (
<Box
sx={{
height: "30px",
width: "33px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="33"
height="30"
viewBox="0 0 33 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="Title"
d="M33 0V5.11111C31.3704 5.40741 30.037 6.14815 29 7.33334C28.037 8.44445 27.2963 9.85185 26.7778 11.5556C26.3333 13.2593 26.1111 15.1111 26.1111 17.1111H32V30H19.6667V18.3333C19.6667 14.037 20.2963 10.6296 21.5556 8.11111C22.8889 5.5926 24.5556 3.70371 26.5556 2.44445C28.6296 1.18518 30.7778 0.37037 33 0ZM13.3333 0V5.11111C11.7037 5.40741 10.3704 6.14815 9.33333 7.33334C8.37037 8.44445 7.62963 9.85185 7.11111 11.5556C6.66667 13.2593 6.44444 15.1111 6.44444 17.1111H12.3333V30H0V18.3333C0 14.037 0.629629 10.6296 1.88889 8.11111C3.22222 5.5926 4.88889 3.70371 6.88889 2.44445C8.96296 1.18518 11.1111 0.37037 13.3333 0Z"
fill="#7E2AEA"
/>
</svg>
</Box>
);
}

80
src/assets/icons/AlignCenterIcon.tsx
View File

@ -1,29 +1,63 @@
import { Box } from "@mui/material";
interface Props {
color: string;
color: string;
}
export default function AlignCenterIcon({ color }: Props) {
return (
<Box
sx={{
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 4V7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M16 25V28" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M16 14V18" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M23 7H9C8.44772 7 8 7.44772 8 8V13C8 13.5523 8.44772 14 9 14H23C23.5523 14 24 13.5523 24 13V8C24 7.44772 23.5523 7 23 7Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M26 18H6C5.44772 18 5 18.4477 5 19V24C5 24.5523 5.44772 25 6 25H26C26.5523 25 27 24.5523 27 24V19C27 18.4477 26.5523 18 26 18Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);
}
return (
<Box
sx={{
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16 4V7"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M16 25V28"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M16 14V18"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M23 7H9C8.44772 7 8 7.44772 8 8V13C8 13.5523 8.44772 14 9 14H23C23.5523 14 24 13.5523 24 13V8C24 7.44772 23.5523 7 23 7Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M26 18H6C5.44772 18 5 18.4477 5 19V24C5 24.5523 5.44772 25 6 25H26C26.5523 25 27 24.5523 27 24V19C27 18.4477 26.5523 18 26 18Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

64
src/assets/icons/AlignLeftIcon.tsx
View File

@ -1,27 +1,49 @@
import { Box } from "@mui/material";
interface Props {
color: string;
color: string;
}
export default function AlignLeftIcon({ color }: Props) {
return (
<Box
sx={{
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M5 5V27" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M22 7H10C9.44772 7 9 7.44772 9 8V13C9 13.5523 9.44772 14 10 14H22C22.5523 14 23 13.5523 23 13V8C23 7.44772 22.5523 7 22 7Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M27 18H10C9.44772 18 9 18.4477 9 19V24C9 24.5523 9.44772 25 10 25H27C27.5523 25 28 24.5523 28 24V19C28 18.4477 27.5523 18 27 18Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
>
<path
d="M5 5V27"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M22 7H10C9.44772 7 9 7.44772 9 8V13C9 13.5523 9.44772 14 10 14H22C22.5523 14 23 13.5523 23 13V8C23 7.44772 22.5523 7 22 7Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M27 18H10C9.44772 18 9 18.4477 9 19V24C9 24.5523 9.44772 25 10 25H27C27.5523 25 28 24.5523 28 24V19C28 18.4477 27.5523 18 27 18Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

64
src/assets/icons/AlignRightIcon.tsx
View File

@ -1,27 +1,49 @@
import { Box } from "@mui/material";
interface Props {
color: string;
color: string;
}
export default function AlignRightIcon({ color }: Props) {
return (
<Box
sx={{
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M27 5V27" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M10 14L22 14C22.5523 14 23 13.5523 23 13V8C23 7.44772 22.5523 7 22 7L10 7C9.44771 7 9 7.44772 9 8V13C9 13.5523 9.44771 14 10 14Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M22 18H5C4.44772 18 4 18.4477 4 19V24C4 24.5523 4.44772 25 5 25H22C22.5523 25 23 24.5523 23 24V19C23 18.4477 22.5523 18 22 18Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
>
<path
d="M27 5V27"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10 14L22 14C22.5523 14 23 13.5523 23 13V8C23 7.44772 22.5523 7 22 7L10 7C9.44771 7 9 7.44772 9 8V13C9 13.5523 9.44771 14 10 14Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M22 18H5C4.44772 18 4 18.4477 4 19V24C4 24.5523 4.44772 25 5 25H22C22.5523 25 23 24.5523 23 24V19C23 18.4477 22.5523 18 22 18Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

60
src/assets/icons/ArrowDownIcon.tsx
View File

@ -1,29 +1,41 @@
import {Box, SxProps, Theme, useTheme} from "@mui/material";
import { Box, SxProps, Theme, useTheme } from "@mui/material";
interface Color{
color?: string
interface Color {
color?: string;
}
export default function ArrowDownIcon(
props: any,
{color = "#7E2AEA"}: Color
props: any,
{ color = "#7E2AEA" }: Color,
) {
const theme = useTheme();
const theme = useTheme();
return (
<Box
{...props}
sx={{
top: "25% !important",
height: "24px",
width: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M19.5 9L12 16.5L4.5 9" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
{...props}
sx={{
top: "25% !important",
height: "24px",
width: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M19.5 9L12 16.5L4.5 9"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

52
src/assets/icons/ArrowLeftSP.tsx
View File

@ -1,27 +1,35 @@
import {Box, SxProps, Theme, useTheme} from "@mui/material";
import { Box, SxProps, Theme, useTheme } from "@mui/material";
interface Props {
right: boolean
right: boolean;
}
export default function ArrowLeftSP({right} : Props) {
const theme = useTheme();
export default function ArrowLeftSP({ right }: Props) {
const theme = useTheme();
return (
<Box
sx={{
height: "14px",
width: "19px",
display: "flex",
alignItems: "center",
justifyContent: "center",
transform: right ? "rotate(180deg)" : undefined
}}
>
<svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.12 10.808H5.24L0.855999 5.88L5.24 0.952H8.12L4.648 4.936H12.184V6.824H4.648L8.12 10.808Z" fill={theme.palette.brightPurple.main}/>
</svg>
</Box>
);
}
return (
<Box
sx={{
height: "14px",
width: "19px",
display: "flex",
alignItems: "center",
justifyContent: "center",
transform: right ? "rotate(180deg)" : undefined,
}}
>
<svg
width="13"
height="11"
viewBox="0 0 13 11"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8.12 10.808H5.24L0.855999 5.88L5.24 0.952H8.12L4.648 4.936H12.184V6.824H4.648L8.12 10.808Z"
fill={theme.palette.brightPurple.main}
/>
</svg>
</Box>
);
}

16
src/assets/icons/BackArrowIcon.tsx
View File

@ -11,8 +11,20 @@ export default function BackArrowIcon({ color = "black" }: { color?: string }) {
alignItems: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M20.25 12H3.75" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M20.25 12H3.75"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.5 5.25L3.75 12L10.5 18.75"
stroke={color}

8
src/assets/icons/BackButtonIcon.tsx
View File

@ -1,5 +1,11 @@
export const BackButtonIcon = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M7.86747 18C8.26104 18 9.9253 18 13.4337 18C17.8193 18 19 14.703 19 13.2194C19 11.7358 17.8193 8.93333 13.4337 8.93333C10.1773 8.93333 6.59726 8.93333 5 8.93333M5 8.93333L7.86747 6M5 8.93333L7.86747 11.8182"
stroke="white"

29
src/assets/icons/Burger.tsx
View File

@ -1,9 +1,30 @@
import { FC, SVGProps } from "react";
export const Burger: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M28 8.15039L3 8.15039" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
<path d="M28 16.1504H3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
<path d="M28 24.1504H3" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
<svg
{...props}
height="1em"
viewBox="0 0 30 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M28 8.15039L3 8.15039"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M28 16.1504H3"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M28 24.1504H3"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
);

97
src/assets/icons/CalendarIcon.tsx
View File

@ -1,9 +1,9 @@
import {Box, SxProps, Theme} from "@mui/material";
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
sx?: SxProps<Theme>
sx?: SxProps<Theme>;
}
export default function CalendarIcon({sx}:Props) {
export default function CalendarIcon({ sx }: Props) {
return (
<Box
sx={{
@ -23,20 +23,87 @@ export default function CalendarIcon({sx}:Props) {
"&:active rect": {
stroke: "#FB5607",
},
...sx
...sx,
}}
>
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="2.5" width="18" height="18" rx="5" stroke="#7E2AEA" strokeWidth="1.5" />
<path d="M1 7.5H19" stroke="#7E2AEA" strokeWidth="1.5" strokeLinejoin="round" />
<path d="M14.5 1L14.5 4" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M5.5 1L5.5 4" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.5 11.5H5.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9.5 11.5H10.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M14.5 11.5H15.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.5 15.5H5.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9.5 15.5H10.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M14.5 15.5H15.5" stroke="#7E2AEA" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<svg
width="20"
height="22"
viewBox="0 0 20 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="1"
y="2.5"
width="18"
height="18"
rx="5"
stroke="#7E2AEA"
strokeWidth="1.5"
/>
<path
d="M1 7.5H19"
stroke="#7E2AEA"
strokeWidth="1.5"
strokeLinejoin="round"
/>
<path
d="M14.5 1L14.5 4"
stroke="#7E2AEA"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5.5 1L5.5 4"
stroke="#7E2AEA"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.5 11.5H5.5"
stroke="#7E2AEA"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.5 11.5H10.5"
stroke="#7E2AEA"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.5 11.5H15.5"
stroke="#7E2AEA"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.5 15.5H5.5"
stroke="#7E2AEA"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.5 15.5H10.5"
stroke="#7E2AEA"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.5 15.5H15.5"
stroke="#7E2AEA"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);

59
src/assets/icons/ChartIcon.tsx
View File

@ -1,22 +1,45 @@
import { Box, useTheme } from "@mui/material";
export default function ChartIcon() {
const theme = useTheme();
const theme = useTheme();
return (
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M21 19.5H3V4.5" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M19.5 6L12 13.5L9 10.5L3 16.5" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M19.5 9.75V6H15.75" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M21 19.5H3V4.5"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M19.5 6L12 13.5L9 10.5L3 16.5"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M19.5 9.75V6H15.75"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

16
src/assets/icons/ChartPieIcon.tsx
View File

@ -18,7 +18,13 @@ export default function ChartPieIcon({ height, width, color }: Props) {
alignItems: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 35 35"
fill="none"
>
<path
d="M17.5 30.625C24.7487 30.625 30.625 24.7487 30.625 17.5C30.625 10.2513 24.7487 4.375 17.5 4.375C10.2513 4.375 4.375 10.2513 4.375 17.5C4.375 24.7487 10.2513 30.625 17.5 30.625Z"
stroke={color}
@ -26,7 +32,13 @@ export default function ChartPieIcon({ height, width, color }: Props) {
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M17.5 17.5V4.375" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path
d="M17.5 17.5V4.375"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M28.8613 10.9375L6.13867 24.0625"
stroke={color}

13
src/assets/icons/Checkbox.tsx
View File

@ -3,9 +3,12 @@ import { Box, useTheme } from "@mui/material";
interface CheckboxIconProps {
checked?: boolean;
color?: string;
};
}
export default function CheckboxIcon ({ checked = false, color = "#7E2AEA", }: CheckboxIconProps) {
export default function CheckboxIcon({
checked = false,
color = "#7E2AEA",
}: CheckboxIconProps) {
const theme = useTheme();
return (
@ -17,9 +20,7 @@ export default function CheckboxIcon ({ checked = false, color = "#7E2AEA", }: C
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: checked
? color
: "#F2F3F7",
backgroundColor: checked ? color : "#F2F3F7",
border: `1px solid #9A9AAF`,
}}
>
@ -41,4 +42,4 @@ export default function CheckboxIcon ({ checked = false, color = "#7E2AEA", }: C
)}
</Box>
);
};
}

71
src/assets/icons/CollapseMenuIcon.tsx
View File

@ -1,31 +1,50 @@
import { Box } from "@mui/material";
interface Props {
height: string;
width: string;
color: string;
transform: string;
height: string;
width: string;
color: string;
transform: string;
}
export default function CollapseMenuIcon({ height, width, color, transform }: Props) {
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
transform,
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M12.5 3L7.5 8L12.5 13" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
<path d="M7.5 3L2.5 8L7.5 13" stroke={color} strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
export default function CollapseMenuIcon({
height,
width,
color,
transform,
}: Props) {
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
transform,
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<path
d="M12.5 3L7.5 8L12.5 13"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7.5 3L2.5 8L7.5 13"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

104
src/assets/icons/ContactBookIcon.tsx
View File

@ -1,34 +1,80 @@
import { Box } from "@mui/material";
interface Props {
height: string;
width: string;
color: string;
height: string;
width: string;
color: string;
}
export default function ContactBookIcon({ height, width,color }: Props) {
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<path d="M18.5938 19.6875C21.01 19.6875 22.9688 17.7287 22.9688 15.3125C22.9688 12.8963 21.01 10.9375 18.5938 10.9375C16.1775 10.9375 14.2188 12.8963 14.2188 15.3125C14.2188 17.7287 16.1775 19.6875 18.5938 19.6875Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.375 14.7656H7.65625" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.375 9.29688H7.65625" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.375 20.2344H7.65625" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.375 25.7031H7.65625" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M12.0312 22.9688C12.7953 21.95 13.7862 21.1231 14.9252 20.5535C16.0642 19.984 17.3203 19.6875 18.5938 19.6875C19.8672 19.6875 21.1232 19.984 22.2623 20.5535C23.4013 21.1231 24.3922 21.95 25.1562 22.9688" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M29.5312 29.5312V5.46875C29.5312 4.86469 29.0416 4.375 28.4375 4.375L8.75 4.375C8.14594 4.375 7.65625 4.86469 7.65625 5.46875V29.5312C7.65625 30.1353 8.14594 30.625 8.75 30.625H28.4375C29.0416 30.625 29.5312 30.1353 29.5312 29.5312Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
export default function ContactBookIcon({ height, width, color }: Props) {
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 35 35"
fill="none"
>
<path
d="M18.5938 19.6875C21.01 19.6875 22.9688 17.7287 22.9688 15.3125C22.9688 12.8963 21.01 10.9375 18.5938 10.9375C16.1775 10.9375 14.2188 12.8963 14.2188 15.3125C14.2188 17.7287 16.1775 19.6875 18.5938 19.6875Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.375 14.7656H7.65625"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.375 9.29688H7.65625"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.375 20.2344H7.65625"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.375 25.7031H7.65625"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12.0312 22.9688C12.7953 21.95 13.7862 21.1231 14.9252 20.5535C16.0642 19.984 17.3203 19.6875 18.5938 19.6875C19.8672 19.6875 21.1232 19.984 22.2623 20.5535C23.4013 21.1231 24.3922 21.95 25.1562 22.9688"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M29.5312 29.5312V5.46875C29.5312 4.86469 29.0416 4.375 28.4375 4.375L8.75 4.375C8.14594 4.375 7.65625 4.86469 7.65625 5.46875V29.5312C7.65625 30.1353 8.14594 30.625 8.75 30.625H28.4375C29.0416 30.625 29.5312 30.1353 29.5312 29.5312Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

8
src/assets/icons/CountIcon.tsx
View File

@ -1,6 +1,12 @@
export default function CountIcon() {
return (
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
width="30"
height="31"
viewBox="0 0 30 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect y="0.8125" width="30" height="30" rx="15" fill="#EEE4FC" />
<path
d="M15.864 20.3125C15.7707 20.3125 15.6913 20.2845 15.626 20.2285C15.57 20.1632 15.542 20.0838 15.542 19.9905V12.1505L13.218 13.9425C13.1433 13.9985 13.064 14.0218 12.98 14.0125C12.896 14.0032 12.826 13.9612 12.77 13.8865L12.406 13.4245C12.35 13.3405 12.3267 13.2565 12.336 13.1725C12.3547 13.0885 12.4013 13.0185 12.476 12.9625L15.528 10.6105C15.5933 10.5638 15.654 10.5358 15.71 10.5265C15.766 10.5172 15.8267 10.5125 15.892 10.5125H16.606C16.6993 10.5125 16.774 10.5452 16.83 10.6105C16.886 10.6665 16.914 10.7412 16.914 10.8345V19.9905C16.914 20.0838 16.886 20.1632 16.83 20.2285C16.774 20.2845 16.6993 20.3125 16.606 20.3125H15.864Z"

41
src/assets/icons/CropIcon.tsx
View File

@ -1,10 +1,41 @@
import { FC, SVGProps } from "react";
export const CropIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M6 6H2.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M6 2.25V18H21.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18 15V6H9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18 21.75V18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M6 6H2.25"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6 2.25V18H21.75"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18 15V6H9"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18 21.75V18"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

9
src/assets/icons/CrossedEyeIcon.tsx
View File

@ -2,7 +2,14 @@ import { FC, SVGProps } from "react";
export const CrossedEyeIcon: FC<SVGProps<SVGSVGElement>> = (props) => {
return (
<svg {...props} width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
{...props}
width="30"
height="30"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect y="0.8125" width="30" height="30" rx="6" fill="#FFF" />
<path
d="M7.5 7.5625L22.5 24.0625"

8
src/assets/icons/EmojiIocns.tsx
View File

@ -1,7 +1,13 @@
import { FC, SVGProps } from "react";
export const EmojiIcons: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
{...props}
height="1em"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 23C13.0949 22.9993 14.1837 22.8371 15.2313 22.5187L23 12C23 9.82441 22.3549 7.69767 21.1462 5.88873C19.9375 4.07979 18.2195 2.66989 16.2095 1.83733C14.1995 1.00477 11.9878 0.786929 9.85401 1.21137C7.72022 1.6358 5.76021 2.68345 4.22183 4.22183C2.68345 5.76021 1.6358 7.72022 1.21137 9.85401C0.786929 11.9878 1.00477 14.1995 1.83733 16.2095C2.66989 18.2195 4.07979 19.9375 5.88873 21.1462C7.69767 22.3549 9.82441 23 12 23Z"
stroke="currentColor"

45
src/assets/icons/ExpandIcon.tsx
View File

@ -1,17 +1,42 @@
import { useTheme } from "@mui/material";
interface Props {
isExpanded?: boolean;
isExpanded?: boolean;
}
export default function ExpandIcon({ isExpanded }: Props) {
const theme = useTheme();
const theme = useTheme();
return (
<svg style={{ transform: isExpanded ? "rotate(180deg)" : undefined }} xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none">
<path d="M16 28.7949C22.6274 28.7949 28 23.4223 28 16.7949C28 10.1675 22.6274 4.79492 16 4.79492C9.37258 4.79492 4 10.1675 4 16.7949C4 23.4223 9.37258 28.7949 16 28.7949Z" stroke={isExpanded ? theme.palette.orange.main : theme.palette.brightPurple.main} strokeWidth="2" strokeMiterlimit="10" />
<path d="M20.5 15.2949L16 20.2949L11.5 15.2949" stroke={isExpanded ? theme.palette.orange.main : theme.palette.brightPurple.main} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
return (
<svg
style={{ transform: isExpanded ? "rotate(180deg)" : undefined }}
xmlns="http://www.w3.org/2000/svg"
width="32"
height="33"
viewBox="0 0 32 33"
fill="none"
>
<path
d="M16 28.7949C22.6274 28.7949 28 23.4223 28 16.7949C28 10.1675 22.6274 4.79492 16 4.79492C9.37258 4.79492 4 10.1675 4 16.7949C4 23.4223 9.37258 28.7949 16 28.7949Z"
stroke={
isExpanded
? theme.palette.orange.main
: theme.palette.brightPurple.main
}
strokeWidth="2"
strokeMiterlimit="10"
/>
<path
d="M20.5 15.2949L16 20.2949L11.5 15.2949"
stroke={
isExpanded
? theme.palette.orange.main
: theme.palette.brightPurple.main
}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

8
src/assets/icons/EyeIcon.tsx
View File

@ -13,7 +13,13 @@ export default function EyeIcon() {
alignItems: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
>
<path
d="M9 3.9375C3.375 3.9375 1.125 9 1.125 9C1.125 9 3.375 14.0625 9 14.0625C14.625 14.0625 16.875 9 16.875 9C16.875 9 14.625 3.9375 9 3.9375Z"
stroke={theme.palette.brightPurple.main}

70
src/assets/icons/FlowArrowIcon.tsx
View File

@ -1,30 +1,52 @@
import { Box } from "@mui/material";
interface Props {
height: string;
width: string;
color: string;
height: string;
width: string;
color: string;
}
export default function FlowArrowIcon({ height, width, color }: Props) {
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<path d="M6.01562 27.8906C8.12984 27.8906 9.84375 26.1767 9.84375 24.0625C9.84375 21.9483 8.12984 20.2344 6.01562 20.2344C3.90141 20.2344 2.1875 21.9483 2.1875 24.0625C2.1875 26.1767 3.90141 27.8906 6.01562 27.8906Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M27.3438 5.46875L32.8125 10.9375L27.3438 16.4062" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9.84375 24.0625H10.9375C12.678 24.0625 14.3472 23.3711 15.5779 22.1404C16.8086 20.9097 17.5 19.2405 17.5 17.5C17.5 15.7595 18.1914 14.0903 19.4221 12.8596C20.6528 11.6289 22.322 10.9375 24.0625 10.9375H32.8125" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 35 35"
fill="none"
>
<path
d="M6.01562 27.8906C8.12984 27.8906 9.84375 26.1767 9.84375 24.0625C9.84375 21.9483 8.12984 20.2344 6.01562 20.2344C3.90141 20.2344 2.1875 21.9483 2.1875 24.0625C2.1875 26.1767 3.90141 27.8906 6.01562 27.8906Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M27.3438 5.46875L32.8125 10.9375L27.3438 16.4062"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.84375 24.0625H10.9375C12.678 24.0625 14.3472 23.3711 15.5779 22.1404C16.8086 20.9097 17.5 19.2405 17.5 17.5C17.5 15.7595 18.1914 14.0903 19.4221 12.8596C20.6528 11.6289 22.322 10.9375 24.0625 10.9375H32.8125"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

62
src/assets/icons/GearIcon.tsx
View File

@ -1,29 +1,45 @@
import { Box } from "@mui/material";
interface Props {
height: string;
width: string;
color: string;
height: string;
width: string;
color: string;
}
export default function GearIcon({ height, width, color }: Props) {
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<path d="M17.5 24.0625C21.1244 24.0625 24.0625 21.1244 24.0625 17.5C24.0625 13.8756 21.1244 10.9375 17.5 10.9375C13.8756 10.9375 10.9375 13.8756 10.9375 17.5C10.9375 21.1244 13.8756 24.0625 17.5 24.0625Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M26.9884 11.0332C27.3176 11.5044 27.6057 12.003 27.8498 12.5234L31.3908 14.4922C31.8329 16.4725 31.8376 18.5255 31.4044 20.5078L27.8498 22.4766C27.6057 22.997 27.3176 23.4956 26.9884 23.9668L27.0568 28.0273C25.5561 29.3949 23.7799 30.4251 21.8478 31.0488L18.3615 28.957C17.788 28.9981 17.2123 28.9981 16.6388 28.957L13.1662 31.0352C11.2279 30.4228 9.4459 29.3965 7.94351 28.0273L8.01187 23.9805C7.68548 23.5027 7.39747 22.9998 7.15054 22.4766L3.60952 20.5078C3.16737 18.5275 3.16271 16.4745 3.59585 14.4922L7.15054 12.5234C7.39456 12.003 7.68272 11.5044 8.01187 11.0332L7.94351 6.97266C9.4442 5.60515 11.2204 4.57488 13.1525 3.95117L16.6388 6.04297C17.2123 6.00195 17.788 6.00195 18.3615 6.04297L21.8341 3.96484C23.7724 4.5772 25.5544 5.60349 27.0568 6.97266L26.9884 11.0332Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 35 35"
fill="none"
>
<path
d="M17.5 24.0625C21.1244 24.0625 24.0625 21.1244 24.0625 17.5C24.0625 13.8756 21.1244 10.9375 17.5 10.9375C13.8756 10.9375 10.9375 13.8756 10.9375 17.5C10.9375 21.1244 13.8756 24.0625 17.5 24.0625Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M26.9884 11.0332C27.3176 11.5044 27.6057 12.003 27.8498 12.5234L31.3908 14.4922C31.8329 16.4725 31.8376 18.5255 31.4044 20.5078L27.8498 22.4766C27.6057 22.997 27.3176 23.4956 26.9884 23.9668L27.0568 28.0273C25.5561 29.3949 23.7799 30.4251 21.8478 31.0488L18.3615 28.957C17.788 28.9981 17.2123 28.9981 16.6388 28.957L13.1662 31.0352C11.2279 30.4228 9.4459 29.3965 7.94351 28.0273L8.01187 23.9805C7.68548 23.5027 7.39747 22.9998 7.15054 22.4766L3.60952 20.5078C3.16737 18.5275 3.16271 16.4745 3.59585 14.4922L7.15054 12.5234C7.39456 12.003 7.68272 11.5044 8.01187 11.0332L7.94351 6.97266C9.4442 5.60515 11.2204 4.57488 13.1525 3.95117L16.6388 6.04297C17.2123 6.00195 17.788 6.00195 18.3615 6.04297L21.8341 3.96484C23.7724 4.5772 25.5544 5.60349 27.0568 6.97266L26.9884 11.0332Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

8
src/assets/icons/ImageAddIcons.tsx
View File

@ -1,7 +1,13 @@
import { FC, SVGProps } from "react";
export const ImageAddIcons: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 27 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
{...props}
height="1em"
viewBox="0 0 27 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24.9583 1H2.04167C1.46637 1 1 1.44772 1 2V20C1 20.5523 1.46637 21 2.04167 21H24.9583C25.5336 21 26 20.5523 26 20V2C26 1.44772 25.5336 1 24.9583 1Z"
stroke="currentColor"

16
src/assets/icons/Info.tsx
View File

@ -5,16 +5,18 @@ type InfoProps = {
height?: number;
sx?: SxProps;
onClick?: any;
className?: string
className?: string;
};
export default function Info({ width = 20, height = 20, sx, onClick, className }: InfoProps) {
export default function Info({
width = 20,
height = 20,
sx,
onClick,
className,
}: InfoProps) {
return (
<IconButton
sx={sx}
className={className}
onClick={onClick}
>
<IconButton sx={sx} className={className} onClick={onClick}>
<svg
width={width}
height={height}

8
src/assets/icons/InfoIcon.tsx
View File

@ -20,7 +20,13 @@ export default function InfoIcon({ sx }: InfoIconProps) {
...sx,
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke={theme.palette.brightPurple.main}

73
src/assets/icons/InstallQuizIcon/LDownButton.tsx
View File

@ -1,30 +1,55 @@
import { Box } from "@mui/material";
interface Props {
color: string;
color: string;
}
export default function LDownButton({ color }: Props) {
return (
<Box
sx={{
height: "130px",
width: "200px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="204" height="134" viewBox="0 0 204 134" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.25" y="1.25" width="201.5" height="131.5" rx="6.75" stroke={color} strokeWidth="1.5"/>
<rect x="7.5" y="62.5" width="49" height="64" rx="3.5" fill={color} stroke={color}/>
<path d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z" fill="#F2F3F7" stroke={color} strokeWidth="1.5"/>
<circle cx="169.5" cy="8" r="2.5" fill={color}/>
<circle cx="177.5" cy="8" r="2.5" fill={color}/>
<circle cx="185.5" cy="8" r="2.5" fill={color}/>
</svg>
</Box>
);
}
return (
<Box
sx={{
height: "130px",
width: "200px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="204"
height="134"
viewBox="0 0 204 134"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="1.25"
y="1.25"
width="201.5"
height="131.5"
rx="6.75"
stroke={color}
strokeWidth="1.5"
/>
<rect
x="7.5"
y="62.5"
width="49"
height="64"
rx="3.5"
fill={color}
stroke={color}
/>
<path
d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z"
fill="#F2F3F7"
stroke={color}
strokeWidth="1.5"
/>
<circle cx="169.5" cy="8" r="2.5" fill={color} />
<circle cx="177.5" cy="8" r="2.5" fill={color} />
<circle cx="185.5" cy="8" r="2.5" fill={color} />
</svg>
</Box>
);
}

73
src/assets/icons/InstallQuizIcon/RDownButton.tsx
View File

@ -1,30 +1,55 @@
import { Box } from "@mui/material";
interface Props {
color: string;
color: string;
}
export default function RDownButton({ color }: Props) {
return (
<Box
sx={{
height: "130px",
width: "200px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="204" height="134" viewBox="0 0 204 134" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.25" y="1.25" width="201.5" height="131.5" rx="6.75" stroke={color} strokeWidth="1.5"/>
<rect x="147.5" y="62.5" width="49" height="64" rx="3.5" fill={color} stroke={color}/>
<path d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z" fill="#F2F3F7" stroke={color} strokeWidth="1.5"/>
<circle cx="169.5" cy="8" r="2.5" fill={color}/>
<circle cx="177.5" cy="8" r="2.5" fill={color}/>
<circle cx="185.5" cy="8" r="2.5" fill={color}/>
</svg>
</Box>
);
}
return (
<Box
sx={{
height: "130px",
width: "200px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="204"
height="134"
viewBox="0 0 204 134"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="1.25"
y="1.25"
width="201.5"
height="131.5"
rx="6.75"
stroke={color}
strokeWidth="1.5"
/>
<rect
x="147.5"
y="62.5"
width="49"
height="64"
rx="3.5"
fill={color}
stroke={color}
/>
<path
d="M202 14.75H202.75V14V8C202.75 4.27208 199.728 1.25 196 1.25H8C4.27208 1.25 1.25 4.27208 1.25 8V14V14.75H2H202Z"
fill="#F2F3F7"
stroke={color}
strokeWidth="1.5"
/>
<circle cx="169.5" cy="8" r="2.5" fill={color} />
<circle cx="177.5" cy="8" r="2.5" fill={color} />
<circle cx="185.5" cy="8" r="2.5" fill={color} />
</svg>
</Box>
);
}

70
src/assets/icons/LayoutCenteredIcon.tsx
View File

@ -1,26 +1,56 @@
import { Box } from "@mui/material";
interface Props {
color: string;
color: string;
}
export default function LayoutCenteredIcon({ color }: Props) {
return (
<Box sx={{
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M23.3333 9H8.66667C8.29848 9 8 9.1567 8 9.35V15.65C8 15.8433 8.29848 16 8.66667 16H23.3333C23.7015 16 24 15.8433 24 15.65V9.35C24 9.1567 23.7015 9 23.3333 9Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M13 22L18 22" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M8 19H24" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
>
<path
d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M23.3333 9H8.66667C8.29848 9 8 9.1567 8 9.35V15.65C8 15.8433 8.29848 16 8.66667 16H23.3333C23.7015 16 24 15.8433 24 15.65V9.35C24 9.1567 23.7015 9 23.3333 9Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13 22L18 22"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 19H24"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

70
src/assets/icons/LayoutExpandedIcon.tsx
View File

@ -1,26 +1,56 @@
import { Box } from "@mui/material";
interface Props {
color: string;
color: string;
}
export default function LayoutExpandedIcon({ color }: Props) {
return (
<Box sx={{
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18 12L24 12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18 16L24 16" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18 20L21 20" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
>
<path
d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18 12L24 12"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18 16L24 16"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18 20L21 20"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

82
src/assets/icons/LayoutIcon.tsx
View File

@ -1,33 +1,61 @@
import { Box, useTheme } from "@mui/material";
interface Props {
bgcolor?: string;
height: string;
width: string;
color: string;
bgcolor?: string;
height: string;
width: string;
color: string;
}
export default function LayoutIconOld({ bgcolor, height, width, color }: Props) {
const theme = useTheme();
export default function LayoutIconOld({
bgcolor,
height,
width,
color,
}: Props) {
const theme = useTheme();
return (
<Box
sx={{
backgroundColor: bgcolor,
height,
width,
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "6px",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<path d="M14.2188 14.2188V28.4375" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M4.375 14.2188H30.625" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M29.5312 6.5625H5.46875C4.86469 6.5625 4.375 7.05219 4.375 7.65625V27.3438C4.375 27.9478 4.86469 28.4375 5.46875 28.4375H29.5312C30.1353 28.4375 30.625 27.9478 30.625 27.3438V7.65625C30.625 7.05219 30.1353 6.5625 29.5312 6.5625Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
backgroundColor: bgcolor,
height,
width,
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "6px",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 35 35"
fill="none"
>
<path
d="M14.2188 14.2188V28.4375"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.375 14.2188H30.625"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M29.5312 6.5625H5.46875C4.86469 6.5625 4.375 7.05219 4.375 7.65625V27.3438C4.375 27.9478 4.86469 28.4375 5.46875 28.4375H29.5312C30.1353 28.4375 30.625 27.9478 30.625 27.3438V7.65625C30.625 7.05219 30.1353 6.5625 29.5312 6.5625Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

82
src/assets/icons/LayoutIconBig.tsx
View File

@ -1,33 +1,61 @@
import { Box, useTheme } from "@mui/material";
interface Props {
bgcolor?: string;
height: string;
width: string;
color: string;
bgcolor?: string;
height: string;
width: string;
color: string;
}
export default function LayoutIconBig({ bgcolor, height, width, color }: Props) {
const theme = useTheme();
export default function LayoutIconBig({
bgcolor,
height,
width,
color,
}: Props) {
const theme = useTheme();
return (
<Box
sx={{
backgroundColor: bgcolor,
height,
width,
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "6px",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="47" height="40" viewBox="0 0 47 40" fill="none">
<path d="M17.875 14.125V38.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M1 14.125H46" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M44.125 1H2.875C1.83947 1 1 1.83947 1 2.875V36.625C1 37.6605 1.83947 38.5 2.875 38.5H44.125C45.1605 38.5 46 37.6605 46 36.625V2.875C46 1.83947 45.1605 1 44.125 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
backgroundColor: bgcolor,
height,
width,
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "6px",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="47"
height="40"
viewBox="0 0 47 40"
fill="none"
>
<path
d="M17.875 14.125V38.5"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1 14.125H46"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M44.125 1H2.875C1.83947 1 1 1.83947 1 2.875V36.625C1 37.6605 1.83947 38.5 2.875 38.5H44.125C45.1605 38.5 46 37.6605 46 36.625V2.875C46 1.83947 45.1605 1 44.125 1Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

78
src/assets/icons/LayoutStandartIcon.tsx
View File

@ -1,27 +1,63 @@
import { Box } from "@mui/material";
interface Props {
color: string;
color: string;
}
export default function LayoutStandartIcon({ color }: Props) {
return (
<Box sx={{
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18 26L18 6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M21 12L25 12" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M21 16L25 16" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M21 20L23 20" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
>
<path
d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18 26L18 6"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M21 12L25 12"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M21 16L25 16"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M21 20L23 20"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

71
src/assets/icons/LinkIcon.tsx
View File

@ -1,31 +1,54 @@
import { Box, useTheme } from "@mui/material";
interface Props {
color: string;
bgcolor: string;
color: string;
bgcolor: string;
}
export default function LinkIcon({ color, bgcolor }: Props) {
const theme = useTheme();
const theme = useTheme();
return (
<Box
sx={{
bgcolor,
borderRadius: "6px",
height: "36px",
width: "36px",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M8.8219 15.1781L15.1781 8.8125" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M13.5938 16.7719L10.9406 19.425C10.5227 19.843 10.0265 20.1745 9.48035 20.4007C8.93425 20.6269 8.34893 20.7434 7.75783 20.7434C6.56404 20.7434 5.41915 20.2691 4.57502 19.425C3.73088 18.5809 3.25665 17.436 3.25665 16.2422C3.25665 15.0484 3.73088 13.9035 4.57502 13.0594L7.22814 10.4062" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M16.7719 13.5938L19.425 10.9406C20.2691 10.0965 20.7434 8.9516 20.7434 7.75781C20.7434 6.56403 20.2691 5.41914 19.425 4.575C18.5809 3.73087 17.436 3.25664 16.2422 3.25664C15.0484 3.25664 13.9035 3.73087 13.0594 4.575L10.4062 7.22813" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
bgcolor,
borderRadius: "6px",
height: "36px",
width: "36px",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M8.8219 15.1781L15.1781 8.8125"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.5938 16.7719L10.9406 19.425C10.5227 19.843 10.0265 20.1745 9.48035 20.4007C8.93425 20.6269 8.34893 20.7434 7.75783 20.7434C6.56404 20.7434 5.41915 20.2691 4.57502 19.425C3.73088 18.5809 3.25665 17.436 3.25665 16.2422C3.25665 15.0484 3.73088 13.9035 4.57502 13.0594L7.22814 10.4062"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M16.7719 13.5938L19.425 10.9406C20.2691 10.0965 20.7434 8.9516 20.7434 7.75781C20.7434 6.56403 20.2691 5.41914 19.425 4.575C18.5809 3.73087 17.436 3.25664 16.2422 3.25664C15.0484 3.25664 13.9035 3.73087 13.0594 4.575L10.4062 7.22813"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

9
src/assets/icons/LinkSimple.tsx
View File

@ -1,7 +1,14 @@
import { FC, SVGProps } from "react";
export const LinkSimple: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M8.82031 15.1781L15.1766 8.8125"
stroke="currentColor"

40
src/assets/icons/LogoutIcon.tsx
View File

@ -1,14 +1,34 @@
import { useTheme } from "@mui/material";
export default function LogoutIcon() {
const theme = useTheme();
const theme = useTheme();
return (
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5601 12.3V15.25C12.5601 16.3546 11.6646 17.25 10.5601 17.25H3.69596C2.59139 17.25 1.69596 16.3546 1.69596 15.25V2.75C1.69596 1.64543 2.59139 0.75 3.69596 0.75H10.5601C11.6646 0.75 12.5601 1.64543 12.5601 2.75V5.7" stroke={theme.palette.grey2.main} strokeWidth="1.5" strokeLinecap="round" />
<path d="M15.067 11.475L16.8532 9.71165C17.2498 9.32011 17.2498 8.6799 16.8532 8.28836L15.067 6.52501" stroke={theme.palette.grey2.main} strokeWidth="1.5" strokeLinecap="round" />
<path d="M16.7384 9L6.70996 9" stroke={theme.palette.grey2.main} strokeWidth="1.5" strokeLinecap="round" />
</svg>
);
}
return (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.5601 12.3V15.25C12.5601 16.3546 11.6646 17.25 10.5601 17.25H3.69596C2.59139 17.25 1.69596 16.3546 1.69596 15.25V2.75C1.69596 1.64543 2.59139 0.75 3.69596 0.75H10.5601C11.6646 0.75 12.5601 1.64543 12.5601 2.75V5.7"
stroke={theme.palette.grey2.main}
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M15.067 11.475L16.8532 9.71165C17.2498 9.32011 17.2498 8.6799 16.8532 8.28836L15.067 6.52501"
stroke={theme.palette.grey2.main}
strokeWidth="1.5"
strokeLinecap="round"
/>
<path
d="M16.7384 9L6.70996 9"
stroke={theme.palette.grey2.main}
strokeWidth="1.5"
strokeLinecap="round"
/>
</svg>
);
}

62
src/assets/icons/MegaphoneIcon.tsx
View File

@ -1,29 +1,45 @@
import { Box } from "@mui/material";
interface Props {
height: string;
width: string;
color: string;
height: string;
width: string;
color: string;
}
export default function MegaphoneIcon({ height, width, color }: Props) {
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<path d="M14.2187 10.9375V27.8496C14.2204 28.0314 14.1761 28.2106 14.0901 28.3707C14.0041 28.5309 13.879 28.6667 13.7265 28.7656L12.2226 29.7637C12.0769 29.8609 11.91 29.9218 11.7359 29.9411C11.5618 29.9604 11.3856 29.9376 11.2221 29.8747C11.0586 29.8117 10.9127 29.7104 10.7965 29.5792C10.6804 29.4481 10.5974 29.291 10.5546 29.1211L8.74995 21.875" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M8.75 21.875C7.2996 21.875 5.9086 21.2988 4.88301 20.2732C3.85742 19.2477 3.28125 17.8567 3.28125 16.4063C3.28125 14.9558 3.85742 13.5648 4.88301 12.5393C5.9086 11.5137 7.2996 10.9375 8.75 10.9375H14.2188C14.2188 10.9375 21.6699 10.9375 28.834 4.93555C28.9933 4.80369 29.1868 4.71971 29.3919 4.69336C29.5971 4.66701 29.8055 4.69937 29.993 4.78667C30.1805 4.87398 30.3394 5.01266 30.4512 5.18663C30.5631 5.36059 30.6234 5.56271 30.625 5.76953V27.043C30.6234 27.2498 30.5631 27.4519 30.4512 27.6259C30.3394 27.7998 30.1805 27.9385 29.993 28.0258C29.8055 28.1131 29.5971 28.1455 29.3919 28.1191C29.1868 28.0928 28.9933 28.0088 28.834 27.877C21.6699 21.875 14.2188 21.875 14.2188 21.875H8.75Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 35 35"
fill="none"
>
<path
d="M14.2187 10.9375V27.8496C14.2204 28.0314 14.1761 28.2106 14.0901 28.3707C14.0041 28.5309 13.879 28.6667 13.7265 28.7656L12.2226 29.7637C12.0769 29.8609 11.91 29.9218 11.7359 29.9411C11.5618 29.9604 11.3856 29.9376 11.2221 29.8747C11.0586 29.8117 10.9127 29.7104 10.7965 29.5792C10.6804 29.4481 10.5974 29.291 10.5546 29.1211L8.74995 21.875"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8.75 21.875C7.2996 21.875 5.9086 21.2988 4.88301 20.2732C3.85742 19.2477 3.28125 17.8567 3.28125 16.4063C3.28125 14.9558 3.85742 13.5648 4.88301 12.5393C5.9086 11.5137 7.2996 10.9375 8.75 10.9375H14.2188C14.2188 10.9375 21.6699 10.9375 28.834 4.93555C28.9933 4.80369 29.1868 4.71971 29.3919 4.69336C29.5971 4.66701 29.8055 4.69937 29.993 4.78667C30.1805 4.87398 30.3394 5.01266 30.4512 5.18663C30.5631 5.36059 30.6234 5.56271 30.625 5.76953V27.043C30.6234 27.2498 30.5631 27.4519 30.4512 27.6259C30.3394 27.7998 30.1805 27.9385 29.993 28.0258C29.8055 28.1131 29.5971 28.1455 29.3919 28.1191C29.1868 28.0928 28.9933 28.0088 28.834 27.877C21.6699 21.875 14.2188 21.875 14.2188 21.875H8.75Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

8
src/assets/icons/MenuIcon.tsx
View File

@ -1,6 +1,12 @@
export default function MenuIcon() {
return (
<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
width="30"
height="31"
viewBox="0 0 30 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect y="0.8125" width="30" height="30" rx="6" fill="#333647" />
<path
d="M10.5 8.8125C11.3284 8.8125 12 8.14093 12 7.3125C12 6.48407 11.3284 5.8125 10.5 5.8125C9.67157 5.8125 9 6.48407 9 7.3125C9 8.14093 9.67157 8.8125 10.5 8.8125Z"

69
src/assets/icons/MobilePhoneIcon.tsx
View File

@ -1,30 +1,53 @@
import { Box, useTheme } from "@mui/material";
interface Props {
bgcolor: string;
bgcolor: string;
}
export default function MobilePhoneIcon({ bgcolor }: Props) {
const theme = useTheme();
const theme = useTheme();
return (
<Box
sx={{
height: "36px",
width: "36px",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: bgcolor,
borderRadius: "6px",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M16.5 2.25H7.5C6.67157 2.25 6 2.92157 6 3.75V20.25C6 21.0784 6.67157 21.75 7.5 21.75H16.5C17.3284 21.75 18 21.0784 18 20.25V3.75C18 2.92157 17.3284 2.25 16.5 2.25Z" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M6 5.25H18" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M6 18.75H18" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
height: "36px",
width: "36px",
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: bgcolor,
borderRadius: "6px",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M16.5 2.25H7.5C6.67157 2.25 6 2.92157 6 3.75V20.25C6 21.0784 6.67157 21.75 7.5 21.75H16.5C17.3284 21.75 18 21.0784 18 20.25V3.75C18 2.92157 17.3284 2.25 16.5 2.25Z"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6 5.25H18"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6 18.75H18"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

76
src/assets/icons/NameplateLogoFQDark.tsx
View File

File diff suppressed because one or more lines are too long

57
src/assets/icons/NumberThree.tsx
View File

@ -1,26 +1,41 @@
import { Box } from "@mui/material";
interface Props {
color: string;
color: string;
}
export default function NumberThree({color}:Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.1875C16.9706 21.1875 21 17.1581 21 12.1875C21 7.21694 16.9706 3.1875 12 3.1875C7.02944 3.1875 3 7.21694 3 12.1875C3 17.1581 7.02944 21.1875 12 21.1875Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10"/>
<path d="M9.75 8.0625H14.25L11.625 11.8125C12.0567 11.8125 12.4817 11.919 12.8624 12.1225C13.243 12.326 13.5677 12.6203 13.8075 12.9792C14.0473 13.3381 14.1949 13.7507 14.2372 14.1803C14.2795 14.6099 14.2152 15.0433 14.05 15.4421C13.8848 15.8409 13.6238 16.1928 13.2901 16.4666C12.9564 16.7405 12.5603 16.9278 12.137 17.0121C11.7136 17.0963 11.276 17.0748 10.8629 16.9495C10.4498 16.8242 10.074 16.599 9.76875 16.2937" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);
}
export default function NumberThree({ color }: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 21.1875C16.9706 21.1875 21 17.1581 21 12.1875C21 7.21694 16.9706 3.1875 12 3.1875C7.02944 3.1875 3 7.21694 3 12.1875C3 17.1581 7.02944 21.1875 12 21.1875Z"
stroke={color}
strokeWidth="1.5"
strokeMiterlimit="10"
/>
<path
d="M9.75 8.0625H14.25L11.625 11.8125C12.0567 11.8125 12.4817 11.919 12.8624 12.1225C13.243 12.326 13.5677 12.6203 13.8075 12.9792C14.0473 13.3381 14.1949 13.7507 14.2372 14.1803C14.2795 14.6099 14.2152 15.0433 14.05 15.4421C13.8848 15.8409 13.6238 16.1928 13.2901 16.4666C12.9564 16.7405 12.5603 16.9278 12.137 17.0121C11.7136 17.0963 11.276 17.0748 10.8629 16.9495C10.4498 16.8242 10.074 16.599 9.76875 16.2937"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

57
src/assets/icons/NumberTwo.tsx
View File

@ -1,26 +1,41 @@
import { Box } from "@mui/material";
interface Props {
color: string;
color: string;
}
export default function NumberTwo({color}:Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21.1875C16.9706 21.1875 21 17.1581 21 12.1875C21 7.21694 16.9706 3.1875 12 3.1875C7.02944 3.1875 3 7.21694 3 12.1875C3 17.1581 7.02944 21.1875 12 21.1875Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10"/>
<path d="M9.92813 9.06402C10.1303 8.58652 10.4913 8.19352 10.9499 7.9515C11.4085 7.70948 11.9366 7.6333 12.4449 7.73584C12.9533 7.83839 13.4106 8.11336 13.7395 8.51426C14.0684 8.91515 14.2487 9.41735 14.25 9.9359C14.252 10.3839 14.118 10.822 13.8656 11.1921V11.1921L9.75 16.6859H14.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);
}
export default function NumberTwo({ color }: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="24"
height="25"
viewBox="0 0 24 25"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 21.1875C16.9706 21.1875 21 17.1581 21 12.1875C21 7.21694 16.9706 3.1875 12 3.1875C7.02944 3.1875 3 7.21694 3 12.1875C3 17.1581 7.02944 21.1875 12 21.1875Z"
stroke={color}
strokeWidth="1.5"
strokeMiterlimit="10"
/>
<path
d="M9.92813 9.06402C10.1303 8.58652 10.4913 8.19352 10.9499 7.9515C11.4085 7.70948 11.9366 7.6333 12.4449 7.73584C12.9533 7.83839 13.4106 8.11336 13.7395 8.51426C14.0684 8.91515 14.2487 9.41735 14.25 9.9359C14.252 10.3839 14.118 10.822 13.8656 11.1921V11.1921L9.75 16.6859H14.25"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

57
src/assets/icons/OneIconBorder.tsx
View File

@ -1,26 +1,41 @@
import { Box } from "@mui/material";
interface Props {
color: string;
color: string;
}
export default function OneIconBorder({color}:Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10"/>
<path d="M10.125 9.375L12.375 7.875V16.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);
}
export default function OneIconBorder({ color }: Props) {
return (
<Box
sx={{
height: "30px",
width: "30px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
stroke={color}
strokeWidth="1.5"
strokeMiterlimit="10"
/>
<path
d="M10.125 9.375L12.375 7.875V16.5"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

86
src/assets/icons/PencilCircleIcon.tsx
View File

@ -1,32 +1,66 @@
import { Box } from "@mui/material";
interface Props {
height: string;
width: string;
color: string;
height: string;
width: string;
color: string;
}
export default function PencilCircleIcon({ height, width, color }: Props) {
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<path d="M17.5 30.625C24.7487 30.625 30.625 24.7487 30.625 17.5C30.625 10.2513 24.7487 4.375 17.5 4.375C10.2513 4.375 4.375 10.2513 4.375 17.5C4.375 24.7487 10.2513 30.625 17.5 30.625Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M24.0625 28.875V24.0625L17.5 9.84375L10.9375 24.0625V28.875" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M17.5 26.25C17.5 25.3798 17.8457 24.5452 18.4611 23.9298C19.0764 23.3145 19.911 22.9688 20.7812 22.9688C21.6515 22.9688 22.4861 23.3145 23.1014 23.9298C23.7168 24.5452 24.0625 25.3798 24.0625 26.25" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M17.5 30.625V26.25C17.5 25.3798 17.1543 24.5452 16.5389 23.9298C15.9236 23.3145 15.089 22.9688 14.2188 22.9688C13.3485 22.9688 12.5139 23.3145 11.8986 23.9298C11.2832 24.5452 10.9375 25.3798 10.9375 26.25" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M13.9727 17.5H21.0273" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 35 35"
fill="none"
>
<path
d="M17.5 30.625C24.7487 30.625 30.625 24.7487 30.625 17.5C30.625 10.2513 24.7487 4.375 17.5 4.375C10.2513 4.375 4.375 10.2513 4.375 17.5C4.375 24.7487 10.2513 30.625 17.5 30.625Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M24.0625 28.875V24.0625L17.5 9.84375L10.9375 24.0625V28.875"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.5 26.25C17.5 25.3798 17.8457 24.5452 18.4611 23.9298C19.0764 23.3145 19.911 22.9688 20.7812 22.9688C21.6515 22.9688 22.4861 23.3145 23.1014 23.9298C23.7168 24.5452 24.0625 25.3798 24.0625 26.25"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.5 30.625V26.25C17.5 25.3798 17.1543 24.5452 16.5389 23.9298C15.9236 23.3145 15.089 22.9688 14.2188 22.9688C13.3485 22.9688 12.5139 23.3145 11.8986 23.9298C11.2832 24.5452 10.9375 25.3798 10.9375 26.25"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.9727 17.5H21.0273"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

67
src/assets/icons/PencilIcon.tsx
View File

@ -1,23 +1,52 @@
import { Box, useTheme } from "@mui/material";
export default function PencilIcon() {
const theme = useTheme();
const theme = useTheme();
return (
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M8.69063 20.25H4.5C4.30109 20.25 4.11033 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V15.3094C3.74966 15.212 3.76853 15.1155 3.80553 15.0254C3.84253 14.9353 3.89694 14.8534 3.96563 14.7844L15.2156 3.53437C15.2854 3.46351 15.3686 3.40724 15.4603 3.36882C15.5521 3.33041 15.6505 3.31063 15.75 3.31063C15.8495 3.31063 15.9479 3.33041 16.0397 3.36882C16.1314 3.40724 16.2146 3.46351 16.2844 3.53437L20.4656 7.71562C20.5365 7.78541 20.5928 7.8686 20.6312 7.96034C20.6696 8.05208 20.6894 8.15054 20.6894 8.25C20.6894 8.34946 20.6696 8.44792 20.6312 8.53966C20.5928 8.6314 20.5365 8.71459 20.4656 8.78437L9.21563 20.0344C9.1466 20.1031 9.06469 20.1575 8.9746 20.1945C8.88452 20.2315 8.78802 20.2503 8.69063 20.25V20.25Z" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M12.75 6L18 11.25" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M15.375 8.625L6.375 17.625" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M8.95312 20.2031L3.79688 15.0469" stroke={theme.palette.brightPurple.main} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M8.69063 20.25H4.5C4.30109 20.25 4.11033 20.171 3.96967 20.0303C3.82902 19.8897 3.75 19.6989 3.75 19.5V15.3094C3.74966 15.212 3.76853 15.1155 3.80553 15.0254C3.84253 14.9353 3.89694 14.8534 3.96563 14.7844L15.2156 3.53437C15.2854 3.46351 15.3686 3.40724 15.4603 3.36882C15.5521 3.33041 15.6505 3.31063 15.75 3.31063C15.8495 3.31063 15.9479 3.33041 16.0397 3.36882C16.1314 3.40724 16.2146 3.46351 16.2844 3.53437L20.4656 7.71562C20.5365 7.78541 20.5928 7.8686 20.6312 7.96034C20.6696 8.05208 20.6894 8.15054 20.6894 8.25C20.6894 8.34946 20.6696 8.44792 20.6312 8.53966C20.5928 8.6314 20.5365 8.71459 20.4656 8.78437L9.21563 20.0344C9.1466 20.1031 9.06469 20.1575 8.9746 20.1945C8.88452 20.2315 8.78802 20.2503 8.69063 20.25V20.25Z"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12.75 6L18 11.25"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M15.375 8.625L6.375 17.625"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8.95312 20.2031L3.79688 15.0469"
stroke={theme.palette.brightPurple.main}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

54
src/assets/icons/PuzzlePieceIcon.tsx
View File

@ -1,28 +1,38 @@
import { Box } from "@mui/material";
interface Props {
height: string;
width: string;
color: string;
height: string;
width: string;
color: string;
}
export default function PuzzlePieceIcon({ height, width, color }: Props) {
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<path d="M8.74976 29.5313C8.45968 29.5313 8.18148 29.416 7.97636 29.2109C7.77125 29.0058 7.65601 28.7276 7.65601 28.4375V22.5996C7.05597 22.8859 6.39095 23.0085 5.72828 22.9551C5.16718 22.9139 4.62206 22.7495 4.13172 22.4736C3.64138 22.1977 3.21788 21.8172 2.89135 21.359C2.56483 20.9008 2.3433 20.3763 2.24255 19.8228C2.14179 19.2693 2.16429 18.7004 2.30842 18.1565C2.45256 17.6127 2.7148 17.1073 3.07648 16.6763C3.43816 16.2454 3.89038 15.8994 4.40097 15.6631C4.91155 15.4268 5.46795 15.306 6.03056 15.3092C6.59316 15.3124 7.14815 15.4396 7.65601 15.6816V9.84376C7.65601 9.55368 7.77125 9.27548 7.97636 9.07036C8.18148 8.86524 8.45968 8.75001 8.74976 8.75001H15.1345C14.8483 8.14996 14.7257 7.48494 14.7791 6.82227C14.8203 6.26117 14.9847 5.71605 15.2606 5.22571C15.5364 4.73538 15.917 4.31187 16.3752 3.98535C16.8333 3.65882 17.3578 3.4373 17.9113 3.33654C18.4649 3.23579 19.0338 3.25828 19.5776 3.40242C20.1215 3.54656 20.6268 3.8088 21.0578 4.17047C21.4888 4.53215 21.8347 4.98438 22.071 5.49496C22.3073 6.00555 22.4282 6.56194 22.425 7.12455C22.4218 7.68716 22.2946 8.24214 22.0525 8.75001H28.4373C28.7273 8.75001 29.0055 8.86524 29.2107 9.07036C29.4158 9.27548 29.531 9.55368 29.531 9.84376V15.6816C28.931 15.3954 28.2659 15.2728 27.6033 15.3262C27.0422 15.3674 26.4971 15.5318 26.0067 15.8077C25.5164 16.0835 25.0929 16.4641 24.7664 16.9223C24.4398 17.3804 24.2183 17.9049 24.1176 18.4585C24.0168 19.012 24.0393 19.5809 24.1834 20.1247C24.3276 20.6686 24.5898 21.174 24.9515 21.6049C25.3132 22.0359 25.7654 22.3818 26.276 22.6181C26.7866 22.8544 27.343 22.9753 27.9056 22.9721C28.4682 22.9689 29.0231 22.8417 29.531 22.5996V28.4375C29.531 28.7276 29.4158 29.0058 29.2107 29.2109C29.0055 29.416 28.7273 29.5313 28.4373 29.5313H8.74976Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 35 35"
fill="none"
>
<path
d="M8.74976 29.5313C8.45968 29.5313 8.18148 29.416 7.97636 29.2109C7.77125 29.0058 7.65601 28.7276 7.65601 28.4375V22.5996C7.05597 22.8859 6.39095 23.0085 5.72828 22.9551C5.16718 22.9139 4.62206 22.7495 4.13172 22.4736C3.64138 22.1977 3.21788 21.8172 2.89135 21.359C2.56483 20.9008 2.3433 20.3763 2.24255 19.8228C2.14179 19.2693 2.16429 18.7004 2.30842 18.1565C2.45256 17.6127 2.7148 17.1073 3.07648 16.6763C3.43816 16.2454 3.89038 15.8994 4.40097 15.6631C4.91155 15.4268 5.46795 15.306 6.03056 15.3092C6.59316 15.3124 7.14815 15.4396 7.65601 15.6816V9.84376C7.65601 9.55368 7.77125 9.27548 7.97636 9.07036C8.18148 8.86524 8.45968 8.75001 8.74976 8.75001H15.1345C14.8483 8.14996 14.7257 7.48494 14.7791 6.82227C14.8203 6.26117 14.9847 5.71605 15.2606 5.22571C15.5364 4.73538 15.917 4.31187 16.3752 3.98535C16.8333 3.65882 17.3578 3.4373 17.9113 3.33654C18.4649 3.23579 19.0338 3.25828 19.5776 3.40242C20.1215 3.54656 20.6268 3.8088 21.0578 4.17047C21.4888 4.53215 21.8347 4.98438 22.071 5.49496C22.3073 6.00555 22.4282 6.56194 22.425 7.12455C22.4218 7.68716 22.2946 8.24214 22.0525 8.75001H28.4373C28.7273 8.75001 29.0055 8.86524 29.2107 9.07036C29.4158 9.27548 29.531 9.55368 29.531 9.84376V15.6816C28.931 15.3954 28.2659 15.2728 27.6033 15.3262C27.0422 15.3674 26.4971 15.5318 26.0067 15.8077C25.5164 16.0835 25.0929 16.4641 24.7664 16.9223C24.4398 17.3804 24.2183 17.9049 24.1176 18.4585C24.0168 19.012 24.0393 19.5809 24.1834 20.1247C24.3276 20.6686 24.5898 21.174 24.9515 21.6049C25.3132 22.0359 25.7654 22.3818 26.276 22.6181C26.7866 22.8544 27.343 22.9753 27.9056 22.9721C28.4682 22.9689 29.0231 22.8417 29.531 22.5996V28.4375C29.531 28.7276 29.4158 29.0058 29.2107 29.2109C29.0055 29.416 28.7273 29.5313 28.4373 29.5313H8.74976Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

69
src/assets/icons/QuestionIcon.tsx
View File

@ -1,30 +1,49 @@
import { Box } from "@mui/material";
interface Props {
height: string;
width: string;
color: string;
height: string;
width: string;
color: string;
}
export default function QuestionIcon({ height, width ,color}: Props) {
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<path d="M7.45117 27.5488C6.19336 26.291 7.02734 23.6523 6.38477 22.1074C5.74219 20.5625 3.28125 19.209 3.28125 17.5C3.28125 15.791 5.71484 14.4922 6.38477 12.8926C7.05469 11.293 6.19336 8.70898 7.45117 7.45117C8.70898 6.19336 11.3477 7.02734 12.8926 6.38477C14.4375 5.74219 15.791 3.28125 17.5 3.28125C19.209 3.28125 20.5078 5.71484 22.1074 6.38477C23.707 7.05469 26.291 6.19336 27.5488 7.45117C28.8066 8.70898 27.9727 11.3477 28.6152 12.8926C29.2578 14.4375 31.7188 15.791 31.7188 17.5C31.7188 19.209 29.2852 20.5078 28.6152 22.1074C27.9453 23.707 28.8066 26.291 27.5488 27.5488C26.291 28.8066 23.6523 27.9727 22.1074 28.6152C20.5625 29.2578 19.209 31.7188 17.5 31.7188C15.791 31.7188 14.4922 29.2852 12.8926 28.6152C11.293 27.9453 8.70898 28.8066 7.45117 27.5488Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M17.5 26.25C18.4061 26.25 19.1406 25.5155 19.1406 24.6094C19.1406 23.7033 18.4061 22.9688 17.5 22.9688C16.5939 22.9688 15.8594 23.7033 15.8594 24.6094C15.8594 25.5155 16.5939 26.25 17.5 26.25Z" fill={color} />
<path d="M17.5 19.6875V18.5938C18.2571 18.5938 18.9973 18.3692 19.6268 17.9486C20.2563 17.528 20.747 16.9301 21.0367 16.2306C21.3265 15.5311 21.4023 14.7614 21.2546 14.0188C21.1069 13.2762 20.7423 12.5941 20.2069 12.0587C19.6715 11.5234 18.9894 11.1588 18.2468 11.0111C17.5042 10.8633 16.7345 10.9392 16.035 11.2289C15.3355 11.5186 14.7377 12.0093 14.317 12.6388C13.8964 13.2684 13.6719 14.0085 13.6719 14.7656" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
export default function QuestionIcon({ height, width, color }: Props) {
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 35 35"
fill="none"
>
<path
d="M7.45117 27.5488C6.19336 26.291 7.02734 23.6523 6.38477 22.1074C5.74219 20.5625 3.28125 19.209 3.28125 17.5C3.28125 15.791 5.71484 14.4922 6.38477 12.8926C7.05469 11.293 6.19336 8.70898 7.45117 7.45117C8.70898 6.19336 11.3477 7.02734 12.8926 6.38477C14.4375 5.74219 15.791 3.28125 17.5 3.28125C19.209 3.28125 20.5078 5.71484 22.1074 6.38477C23.707 7.05469 26.291 6.19336 27.5488 7.45117C28.8066 8.70898 27.9727 11.3477 28.6152 12.8926C29.2578 14.4375 31.7188 15.791 31.7188 17.5C31.7188 19.209 29.2852 20.5078 28.6152 22.1074C27.9453 23.707 28.8066 26.291 27.5488 27.5488C26.291 28.8066 23.6523 27.9727 22.1074 28.6152C20.5625 29.2578 19.209 31.7188 17.5 31.7188C15.791 31.7188 14.4922 29.2852 12.8926 28.6152C11.293 27.9453 8.70898 28.8066 7.45117 27.5488Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.5 26.25C18.4061 26.25 19.1406 25.5155 19.1406 24.6094C19.1406 23.7033 18.4061 22.9688 17.5 22.9688C16.5939 22.9688 15.8594 23.7033 15.8594 24.6094C15.8594 25.5155 16.5939 26.25 17.5 26.25Z"
fill={color}
/>
<path
d="M17.5 19.6875V18.5938C18.2571 18.5938 18.9973 18.3692 19.6268 17.9486C20.2563 17.528 20.747 16.9301 21.0367 16.2306C21.3265 15.5311 21.4023 14.7614 21.2546 14.0188C21.1069 13.2762 20.7423 12.5941 20.2069 12.0587C19.6715 11.5234 18.9894 11.1588 18.2468 11.0111C17.5042 10.8633 16.7345 10.9392 16.035 11.2289C15.3355 11.5186 14.7377 12.0093 14.317 12.6388C13.8964 13.2684 13.6719 14.0085 13.6719 14.7656"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

54
src/assets/icons/SearchIcon.tsx
View File

@ -1,22 +1,38 @@
import { Box } from "@mui/material";
export default function SearchIcon() {
return (
<Box
sx={{
height: "24px",
width: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z" stroke="#101828" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M16.4438 16.4437L21.0001 21" stroke="#101828" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
height: "24px",
width: "24px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M10.875 18.75C15.2242 18.75 18.75 15.2242 18.75 10.875C18.75 6.52576 15.2242 3 10.875 3C6.52576 3 3 6.52576 3 10.875C3 15.2242 6.52576 18.75 10.875 18.75Z"
stroke="#101828"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M16.4438 16.4437L21.0001 21"
stroke="#101828"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

37
src/assets/icons/SendIcon.tsx
View File

@ -1,12 +1,27 @@
export default function SendIcon() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 45 45" fill="none">
<circle cx="22.5" cy="22.5" r="22.5" fill="#944FEE" />
<path d="M33.8489 22.1816L15.9232 12.1415C15.7722 12.0581 15.5994 12.0227 15.4277 12.0399C15.2561 12.0571 15.0938 12.1263 14.9624 12.2381C14.831 12.3498 14.7368 12.499 14.6923 12.6657C14.6478 12.8323 14.6551 13.0086 14.7133 13.171L18.0883 22.638C18.1627 22.8218 18.1627 23.0273 18.0883 23.2111L14.7133 32.6781C14.6551 32.8405 14.6478 33.0167 14.6923 33.1834C14.7368 33.3501 14.831 33.4992 14.9624 33.611C15.0938 33.7228 15.2561 33.7919 15.4277 33.8092C15.5994 33.8264 15.7722 33.791 15.9232 33.7076L33.8489 23.6675C33.9816 23.594 34.0922 23.4864 34.1693 23.3558C34.2463 23.2251 34.2869 23.0762 34.2869 22.9245C34.2869 22.7729 34.2463 22.624 34.1693 22.4933C34.0922 22.3627 33.9816 22.255 33.8489 22.1816V22.1816Z" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18.1943 22.9248H24.9868" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="45"
height="45"
viewBox="0 0 45 45"
fill="none"
>
<circle cx="22.5" cy="22.5" r="22.5" fill="#944FEE" />
<path
d="M33.8489 22.1816L15.9232 12.1415C15.7722 12.0581 15.5994 12.0227 15.4277 12.0399C15.2561 12.0571 15.0938 12.1263 14.9624 12.2381C14.831 12.3498 14.7368 12.499 14.6923 12.6657C14.6478 12.8323 14.6551 13.0086 14.7133 13.171L18.0883 22.638C18.1627 22.8218 18.1627 23.0273 18.0883 23.2111L14.7133 32.6781C14.6551 32.8405 14.6478 33.0167 14.6923 33.1834C14.7368 33.3501 14.831 33.4992 14.9624 33.611C15.0938 33.7228 15.2561 33.7919 15.4277 33.8092C15.5994 33.8264 15.7722 33.791 15.9232 33.7076L33.8489 23.6675C33.9816 23.594 34.0922 23.4864 34.1693 23.3558C34.2463 23.2251 34.2869 23.0762 34.2869 22.9245C34.2869 22.7729 34.2463 22.624 34.1693 22.4933C34.0922 22.3627 33.9816 22.255 33.8489 22.1816V22.1816Z"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18.1943 22.9248H24.9868"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

59
src/assets/icons/TagIcon.tsx
View File

@ -1,29 +1,42 @@
import { Box } from "@mui/material";
interface Props {
height: string;
width: string;
color: string;
height: string;
width: string;
color: string;
}
export default function TagIcon({ height, width, color }: Props) {
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 35 35" fill="none">
<path d="M16.7753 3.54101L5.74206 5.74218L3.54089 16.7754C3.5064 16.9515 3.51579 17.1335 3.56825 17.3052C3.6207 17.4768 3.71461 17.633 3.84167 17.7598L18.1151 32.0332C18.2157 32.1361 18.3359 32.2179 18.4685 32.2738C18.6012 32.3296 18.7436 32.3584 18.8876 32.3584C19.0315 32.3584 19.174 32.3296 19.3066 32.2738C19.4393 32.2179 19.5594 32.1361 19.66 32.0332L32.0331 19.6602C32.136 19.5596 32.2178 19.4394 32.2736 19.3067C32.3295 19.1741 32.3583 19.0316 32.3583 18.8877C32.3583 18.7438 32.3295 18.6013 32.2736 18.4686C32.2178 18.336 32.136 18.2158 32.0331 18.1152L17.7596 3.84179C17.6328 3.71473 17.4767 3.62083 17.305 3.56837C17.1334 3.51591 16.9514 3.50652 16.7753 3.54101V3.54101Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M11.4844 13.125C12.3905 13.125 13.125 12.3905 13.125 11.4844C13.125 10.5783 12.3905 9.84375 11.4844 9.84375C10.5783 9.84375 9.84375 10.5783 9.84375 11.4844C9.84375 12.3905 10.5783 13.125 11.4844 13.125Z" fill={color} />
</svg>
</Box>
);
}
return (
<Box
sx={{
borderRadius: "6px",
height,
width,
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="35"
height="35"
viewBox="0 0 35 35"
fill="none"
>
<path
d="M16.7753 3.54101L5.74206 5.74218L3.54089 16.7754C3.5064 16.9515 3.51579 17.1335 3.56825 17.3052C3.6207 17.4768 3.71461 17.633 3.84167 17.7598L18.1151 32.0332C18.2157 32.1361 18.3359 32.2179 18.4685 32.2738C18.6012 32.3296 18.7436 32.3584 18.8876 32.3584C19.0315 32.3584 19.174 32.3296 19.3066 32.2738C19.4393 32.2179 19.5594 32.1361 19.66 32.0332L32.0331 19.6602C32.136 19.5596 32.2178 19.4394 32.2736 19.3067C32.3295 19.1741 32.3583 19.0316 32.3583 18.8877C32.3583 18.7438 32.3295 18.6013 32.2736 18.4686C32.2178 18.336 32.136 18.2158 32.0331 18.1152L17.7596 3.84179C17.6328 3.71473 17.4767 3.62083 17.305 3.56837C17.1334 3.51591 16.9514 3.50652 16.7753 3.54101V3.54101Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11.4844 13.125C12.3905 13.125 13.125 12.3905 13.125 11.4844C13.125 10.5783 12.3905 9.84375 11.4844 9.84375C10.5783 9.84375 9.84375 10.5783 9.84375 11.4844C9.84375 12.3905 10.5783 13.125 11.4844 13.125Z"
fill={color}
/>
</svg>
</Box>
);
}

16
src/assets/icons/TreeStructure.tsx
View File

@ -1,5 +1,11 @@
export const TreeStructure = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19" fill="none">
<svg
xmlns="http://www.w3.org/2000/svg"
width="19"
height="19"
viewBox="0 0 19 19"
fill="none"
>
<path
d="M4.72656 7.53125H1.91406C1.6034 7.53125 1.35156 7.78309 1.35156 8.09375V10.9062C1.35156 11.2169 1.6034 11.4688 1.91406 11.4688H4.72656C5.03722 11.4688 5.28906 11.2169 5.28906 10.9062V8.09375C5.28906 7.78309 5.03722 7.53125 4.72656 7.53125Z"
stroke="#9A9AAF"
@ -21,7 +27,13 @@ export const TreeStructure = () => (
stroke-linecap="round"
stroke-linejoin="round"
/>
<path d="M5.28906 9.5H8.10156" stroke="#9A9AAF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
<path
d="M5.28906 9.5H8.10156"
stroke="#9A9AAF"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M10.9141 14.3849H9.78908C9.56721 14.3858 9.34736 14.3428 9.1422 14.2583C8.93704 14.1738 8.75064 14.0496 8.59376 13.8927C8.43688 13.7358 8.31261 13.5494 8.22814 13.3443C8.14366 13.1391 8.10065 12.9192 8.10158 12.6974V6.30264C8.10065 6.08078 8.14366 5.86092 8.22814 5.65576C8.31261 5.45061 8.43688 5.26421 8.59376 5.10733C8.75064 4.95044 8.93704 4.82618 9.1422 4.7417C9.34736 4.65723 9.56721 4.61421 9.78908 4.61514H10.9141"
stroke="#9A9AAF"

68
src/assets/icons/UploadIcon.tsx
View File

@ -1,27 +1,51 @@
import { Box, useTheme } from "@mui/material";
interface Props{
color?: string
interface Props {
color?: string;
}
export default function UploadIcon({color= "#9A9AAF"}: Props) {
const theme = useTheme();
export default function UploadIcon({ color = "#9A9AAF" }: Props) {
const theme = useTheme();
return (
<Box
sx={{
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none">
<path d="M10.75 10.25L16 5L21.25 10.25" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M16 19V5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M27 19V26C27 26.2652 26.8946 26.5196 26.7071 26.7071C26.5196 26.8946 26.2652 27 26 27H6C5.73478 27 5.48043 26.8946 5.29289 26.7071C5.10536 26.5196 5 26.2652 5 26V19" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</Box>
);
}
return (
<Box
sx={{
height: "32px",
width: "32px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
>
<path
d="M10.75 10.25L16 5L21.25 10.25"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M16 19V5"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M27 19V26C27 26.2652 26.8946 26.5196 26.7071 26.7071C26.5196 26.8946 26.2652 27 26 27H6C5.73478 27 5.48043 26.8946 5.29289 26.7071C5.10536 26.5196 5 26.2652 5 26V19"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

46
src/assets/icons/VkIconButton.tsx
View File

@ -1,25 +1,35 @@
import { Box, useTheme } from "@mui/material";
interface Props {
color?: string;
color?: string;
}
export default function VkIconButton({ color }: Props) {
const theme = useTheme();
const theme = useTheme();
return (
<Box
sx={{
borderRadius: "6px",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg width="32" height="19" viewBox="0 0 32 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5487 17.5309V12.7637C21.7508 13.2519 22.7631 15.7719 24.8021 17.5309H30C28.7004 14.6296 26.7614 12.0598 24.3282 10.0139C26.1949 7.44367 28.1764 5.02419 29.1456 1.35547H24.4215C22.5692 4.16265 21.5928 7.45085 18.5487 9.61906V1.35547H11.6923L13.3292 3.38008V10.5955C10.6728 10.2868 8.87795 5.42624 6.93231 1.35547H2C3.79487 6.85496 7.57128 18.9237 18.5487 17.5309Z" stroke="white" strokeWidth="1.5" strokeMiterlimit="10"/>
</svg>
</Box>
);
}
return (
<Box
sx={{
borderRadius: "6px",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
width="32"
height="19"
viewBox="0 0 32 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.5487 17.5309V12.7637C21.7508 13.2519 22.7631 15.7719 24.8021 17.5309H30C28.7004 14.6296 26.7614 12.0598 24.3282 10.0139C26.1949 7.44367 28.1764 5.02419 29.1456 1.35547H24.4215C22.5692 4.16265 21.5928 7.45085 18.5487 9.61906V1.35547H11.6923L13.3292 3.38008V10.5955C10.6728 10.2868 8.87795 5.42624 6.93231 1.35547H2C3.79487 6.85496 7.57128 18.9237 18.5487 17.5309Z"
stroke="white"
strokeWidth="1.5"
strokeMiterlimit="10"
/>
</svg>
</Box>
);
}

56
src/assets/icons/WalletIcon.tsx
View File

@ -1,32 +1,36 @@
import { Box } from "@mui/material";
interface Props {
color: string;
bgcolor: string;
color: string;
bgcolor: string;
}
export default function WalletIcon({ color, bgcolor }: Props) {
return (
<Box
sx={{
bgcolor,
borderRadius: "6px",
height: "36px",
width: "36px",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg width="22" height="19" viewBox="0 0 22 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19.5714 7.29857V2.29857C19.5714 1.50959 18.9318 0.869996 18.1429 0.869996L2.42857 0.869995C1.63959 0.869995 1 1.50959 1 2.29857L1 16.5843C1 17.3733 1.63959 18.0128 2.42857 18.0128L18.1429 18.0128C18.9318 18.0128 19.5714 17.3733 19.5714 16.5843V11.5843M20.901 6.58428H13.8571C12.2792 6.58428 11 7.86347 11 9.44142C11 11.0194 12.2792 12.2986 13.8571 12.2986H20.901C20.9557 12.2986 21 12.2542 21 12.1996V6.68329C21 6.62861 20.9557 6.58428 20.901 6.58428Z"
stroke={color}
strokeWidth="1.5"
/>
</svg>
</Box>
);
}
return (
<Box
sx={{
bgcolor,
borderRadius: "6px",
height: "36px",
width: "36px",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<svg
width="22"
height="19"
viewBox="0 0 22 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.5714 7.29857V2.29857C19.5714 1.50959 18.9318 0.869996 18.1429 0.869996L2.42857 0.869995C1.63959 0.869995 1 1.50959 1 2.29857L1 16.5843C1 17.3733 1.63959 18.0128 2.42857 18.0128L18.1429 18.0128C18.9318 18.0128 19.5714 17.3733 19.5714 16.5843V11.5843M20.901 6.58428H13.8571C12.2792 6.58428 11 7.86347 11 9.44142C11 11.0194 12.2792 12.2986 13.8571 12.2986H20.901C20.9557 12.2986 21 12.2542 21 12.1996V6.68329C21 6.62861 20.9557 6.58428 20.901 6.58428Z"
stroke={color}
strokeWidth="1.5"
/>
</svg>
</Box>
);
}

24
src/assets/icons/messagIcon.tsx
View File

@ -1,7 +1,13 @@
import { FC, SVGProps } from "react";
export const MessageIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
{...props}
height="1em"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.3125 20.4305L7.22812 23.018C7.11886 23.1084 6.9862 23.166 6.84553 23.184C6.70486 23.2021 6.56195 23.1799 6.43338 23.1201C6.30481 23.0602 6.19585 22.9651 6.11914 22.8458C6.04244 22.7265 6.00112 22.5879 6 22.4461V7.55859C6 7.35968 6.07902 7.16892 6.21967 7.02826C6.36032 6.88761 6.55109 6.80859 6.75 6.80859H23.25C23.4489 6.80859 23.6397 6.88761 23.7803 7.02826C23.921 7.16892 24 7.35968 24 7.55859V19.5586C24 19.7575 23.921 19.9483 23.7803 20.0889C23.6397 20.2296 23.4489 20.3086 23.25 20.3086H10.6594L10.3125 20.4305Z"
stroke="currentColor"
@ -9,7 +15,19 @@ export const MessageIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M12 12.0586H18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M12 15.0586H18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path
d="M12 12.0586H18"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12 15.0586H18"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

8
src/assets/icons/questionsPage/ArrowDownIcon.tsx
View File

@ -1,7 +1,13 @@
import { FC, SVGProps } from "react";
export const ArrowDownIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
{...props}
height="1em"
viewBox="0 0 18 10"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.5 1.25L9 8.75L1.5 1.25"
stroke="currentColor"

8
src/assets/icons/questionsPage/CopyIcon.tsx
View File

@ -1,7 +1,13 @@
import { FC, SVGProps } from "react";
export const CopyIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
{...props}
height="1em"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.75 15.75H20.25V3.75H8.25V8.25"
stroke="currentColor"

8
src/assets/icons/questionsPage/DoubleArrowRight.tsx
View File

@ -1,7 +1,13 @@
import { FC, SVGProps } from "react";
export const DoubleArrowRight: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 11 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
{...props}
height="1em"
viewBox="0 0 11 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.5 1.5L5.5 6L1.5 10.5"
stroke="currentColor"

8
src/assets/icons/questionsPage/DoubleTick.tsx
View File

@ -1,7 +1,13 @@
import { FC, SVGProps } from "react";
export const DoubleTick: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
{...props}
height="1em"
viewBox="0 0 18 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.7896 2.20117L8.52644 6.49483M4.31592 6.20898L8.52644 10.2999L16.7896 1.70117M1.21101 6.41495L5.00049 10.0968"
stroke="currentColor"

8
src/assets/icons/questionsPage/PointsIcon.tsx
View File

@ -2,7 +2,13 @@ import { Box } from "@mui/material";
import { FC, SVGProps } from "react";
export const PointsIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
{...props}
height="1em"
viewBox="0 0 30 30"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M10.5 8C11.3284 8 12 7.32843 12 6.5C12 5.67157 11.3284 5 10.5 5C9.67157 5 9 5.67157 9 6.5C9 7.32843 9.67157 8 10.5 8Z"
fill="currentColor"

8
src/assets/icons/questionsPage/StarIconMini.tsx
View File

@ -20,7 +20,13 @@ export default function StarIconMini({ color, width = 30, sx }: Props) {
...sx,
}}
>
<svg width={width} height={width} viewBox="0 0 28 27" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
width={width}
height={width}
viewBox="0 0 28 27"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.551 21.8375L20.851 25.8375C21.6635 26.35 22.6635 25.5875 22.426 24.65L20.601 17.475C20.5516 17.2762 20.5595 17.0674 20.6236 16.8728C20.6877 16.6781 20.8056 16.5056 20.9635 16.375L26.6135 11.6625C27.351 11.05 26.976 9.81253 26.0135 9.75003L18.6385 9.27503C18.4372 9.26332 18.2438 9.19325 18.0817 9.07338C17.9197 8.95351 17.7961 8.78902 17.726 8.60003L14.976 1.67503C14.9032 1.47491 14.7706 1.30204 14.5961 1.17988C14.4217 1.05772 14.2139 0.992188 14.001 0.992188C13.788 0.992188 13.5802 1.05772 13.4058 1.17988C13.2314 1.30204 13.0988 1.47491 13.026 1.67503L10.276 8.60003C10.2059 8.78902 10.0823 8.95351 9.92021 9.07338C9.75816 9.19325 9.5647 9.26332 9.36347 9.27503L1.98847 9.75003C1.02597 9.81253 0.650971 11.05 1.38847 11.6625L7.03847 16.375C7.19639 16.5056 7.3142 16.6781 7.37834 16.8728C7.44247 17.0674 7.45032 17.2762 7.40097 17.475L5.71347 24.125C5.42597 25.25 6.62597 26.1625 7.58847 25.55L13.451 21.8375C13.6154 21.733 13.8062 21.6775 14.001 21.6775C14.1958 21.6775 14.3866 21.733 14.551 21.8375Z"
fill={color}

8
src/assets/icons/questionsPage/VectorQuestions.tsx
View File

@ -1,7 +1,13 @@
import { FC, SVGProps } from "react";
export const VectorQuestions: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
{...props}
height="1em"
viewBox="0 0 18 12"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.5 3.60156H17V8.60156H14.5M9.30166 8.60156H1V3.60156H9.30166"
stroke="currentColor"

16
src/assets/icons/questionsPage/VideofileIcon.tsx
View File

@ -1,7 +1,13 @@
import { FC, SVGProps } from "react";
export const VideofileIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 27 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
{...props}
height="1em"
viewBox="0 0 27 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.90476 1H16.381C17.3408 1 18.2613 1.4958 18.94 2.37832C19.6187 3.26085 20 4.4578 20 5.70588V19.8235C20 20.1355 19.9047 20.4348 19.735 20.6554C19.5653 20.8761 19.3352 21 19.0952 21H4.61905C3.65922 21 2.7387 20.5042 2.05999 19.6217C1.38129 18.7392 1 17.5422 1 16.2941V2.17647C1 1.86445 1.09532 1.56521 1.265 1.34458C1.43467 1.12395 1.6648 1 1.90476 1V1Z"
stroke="currentColor"
@ -9,6 +15,12 @@ export const VideofileIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M20 9L26 5V17L20 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path
d="M20 9L26 5V17L20 13"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

13
src/assets/icons/questionsPage/addImage.tsx
View File

@ -20,12 +20,21 @@ const AddImage: FC<Iprops> = ({ onClick, sx }) => {
...sx,
}}
>
<svg width="60" height="40" viewBox="0 0 60 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
width="60"
height="40"
viewBox="0 0 60 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M40.3333 0H1.66667C0.746192 0 0 0.89543 0 2V38C0 39.1046 0.746192 40 1.66667 40H40.3333V0Z"
fill="#EEE4FC"
/>
<path d="M58 0H40V40H58C58.4602 40 60 39.1046 60 38V2C60 0.89543 58.4602 0 58 0Z" fill="#7E2AEA" />
<path
d="M58 0H40V40H58C58.4602 40 60 39.1046 60 38V2C60 0.89543 58.4602 0 58 0Z"
fill="#7E2AEA"
/>
<path
d="M49.518 24.612C49.398 24.612 49.296 24.576 49.212 24.504C49.14 24.42 49.104 24.318 49.104 24.198V20.454H45.414C45.294 20.454 45.192 20.418 45.108 20.346C45.036 20.262 45 20.16 45 20.04V19.464C45 19.344 45.036 19.248 45.108 19.176C45.192 19.092 45.294 19.05 45.414 19.05H49.104V15.414C49.104 15.294 49.14 15.198 49.212 15.126C49.296 15.042 49.398 15 49.518 15H50.148C50.268 15 50.364 15.042 50.436 15.126C50.52 15.198 50.562 15.294 50.562 15.414V19.05H54.27C54.39 19.05 54.486 19.092 54.558 19.176C54.642 19.248 54.684 19.344 54.684 19.464V20.04C54.684 20.16 54.642 20.262 54.558 20.346C54.486 20.418 54.39 20.454 54.27 20.454H50.562V24.198C50.562 24.318 50.52 24.42 50.436 24.504C50.364 24.576 50.268 24.612 50.148 24.612H49.518Z"
fill="white"

44
src/assets/icons/questionsPage/addPlus.tsx
View File

@ -1,27 +1,31 @@
import { Box } from "@mui/material";
// interface Props {
// color: string;
// }
export default function AddPlus() {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="22" cy="22" r="22" fill="#FB5607"/>
<path d="M22 10V34" stroke="white" strokeWidth="2"/>
<path d="M10 22H34" stroke="white" strokeWidth="2"/>
</svg>
</Box>
);
}
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="44"
height="44"
viewBox="0 0 44 44"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="22" cy="22" r="22" fill="#FB5607" />
<path d="M22 10V34" stroke="white" strokeWidth="2" />
<path d="M10 22H34" stroke="white" strokeWidth="2" />
</svg>
</Box>
);
}

18
src/assets/icons/questionsPage/addPlusImage.tsx
View File

@ -1,9 +1,21 @@
import { FC } from "react";
export const AddPlusImage: FC = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40" fill="none">
<path d="M4 0H100V40H4C1.79086 40 0 38.2091 0 36V4C0 1.79086 1.79086 0 4 0Z" fill="#EEE4FC" />
<path d="M118 0H100V40H118C118.46 40 120 39.1046 120 38V2C120 0.89543 118.46 0 118 0Z" fill="#7E2AEA" />
<svg
xmlns="http://www.w3.org/2000/svg"
width="120"
height="40"
viewBox="0 0 120 40"
fill="none"
>
<path
d="M4 0H100V40H4C1.79086 40 0 38.2091 0 36V4C0 1.79086 1.79086 0 4 0Z"
fill="#EEE4FC"
/>
<path
d="M118 0H100V40H118C118.46 40 120 39.1046 120 38V2C120 0.89543 118.46 0 118 0Z"
fill="#7E2AEA"
/>
<path
d="M109.518 24.612C109.398 24.612 109.296 24.576 109.212 24.504C109.14 24.42 109.104 24.318 109.104 24.198V20.454H105.414C105.294 20.454 105.192 20.418 105.108 20.346C105.036 20.262 105 20.16 105 20.04V19.464C105 19.344 105.036 19.248 105.108 19.176C105.192 19.092 105.294 19.05 105.414 19.05H109.104V15.414C109.104 15.294 109.14 15.198 109.212 15.126C109.296 15.042 109.398 15 109.518 15H110.148C110.268 15 110.364 15.042 110.436 15.126C110.52 15.198 110.562 15.294 110.562 15.414V19.05H114.27C114.39 19.05 114.486 19.092 114.558 19.176C114.642 19.248 114.684 19.344 114.684 19.464V20.04C114.684 20.16 114.642 20.262 114.558 20.346C114.486 20.418 114.39 20.454 114.27 20.454H110.562V24.198C110.562 24.318 110.52 24.42 110.436 24.504C110.364 24.576 110.268 24.612 110.148 24.612H109.518Z"
fill="white"

26
src/assets/icons/questionsPage/addPlusVideo.tsx
View File

@ -1,9 +1,21 @@
import { FC } from "react";
export const AddPlusVideo: FC = () => (
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="0 0 120 40" fill="none">
<path d="M4 0H100V40H4C1.79086 40 0 38.2091 0 36V4C0 1.79086 1.79086 0 4 0Z" fill="#EEE4FC" />
<path d="M118 0H100V40H118C118.46 40 120 39.1046 120 38V2C120 0.89543 118.46 0 118 0Z" fill="#7E2AEA" />
<svg
xmlns="http://www.w3.org/2000/svg"
width="120"
height="40"
viewBox="0 0 120 40"
fill="none"
>
<path
d="M4 0H100V40H4C1.79086 40 0 38.2091 0 36V4C0 1.79086 1.79086 0 4 0Z"
fill="#EEE4FC"
/>
<path
d="M118 0H100V40H118C118.46 40 120 39.1046 120 38V2C120 0.89543 118.46 0 118 0Z"
fill="#7E2AEA"
/>
<path
d="M109.518 24.612C109.398 24.612 109.296 24.576 109.212 24.504C109.14 24.42 109.104 24.318 109.104 24.198V20.454H105.414C105.294 20.454 105.192 20.418 105.108 20.346C105.036 20.262 105 20.16 105 20.04V19.464C105 19.344 105.036 19.248 105.108 19.176C105.192 19.092 105.294 19.05 105.414 19.05H109.104V15.414C109.104 15.294 109.14 15.198 109.212 15.126C109.296 15.042 109.398 15 109.518 15H110.148C110.268 15 110.364 15.042 110.436 15.126C110.52 15.198 110.562 15.294 110.562 15.414V19.05H114.27C114.39 19.05 114.486 19.092 114.558 19.176C114.642 19.248 114.684 19.344 114.684 19.464V20.04C114.684 20.16 114.642 20.262 114.558 20.346C114.486 20.418 114.39 20.454 114.27 20.454H110.562V24.198C110.562 24.318 110.52 24.42 110.436 24.504C110.364 24.576 110.268 24.612 110.148 24.612H109.518Z"
fill="white"
@ -15,6 +27,12 @@ export const AddPlusVideo: FC = () => (
strokeLinecap="round"
strokeLinejoin="round"
/>
<path d="M59 18L65 14V26L59 22" stroke="#7E2AEA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path
d="M59 18L65 14V26L59 22"
stroke="#7E2AEA"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

55
src/assets/icons/questionsPage/arrowLeft.tsx
View File

@ -1,25 +1,40 @@
import { Box } from "@mui/material";
interface Props {
color: string;
color: string;
}
export default function ArrowLeft({color = "#7E2AEA"}: Props) {
return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.75 12H4.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M11 5.25L4.25 12L11 18.75" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);
}
export default function ArrowLeft({ color = "#7E2AEA" }: Props) {
return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<svg
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.75 12H4.25"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11 5.25L4.25 12L11 18.75"
stroke={color}
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

153
src/assets/icons/questionsPage/date.tsx
View File

@ -1,40 +1,121 @@
import {Box, SxProps, Theme} from "@mui/material";
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
color: string;
sx?: SxProps<Theme>
color: string;
sx?: SxProps<Theme>;
}
export default function Date({color, sx}: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="43" viewBox="0 0 47 43" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.125 4H2.875C1.83947 4 1 4.85066 1 5.9V40.1C1 41.1493 1.83947 42 2.875 42H44.125C45.1605 42 46 41.1493 46 40.1V5.9C46 4.85066 45.1605 4 44.125 4Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M1 15H46" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M7 28H11.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M7 22H11.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M7 34H11.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M21 28H25.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M21 22H25.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M21 34H25.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M35 28H39.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M35 22H39.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M35 34H39.8" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M10 9L10 1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M38 9L38 1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);
}
export default function Date({ color, sx }: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx,
}}
>
<svg
width="47"
height="43"
viewBox="0 0 47 43"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M44.125 4H2.875C1.83947 4 1 4.85066 1 5.9V40.1C1 41.1493 1.83947 42 2.875 42H44.125C45.1605 42 46 41.1493 46 40.1V5.9C46 4.85066 45.1605 4 44.125 4Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1 15H46"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7 28H11.8"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7 22H11.8"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M7 34H11.8"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M21 28H25.8"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M21 22H25.8"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M21 34H25.8"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M35 28H39.8"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M35 22H39.8"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M35 34H39.8"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10 9L10 1"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M38 9L38 1"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

32
src/assets/icons/questionsPage/deleteIcon.tsx
View File

@ -2,10 +2,34 @@ import { Box } from "@mui/material";
import { FC, SVGProps } from "react";
export const DeleteIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.25 5.25H3.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9.75 9.75V15.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M14.25 9.75V15.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<svg
{...props}
height="1em"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.25 5.25H3.75"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.75 9.75V15.75"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M14.25 9.75V15.75"
stroke="currentColor"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18.75 5.25V19.5C18.75 19.6989 18.671 19.8897 18.5303 20.0303C18.3897 20.171 18.1989 20.25 18 20.25H6C5.80109 20.25 5.61032 20.171 5.46967 20.0303C5.32902 19.8897 5.25 19.6989 5.25 19.5V5.25"
stroke="currentColor"

78
src/assets/icons/questionsPage/download.tsx
View File

@ -1,31 +1,55 @@
import {Box, SxProps, Theme} from "@mui/material";
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
color: string;
sx?: SxProps<Theme>
color: string;
sx?: SxProps<Theme>;
}
export default function Download({color, sx}: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="42" viewBox="0 0 47 42" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33.8846 26.8076H44.2692C44.7283 26.8076 45.1685 26.9551 45.4931 27.2177C45.8177 27.4802 46 27.8363 46 28.2076V39.4076C46 39.7789 45.8177 40.135 45.4931 40.3976C45.1685 40.6601 44.7283 40.8076 44.2692 40.8076H2.73077C2.27174 40.8076 1.83151 40.6601 1.50693 40.3976C1.18235 40.135 1 39.7789 1 39.4076V28.2076C1 27.8363 1.18235 27.4802 1.50693 27.2177C1.83151 26.9551 2.27174 26.8076 2.73077 26.8076H13.1154" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M23.5 27V1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M13.1155 11.3846L23.5001 1L33.8847 11.3846" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M39.135 36.0776C40.3141 36.0776 41.27 35.1217 41.27 33.9426C41.27 32.7635 40.3141 31.8076 39.135 31.8076C37.9559 31.8076 37 32.7635 37 33.9426C37 35.1217 37.9559 36.0776 39.135 36.0776Z" fill={color}/>
</svg>
</Box>
);
}
export default function Download({ color, sx }: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx,
}}
>
<svg
width="47"
height="42"
viewBox="0 0 47 42"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M33.8846 26.8076H44.2692C44.7283 26.8076 45.1685 26.9551 45.4931 27.2177C45.8177 27.4802 46 27.8363 46 28.2076V39.4076C46 39.7789 45.8177 40.135 45.4931 40.3976C45.1685 40.6601 44.7283 40.8076 44.2692 40.8076H2.73077C2.27174 40.8076 1.83151 40.6601 1.50693 40.3976C1.18235 40.135 1 39.7789 1 39.4076V28.2076C1 27.8363 1.18235 27.4802 1.50693 27.2177C1.83151 26.9551 2.27174 26.8076 2.73077 26.8076H13.1154"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M23.5 27V1"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13.1155 11.3846L23.5001 1L33.8847 11.3846"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M39.135 36.0776C40.3141 36.0776 41.27 35.1217 41.27 33.9426C41.27 32.7635 40.3141 31.8076 39.135 31.8076C37.9559 31.8076 37 32.7635 37 33.9426C37 35.1217 37.9559 36.0776 39.135 36.0776Z"
fill={color}
/>
</svg>
</Box>
);
}

112
src/assets/icons/questionsPage/drop_down.tsx
View File

@ -1,34 +1,86 @@
import {Box, SxProps, Theme} from "@mui/material";
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
color: string;
sx?: SxProps<Theme>
color: string;
sx?: SxProps<Theme>;
}
export default function DropDown({color, sx}: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="40" viewBox="0 0 47 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.125 1H2.875C1.83947 1 1 1.85066 1 2.9V37.1C1 38.1493 1.83947 39 2.875 39H44.125C45.1605 39 46 38.1493 46 37.1V2.9C46 1.85066 45.1605 1 44.125 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M44.125 1H2.875C1.83947 1 1 1.20147 1 1.45V9.55C1 9.79853 1.83947 10 2.875 10H44.125C45.1605 10 46 9.79853 46 9.55V1.45C46 1.20147 45.1605 1 44.125 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M5 16H32" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M5 27.333H32" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M5 21.667H32" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M5 33H32" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M34 9L34 1" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M38 5L40 7L42 5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);
}
export default function DropDown({ color, sx }: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx,
}}
>
<svg
width="47"
height="40"
viewBox="0 0 47 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M44.125 1H2.875C1.83947 1 1 1.85066 1 2.9V37.1C1 38.1493 1.83947 39 2.875 39H44.125C45.1605 39 46 38.1493 46 37.1V2.9C46 1.85066 45.1605 1 44.125 1Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M44.125 1H2.875C1.83947 1 1 1.20147 1 1.45V9.55C1 9.79853 1.83947 10 2.875 10H44.125C45.1605 10 46 9.79853 46 9.55V1.45C46 1.20147 45.1605 1 44.125 1Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5 16H32"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5 27.333H32"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5 21.667H32"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M5 33H32"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M34 9L34 1"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M38 5L40 7L42 5"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

74
src/assets/icons/questionsPage/emoji.tsx
View File

@ -1,30 +1,52 @@
import {Box, SxProps, Theme} from "@mui/material";
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
color: string;
sx?: SxProps<Theme>
color: string;
sx?: SxProps<Theme>;
}
export default function Emoji({color, sx}: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 31C17.493 30.999 18.9777 30.7779 20.4063 30.3438L31 16C31 13.0333 30.1203 10.1332 28.472 7.66645C26.8238 5.19972 24.4811 3.27713 21.7403 2.14181C18.9994 1.0065 15.9834 0.709449 13.0736 1.28823C10.1639 1.86701 7.49119 3.29562 5.3934 5.3934C3.29562 7.49119 1.86701 10.1639 1.28823 13.0736C0.709449 15.9834 1.0065 18.9994 2.14181 21.7403C3.27713 24.4811 5.19972 26.8238 7.66645 28.472C10.1332 30.1203 13.0333 31 16 31Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M10.375 14.75C11.4105 14.75 12.25 13.9105 12.25 12.875C12.25 11.8395 11.4105 11 10.375 11C9.33947 11 8.5 11.8395 8.5 12.875C8.5 13.9105 9.33947 14.75 10.375 14.75Z" fill={color}/>
<path d="M21.625 14.75C22.6605 14.75 23.5 13.9105 23.5 12.875C23.5 11.8395 22.6605 11 21.625 11C20.5895 11 19.75 11.8395 19.75 12.875C19.75 13.9105 20.5895 14.75 21.625 14.75Z" fill={color}/>
<path d="M22.5 19.75C21.8392 20.8884 20.891 21.8334 19.7503 22.4902C18.6095 23.147 17.3163 23.4927 16 23.4927C14.6837 23.4927 13.3905 23.147 12.2497 22.4902C11.109 21.8334 10.1608 20.8884 9.5 19.75" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);
}
export default function Emoji({ color, sx }: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx,
}}
>
<svg
width="32"
height="32"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16 31C17.493 30.999 18.9777 30.7779 20.4063 30.3438L31 16C31 13.0333 30.1203 10.1332 28.472 7.66645C26.8238 5.19972 24.4811 3.27713 21.7403 2.14181C18.9994 1.0065 15.9834 0.709449 13.0736 1.28823C10.1639 1.86701 7.49119 3.29562 5.3934 5.3934C3.29562 7.49119 1.86701 10.1639 1.28823 13.0736C0.709449 15.9834 1.0065 18.9994 2.14181 21.7403C3.27713 24.4811 5.19972 26.8238 7.66645 28.472C10.1332 30.1203 13.0333 31 16 31Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M10.375 14.75C11.4105 14.75 12.25 13.9105 12.25 12.875C12.25 11.8395 11.4105 11 10.375 11C9.33947 11 8.5 11.8395 8.5 12.875C8.5 13.9105 9.33947 14.75 10.375 14.75Z"
fill={color}
/>
<path
d="M21.625 14.75C22.6605 14.75 23.5 13.9105 23.5 12.875C23.5 11.8395 22.6605 11 21.625 11C20.5895 11 19.75 11.8395 19.75 12.875C19.75 13.9105 20.5895 14.75 21.625 14.75Z"
fill={color}
/>
<path
d="M22.5 19.75C21.8392 20.8884 20.891 21.8334 19.7503 22.4902C18.6095 23.147 17.3163 23.4927 16 23.4927C14.6837 23.4927 13.3905 23.147 12.2497 22.4902C11.109 21.8334 10.1608 20.8884 9.5 19.75"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

8
src/assets/icons/questionsPage/enterIcon.tsx
View File

@ -1,7 +1,13 @@
import { FC, SVGProps } from "react";
export const EnterIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
{...props}
height="1em"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.5 9.75V12.75H7.5"
stroke="currentColor"

8
src/assets/icons/questionsPage/hideIcon.tsx
View File

@ -1,7 +1,13 @@
import { FC, SVGProps } from "react";
export const HideIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
<svg {...props} height="1em" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
{...props}
height="1em"
viewBox="0 0 25 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M14.7218 18.4322C13.8897 18.6339 12.9835 18.75 12 18.75C4.5 18.75 1.5 12 1.5 12C1.5 12 4.5 5.25 12 5.25C19.5 5.25 22.5 12 22.5 12C22.5 12 21.7941 14.0139 19 16"
stroke="currentColor"

72
src/assets/icons/questionsPage/input.tsx
View File

@ -1,28 +1,50 @@
import {Box, SxProps, Theme} from "@mui/material";
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
color: string;
sx?: SxProps<Theme>
color: string;
sx?: SxProps<Theme>;
}
export default function Input({ color, sx }: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx,
}}
>
<svg
width="47"
height="40"
viewBox="0 0 47 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M44.125 1H2.875C1.83947 1 1 1.85066 1 2.9V37.1C1 38.1493 1.83947 39 2.875 39H44.125C45.1605 39 46 38.1493 46 37.1V2.9C46 1.85066 45.1605 1 44.125 1Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6 9H42"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6 14H30"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}
export default function Input({color, sx}: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="40" viewBox="0 0 47 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.125 1H2.875C1.83947 1 1 1.85066 1 2.9V37.1C1 38.1493 1.83947 39 2.875 39H44.125C45.1605 39 46 38.1493 46 37.1V2.9C46 1.85066 45.1605 1 44.125 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M6 9H42" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M6 14H30" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);
}

88
src/assets/icons/questionsPage/options_and_pict.tsx
View File

@ -1,34 +1,62 @@
import {Box, SxProps, Theme} from "@mui/material";
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
color: string;
sx?: SxProps<Theme>
color: string;
sx?: SxProps<Theme>;
}
export default function optionsAndPict({color, sx}: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="40" viewBox="0 0 47 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.125 29H1.875C1.39175 29 1 29.2239 1 29.5V38.5C1 38.7761 1.39175 39 1.875 39H21.125C21.6082 39 22 38.7761 22 38.5V29.5C22 29.2239 21.6082 29 21.125 29Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="6.13415" cy="34.1341" r="2.13415" fill={color}/>
<path d="M21.125 15H1.875C1.39175 15 1 15.2239 1 15.5V24.5C1 24.7761 1.39175 25 1.875 25H21.125C21.6082 25 22 24.7761 22 24.5V15.5C22 15.2239 21.6082 15 21.125 15Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="6.13415" cy="20.1341" r="2.13415" fill={color}/>
<path d="M21.125 1H1.875C1.39175 1 1 1.22386 1 1.5V10.5C1 10.7761 1.39175 11 1.875 11H21.125C21.6082 11 22 10.7761 22 10.5V1.5C22 1.22386 21.6082 1 21.125 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="6.13415" cy="6.13415" r="2.13415" fill={color}/>
<path d="M45.1667 1H26.8333C26.3731 1 26 1.85066 26 2.9V37.1C26 38.1493 26.3731 39 26.8333 39H45.1667C45.6269 39 46 38.1493 46 37.1V2.9C46 1.85066 45.6269 1 45.1667 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="31.1341" cy="6.13415" r="2.13415" fill={color}/>
</svg>
</Box>
);
}
export default function optionsAndPict({ color, sx }: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx,
}}
>
<svg
width="47"
height="40"
viewBox="0 0 47 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M21.125 29H1.875C1.39175 29 1 29.2239 1 29.5V38.5C1 38.7761 1.39175 39 1.875 39H21.125C21.6082 39 22 38.7761 22 38.5V29.5C22 29.2239 21.6082 29 21.125 29Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<circle cx="6.13415" cy="34.1341" r="2.13415" fill={color} />
<path
d="M21.125 15H1.875C1.39175 15 1 15.2239 1 15.5V24.5C1 24.7761 1.39175 25 1.875 25H21.125C21.6082 25 22 24.7761 22 24.5V15.5C22 15.2239 21.6082 15 21.125 15Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<circle cx="6.13415" cy="20.1341" r="2.13415" fill={color} />
<path
d="M21.125 1H1.875C1.39175 1 1 1.22386 1 1.5V10.5C1 10.7761 1.39175 11 1.875 11H21.125C21.6082 11 22 10.7761 22 10.5V1.5C22 1.22386 21.6082 1 21.125 1Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<circle cx="6.13415" cy="6.13415" r="2.13415" fill={color} />
<path
d="M45.1667 1H26.8333C26.3731 1 26 1.85066 26 2.9V37.1C26 38.1493 26.3731 39 26.8333 39H45.1667C45.6269 39 46 38.1493 46 37.1V2.9C46 1.85066 45.6269 1 45.1667 1Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<circle cx="31.1341" cy="6.13415" r="2.13415" fill={color} />
</svg>
</Box>
);
}

68
src/assets/icons/questionsPage/options_pict.tsx
View File

@ -1,30 +1,46 @@
import {Box, SxProps, Theme} from "@mui/material";
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
color: string;
sx?: SxProps<Theme>
color: string;
sx?: SxProps<Theme>;
}
export default function optionsPict({color, sx}: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="40" viewBox="0 0 47 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20.1667 1H1.83333C1.3731 1 1 1.85066 1 2.9V37.1C1 38.1493 1.3731 39 1.83333 39H20.1667C20.6269 39 21 38.1493 21 37.1V2.9C21 1.85066 20.6269 1 20.1667 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M45.1667 1H26.8333C26.3731 1 26 1.85066 26 2.9V37.1C26 38.1493 26.3731 39 26.8333 39H45.1667C45.6269 39 46 38.1493 46 37.1V2.9C46 1.85066 45.6269 1 45.1667 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="6.13415" cy="6.13415" r="2.13415" fill={color}/>
<circle cx="31.1341" cy="6.13415" r="2.13415" fill={color}/>
</svg>
</Box>
);
}
export default function optionsPict({ color, sx }: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx,
}}
>
<svg
width="47"
height="40"
viewBox="0 0 47 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20.1667 1H1.83333C1.3731 1 1 1.85066 1 2.9V37.1C1 38.1493 1.3731 39 1.83333 39H20.1667C20.6269 39 21 38.1493 21 37.1V2.9C21 1.85066 20.6269 1 20.1667 1Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M45.1667 1H26.8333C26.3731 1 26 1.85066 26 2.9V37.1C26 38.1493 26.3731 39 26.8333 39H45.1667C45.6269 39 46 38.1493 46 37.1V2.9C46 1.85066 45.6269 1 45.1667 1Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<circle cx="6.13415" cy="6.13415" r="2.13415" fill={color} />
<circle cx="31.1341" cy="6.13415" r="2.13415" fill={color} />
</svg>
</Box>
);
}

98
src/assets/icons/questionsPage/page.tsx
View File

@ -1,33 +1,73 @@
import {Box, SxProps, Theme} from "@mui/material";
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
color: string;
sx?: SxProps<Theme>
color: string;
sx?: SxProps<Theme>;
}
export default function Page({color, sx}: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="40" viewBox="0 0 47 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.125 1H2.875C1.83947 1 1 1.85066 1 2.9V37.1C1 38.1493 1.83947 39 2.875 39H44.125C45.1605 39 46 38.1493 46 37.1V2.9C46 1.85066 45.1605 1 44.125 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M1 11H46" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M6 6H41" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M1 30.5L14 19.5L29 33.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="24.1341" cy="20.1341" r="2.13415" fill={color}/>
<path d="M25 29L32 22" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<path d="M32 22L46 33" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);
}
export default function Page({ color, sx }: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx,
}}
>
<svg
width="47"
height="40"
viewBox="0 0 47 40"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M44.125 1H2.875C1.83947 1 1 1.85066 1 2.9V37.1C1 38.1493 1.83947 39 2.875 39H44.125C45.1605 39 46 38.1493 46 37.1V2.9C46 1.85066 45.1605 1 44.125 1Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1 11H46"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M6 6H41"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M1 30.5L14 19.5L29 33.5"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<circle cx="24.1341" cy="20.1341" r="2.13415" fill={color} />
<path
d="M25 29L32 22"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M32 22L46 33"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

56
src/assets/icons/questionsPage/rating.tsx
View File

@ -1,26 +1,36 @@
import {Box, SxProps, Theme} from "@mui/material";
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
color: string;
sx?: SxProps<Theme>
color: string;
sx?: SxProps<Theme>;
}
export default function Rating({ color, sx }: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx,
}}
>
<svg
width="45"
height="46"
viewBox="0 0 45 46"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M22.5 1L27.5516 16.5471H43.8988L30.6736 26.1558L35.7252 41.7029L22.5 32.0942L9.27483 41.7029L14.3264 26.1558L1.10123 16.5471H17.4484L22.5 1Z"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}
export default function Rating({color, sx}: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="45" height="46" viewBox="0 0 45 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.5 1L27.5516 16.5471H43.8988L30.6736 26.1558L35.7252 41.7029L22.5 32.0942L9.27483 41.7029L14.3264 26.1558L1.10123 16.5471H17.4484L22.5 1Z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);
}

66
src/assets/icons/questionsPage/slider.tsx
View File

@ -1,28 +1,46 @@
import {Box, SxProps, Theme} from "@mui/material";
import { Box, SxProps, Theme } from "@mui/material";
interface Props {
color: string;
sx?: SxProps<Theme>
color: string;
sx?: SxProps<Theme>;
}
export default function Slider({color, sx}: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx
}}
>
<svg width="47" height="19" viewBox="0 0 47 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38 15H41C43.7614 15 46 12.7614 46 10V8C46 5.23858 43.7614 3 41 3H36M23.5 15H6C3.23858 15 1 12.7614 1 10V8C1 5.23858 3.23858 3 6 3H24.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
<circle cx="30.5" cy="9.5" r="8.5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
</svg>
</Box>
);
}
export default function Slider({ color, sx }: Props) {
return (
<Box
sx={{
height: "38px",
width: "45px",
display: "flex",
alignItems: "center",
justifyContent: "center",
...sx,
}}
>
<svg
width="47"
height="19"
viewBox="0 0 47 19"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M38 15H41C43.7614 15 46 12.7614 46 10V8C46 5.23858 43.7614 3 41 3H36M23.5 15H6C3.23858 15 1 12.7614 1 10V8C1 5.23858 3.23858 3 6 3H24.5"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<circle
cx="30.5"
cy="9.5"
r="8.5"
stroke={color}
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</Box>
);
}

25
src/assets/icons/x.tsx
View File

@ -1,15 +1,24 @@
import { useTheme } from "@mui/material";
interface Props {
width?: number;
width?: number;
}
export default function PenaLogo({ width }: Props) {
const theme = useTheme();
const theme = useTheme();
return (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.39844 2.39999L21.5984 21.6M2.39844 21.6L21.5984 2.39999" stroke="black"/>
</svg>
)}
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.39844 2.39999L21.5984 21.6M2.39844 21.6L21.5984 2.39999"
stroke="black"
/>
</svg>
);
}

54
src/constants/base.ts
View File

@ -1,30 +1,32 @@
import type { QuizQuestionBase, QuestionBranchingRuleMain } from "../model/questionTypes/shared";
import type {
QuizQuestionBase,
QuestionBranchingRuleMain,
} from "../model/questionTypes/shared";
export const QUIZ_QUESTION_BASE: Omit<QuizQuestionBase, "id" | "backendId"> = {
quizId: 0,
description: "",
page: 0,
title: "",
expanded: true,
openedModalSettings: false,
required: false,
deleted: false,
deleteTimeoutId: 0,
content: {
id: "",
hint: {
text: "",
video: "",
},
rule: {
children: [],
main: [] as QuestionBranchingRuleMain[],
parentId: "",
default: ""
},
back: "",
originalBack: "",
autofill: false,
quizId: 0,
description: "",
page: 0,
title: "",
expanded: true,
openedModalSettings: false,
required: false,
deleted: false,
deleteTimeoutId: 0,
content: {
id: "",
hint: {
text: "",
video: "",
},
rule: {
children: [],
main: [] as QuestionBranchingRuleMain[],
parentId: "",
default: "",
},
back: "",
originalBack: "",
autofill: false,
},
};

30
src/constants/default.ts
View File

@ -13,18 +13,20 @@ import { QUIZ_QUESTION_VARIANT } from "./variant";
import { QUIZ_QUESTION_VARIMG } from "./varimg";
import { QUIZ_QUESTION_RESULT } from "./result";
export const defaultQuestionByType: Record<QuestionType, Omit<AnyTypedQuizQuestion, "id" | "backendId">> = {
"date": QUIZ_QUESTION_DATE,
"emoji": QUIZ_QUESTION_EMOJI,
"file": QUIZ_QUESTION_FILE,
"images": QUIZ_QUESTION_IMAGES,
"number": QUIZ_QUESTION_NUMBER,
"page": QUIZ_QUESTION_PAGE,
"rating": QUIZ_QUESTION_RATING,
"select": QUIZ_QUESTION_SELECT,
"text": QUIZ_QUESTION_TEXT,
"variant": QUIZ_QUESTION_VARIANT,
"varimg": QUIZ_QUESTION_VARIMG,
"result": QUIZ_QUESTION_RESULT,
export const defaultQuestionByType: Record<
QuestionType,
Omit<AnyTypedQuizQuestion, "id" | "backendId">
> = {
date: QUIZ_QUESTION_DATE,
emoji: QUIZ_QUESTION_EMOJI,
file: QUIZ_QUESTION_FILE,
images: QUIZ_QUESTION_IMAGES,
number: QUIZ_QUESTION_NUMBER,
page: QUIZ_QUESTION_PAGE,
rating: QUIZ_QUESTION_RATING,
select: QUIZ_QUESTION_SELECT,
text: QUIZ_QUESTION_TEXT,
variant: QUIZ_QUESTION_VARIANT,
varimg: QUIZ_QUESTION_VARIMG,
result: QUIZ_QUESTION_RESULT,
} as const;

43
src/constants/emoji.ts
View File

@ -3,24 +3,25 @@ import { QUIZ_QUESTION_BASE } from "./base";
import type { QuizQuestionEmoji } from "../model/questionTypes/emoji";
import { nanoid } from "nanoid";
export const QUIZ_QUESTION_EMOJI: Omit<QuizQuestionEmoji, "id" | "backendId"> = {
...QUIZ_QUESTION_BASE,
type: "emoji",
content: {
...QUIZ_QUESTION_BASE.content,
multi: false,
own: false,
innerNameCheck: false,
innerName: "",
required: false,
variants: [
{
id: nanoid(),
answer: "",
extendedText: "",
hints: "",
originalImageUrl: "",
},
],
},
};
export const QUIZ_QUESTION_EMOJI: Omit<QuizQuestionEmoji, "id" | "backendId"> =
{
...QUIZ_QUESTION_BASE,
type: "emoji",
content: {
...QUIZ_QUESTION_BASE.content,
multi: false,
own: false,
innerNameCheck: false,
innerName: "",
required: false,
variants: [
{
id: nanoid(),
answer: "",
extendedText: "",
hints: "",
originalImageUrl: "",
},
],
},
};

7
src/constants/images.ts
View File

@ -3,7 +3,10 @@ import { QUIZ_QUESTION_BASE } from "./base";
import type { QuizQuestionImages } from "../model/questionTypes/images";
import { nanoid } from "nanoid";
export const QUIZ_QUESTION_IMAGES: Omit<QuizQuestionImages, "id" | "backendId"> = {
export const QUIZ_QUESTION_IMAGES: Omit<
QuizQuestionImages,
"id" | "backendId"
> = {
...QUIZ_QUESTION_BASE,
type: "images",
content: {
@ -22,7 +25,7 @@ export const QUIZ_QUESTION_IMAGES: Omit<QuizQuestionImages, "id" | "backendId">
answer: "",
extendedText: "",
originalImageUrl: "",
hints: ""
hints: "",
},
],
largeCheck: false,

5
src/constants/number.ts
View File

@ -2,7 +2,10 @@ import { QUIZ_QUESTION_BASE } from "./base";
import type { QuizQuestionNumber } from "../model/questionTypes/number";
export const QUIZ_QUESTION_NUMBER: Omit<QuizQuestionNumber, "id" | "backendId"> = {
export const QUIZ_QUESTION_NUMBER: Omit<
QuizQuestionNumber,
"id" | "backendId"
> = {
...QUIZ_QUESTION_BASE,
type: "number",
content: {

5
src/constants/rating.ts
View File

@ -2,7 +2,10 @@ import { QUIZ_QUESTION_BASE } from "./base";
import type { QuizQuestionRating } from "../model/questionTypes/rating";
export const QUIZ_QUESTION_RATING: Omit<QuizQuestionRating, "id" | "backendId"> = {
export const QUIZ_QUESTION_RATING: Omit<
QuizQuestionRating,
"id" | "backendId"
> = {
...QUIZ_QUESTION_BASE,
type: "rating",
content: {

7
src/constants/result.ts
View File

@ -3,7 +3,10 @@ import { QUIZ_QUESTION_BASE } from "./base";
import type { QuizQuestionResult } from "../model/questionTypes/result";
import { nanoid } from "nanoid";
export const QUIZ_QUESTION_RESULT: Omit<QuizQuestionResult, "id" | "backendId"> = {
export const QUIZ_QUESTION_RESULT: Omit<
QuizQuestionResult,
"id" | "backendId"
> = {
...QUIZ_QUESTION_BASE,
type: "result",
content: {
@ -13,6 +16,6 @@ export const QUIZ_QUESTION_RESULT: Omit<QuizQuestionResult, "id" | "backendId">
text: "",
price: [0],
useImage: true,
usage: true
usage: true,
},
};

15
src/constants/select.ts
View File

@ -3,7 +3,10 @@ import { QUIZ_QUESTION_BASE } from "./base";
import type { QuizQuestionSelect } from "../model/questionTypes/select";
import { nanoid } from "nanoid";
export const QUIZ_QUESTION_SELECT: Omit<QuizQuestionSelect, "id" | "backendId"> = {
export const QUIZ_QUESTION_SELECT: Omit<
QuizQuestionSelect,
"id" | "backendId"
> = {
...QUIZ_QUESTION_BASE,
type: "select",
content: {
@ -13,6 +16,14 @@ export const QUIZ_QUESTION_SELECT: Omit<QuizQuestionSelect, "id" | "backendId">
innerNameCheck: false,
innerName: "",
default: "",
variants: [{ id: nanoid(), answer: "", extendedText: "", hints: "", originalImageUrl: "" }],
variants: [
{
id: nanoid(),
answer: "",
extendedText: "",
hints: "",
originalImageUrl: "",
},
],
},
};

15
src/constants/variant.ts
View File

@ -3,7 +3,10 @@ import { QUIZ_QUESTION_BASE } from "./base";
import type { QuizQuestionVariant } from "../model/questionTypes/variant";
import { nanoid } from "nanoid";
export const QUIZ_QUESTION_VARIANT: Omit<QuizQuestionVariant, "id" | "backendId"> = {
export const QUIZ_QUESTION_VARIANT: Omit<
QuizQuestionVariant,
"id" | "backendId"
> = {
...QUIZ_QUESTION_BASE,
type: "variant",
content: {
@ -14,6 +17,14 @@ export const QUIZ_QUESTION_VARIANT: Omit<QuizQuestionVariant, "id" | "backendId"
innerNameCheck: false,
required: false,
innerName: "",
variants: [{ id: nanoid(), answer: "", extendedText: "", hints: "", originalImageUrl: "" }],
variants: [
{
id: nanoid(),
answer: "",
extendedText: "",
hints: "",
originalImageUrl: "",
},
],
},
};

15
src/constants/varimg.ts
View File

@ -3,7 +3,10 @@ import { QUIZ_QUESTION_BASE } from "./base";
import type { QuizQuestionVarImg } from "../model/questionTypes/varimg";
import { nanoid } from "nanoid";
export const QUIZ_QUESTION_VARIMG: Omit<QuizQuestionVarImg, "id" | "backendId"> = {
export const QUIZ_QUESTION_VARIMG: Omit<
QuizQuestionVarImg,
"id" | "backendId"
> = {
...QUIZ_QUESTION_BASE,
type: "varimg",
content: {
@ -12,7 +15,15 @@ export const QUIZ_QUESTION_VARIMG: Omit<QuizQuestionVarImg, "id" | "backendId">
innerNameCheck: false,
innerName: "",
required: false,
variants: [{ id: nanoid(), answer: "", hints: "", extendedText: "", originalImageUrl: "" }],
variants: [
{
id: nanoid(),
answer: "",
hints: "",
extendedText: "",
originalImageUrl: "",
},
],
largeCheck: false,
replText: "",
},

38
src/index.css
View File

@ -1,29 +1,29 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
@keyframes blinking {
0% {
opacity: 100;
}
50% {
opacity: 0;
}
100% {
opacity: 100;
}
0% {
opacity: 100;
}
50% {
opacity: 0;
}
100% {
opacity: 100;
}
}
.blink {
animation: blinking 2s infinite ;
}
animation: blinking 2s infinite;
}

Some files were not shown because too many files have changed in this diff Show More