Merge branch 'develop' of http://85.143.176.51:3000/free-land/front-end into feature/checkbox
This commit is contained in:
“Salar
commit
01d5d946e8
134
.storybook/index.css
Normal file
134
.storybook/index.css
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
@font-face {
|
||||||
|
font-family: "Poppins";
|
||||||
|
src: url("assets/fonts/Poppins-Bold.eot");
|
||||||
|
src: url("assets/fonts/Poppins-Bold.eot?#iefix") format("embedded-opentype"),
|
||||||
|
url("assets/fonts/Poppins-Bold.woff2") format("woff2"),
|
||||||
|
url("assets/fonts/Poppins-Bold.ttf") format("truetype");
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Poppins";
|
||||||
|
src: url("assets/fonts/Poppins-Medium.eot");
|
||||||
|
src: url("assets/fonts/Poppins-Medium.eot?#iefix") format("embedded-opentype"),
|
||||||
|
url("assets/fonts/Poppins-Medium.woff2") format("woff2"),
|
||||||
|
url("assets/fonts/Poppins-Medium.ttf") format("truetype");
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Poppins";
|
||||||
|
src: url("assets/fonts/Poppins-Regular.eot");
|
||||||
|
src: url("assets/fonts/Poppins-Regular.eot?#iefix") format("embedded-opentype"),
|
||||||
|
url("assets/fonts/Poppins-Regular.woff2") format("woff2"),
|
||||||
|
url("assets/fonts/Poppins-Regular.ttf") format("truetype");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "Poppins";
|
||||||
|
src: url("assets/fonts/Poppins-Thin.eot");
|
||||||
|
src: url("assets/fonts/Poppins-Thin.eot?#iefix") format("embedded-opentype"),
|
||||||
|
url("assets/fonts/Poppins-Thin.woff2") format("woff2"),
|
||||||
|
url("assets/fonts/Poppins-Thin.ttf") format("truetype");
|
||||||
|
font-weight: 300;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-family: "Poppins", -apple-system, "Segoe UI", system-ui, "Roboto",
|
||||||
|
"Helvetica Neue", "Arial";
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
*,
|
||||||
|
::before,
|
||||||
|
::after,
|
||||||
|
.theme-dark *,
|
||||||
|
.theme-dark::before,
|
||||||
|
.theme-dark::after {
|
||||||
|
/* ------------------------------- Body color ------------------------------- */
|
||||||
|
--color-aside: #0a0e1a;
|
||||||
|
--color-footer: 10 10 10;
|
||||||
|
--color-text: rgb(38, 38, 38);
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
--color-serv: 25 29 43;
|
||||||
|
--color-serv-50: 227 230 237;
|
||||||
|
--color-serv-100: 200 205 223;
|
||||||
|
--color-serv-200: 142 152 189;
|
||||||
|
--color-serv-300: 90 104 155;
|
||||||
|
--color-serv-400: 58 67 100;
|
||||||
|
--color-serv-500: 25 29 43;
|
||||||
|
--color-serv-600: 21 24 35;
|
||||||
|
--color-serv-700: 15 17 26;
|
||||||
|
--color-serv-800: 9 11 16;
|
||||||
|
--color-serv-900: 6 7 10;
|
||||||
|
/* ---------------------------------- Blue ---------------------------------- */
|
||||||
|
--color-blue-50: 240 247 254;
|
||||||
|
--color-blue-100: 221 237 254;
|
||||||
|
--color-blue-200: 182 216 252;
|
||||||
|
--color-blue-300: 137 192 250;
|
||||||
|
--color-blue-400: 74 158 247;
|
||||||
|
--color-blue-500: 9 109 217;
|
||||||
|
--color-blue-600: 8 99 196;
|
||||||
|
--color-blue-700: 7 87 171;
|
||||||
|
--color-blue-800: 6 69 137;
|
||||||
|
--color-blue-900: 4 49 98;
|
||||||
|
/* ---------------------------------- Gray ---------------------------------- */
|
||||||
|
--color-gray-50: 250 250 250;
|
||||||
|
--color-gray-75: 240 240 240;
|
||||||
|
--color-gray-100: 235 235 235;
|
||||||
|
;
|
||||||
|
--color-gray-200: 214 214 214;
|
||||||
|
--color-gray-300: 191 191 191;
|
||||||
|
--color-gray-400: 166 166 166;
|
||||||
|
--color-gray-500: 140 140 140;
|
||||||
|
--color-gray-600: 115 115 115;
|
||||||
|
--color-gray-700: 89 89 89;
|
||||||
|
--color-gray-800: 64 64 64;
|
||||||
|
--color-gray-900: 38 38 38;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark theme */
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--bg: hsl(var(--hue), 10%, 10%);
|
||||||
|
--fg: hsl(var(--hue), 10%, 90%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
/* Separate
|
||||||
|
======================================================================== */
|
||||||
|
|
||||||
|
.separate {
|
||||||
|
@apply flex items-center text-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separate::after,
|
||||||
|
.separate::before {
|
||||||
|
content: '';
|
||||||
|
@apply border-b border-gray-300 flex-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separate:not(:empty)::after {
|
||||||
|
@apply ml-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.separate:not(:empty)::before {
|
||||||
|
@apply mr-2;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,16 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
"stories": [
|
|
||||||
"../src/**/*.stories.mdx",
|
|
||||||
"../src/**/*.stories.@(js|jsx|ts|tsx)"
|
|
||||||
],
|
|
||||||
"addons": [
|
|
||||||
"@storybook/addon-links",
|
|
||||||
"@storybook/addon-essentials",
|
|
||||||
"@storybook/addon-interactions",
|
|
||||||
"@storybook/preset-create-react-app"
|
|
||||||
],
|
|
||||||
"framework": "@storybook/react",
|
|
||||||
"core": {
|
|
||||||
"builder": "@storybook/builder-webpack5"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
31
.storybook/main.ts
Normal file
31
.storybook/main.ts
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
|
||||||
|
const Path = require('path');
|
||||||
|
|
||||||
|
const AppSourceDir = Path.join(__dirname, '..', 'src');
|
||||||
|
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
|
||||||
|
addons: [
|
||||||
|
"@storybook/addon-links",
|
||||||
|
"@storybook/addon-essentials",
|
||||||
|
"@storybook/addon-interactions",
|
||||||
|
"@storybook/preset-create-react-app",
|
||||||
|
"storybook-addon-pseudo-states",
|
||||||
|
],
|
||||||
|
framework: "@storybook/react",
|
||||||
|
core: {
|
||||||
|
builder: "@storybook/builder-webpack5",
|
||||||
|
},
|
||||||
|
webpackFinal: async (config, { configType }) => {
|
||||||
|
config.resolve.plugins = [
|
||||||
|
...(config.resolve.plugins || []),
|
||||||
|
new TsconfigPathsPlugin({
|
||||||
|
extensions: config.resolve.extensions,
|
||||||
|
}),
|
||||||
|
];
|
||||||
|
config.resolve.alias["@assets"] = Path.resolve(__dirname, '..', 'src', 'assets')
|
||||||
|
console.log(config);
|
||||||
|
return config;
|
||||||
|
},
|
||||||
|
};
|
||||||
@ -1,9 +0,0 @@
|
|||||||
export const parameters = {
|
|
||||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
|
||||||
controls: {
|
|
||||||
matchers: {
|
|
||||||
color: /(background|color)$/i,
|
|
||||||
date: /Date$/,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
68
.storybook/preview.ts
Normal file
68
.storybook/preview.ts
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
import "./index.css";
|
||||||
|
/**
|
||||||
|
* Read https://storybook.js.org/docs/react/configure/overview#configure-story-rendering
|
||||||
|
* for more information about the purpose of this file.
|
||||||
|
*
|
||||||
|
* Use preview.js for global code (such as CSS imports or JavaScript mocks)
|
||||||
|
* that applies to all stories. For example, `import thirdPartyCss.css`.
|
||||||
|
*
|
||||||
|
* This file can have three exports:
|
||||||
|
* - decorators - an array of global decorators
|
||||||
|
* - parameters - an object of global parameters
|
||||||
|
* - globalTypes - definition of globalTypes
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Decorators
|
||||||
|
*
|
||||||
|
* A decorator is a way to wrap a story in extra “rendering” functionality.
|
||||||
|
*
|
||||||
|
* Example:
|
||||||
|
*
|
||||||
|
* import React from 'react';
|
||||||
|
* export const decorators = [(Story) => <div style={{ margin: '3em' }}><Story/></div>];
|
||||||
|
*
|
||||||
|
* Each story throughout the library will be wrapped in a div with a margin of 3
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Parameters
|
||||||
|
*
|
||||||
|
* Most Storybook addons are configured via a parameter-based API.
|
||||||
|
* You can set global parameters in this file
|
||||||
|
*
|
||||||
|
* export const parameters = {
|
||||||
|
* backgrounds: {
|
||||||
|
* values: [
|
||||||
|
* { name: 'red', value: '#f00' },
|
||||||
|
* { name: 'green', value: '#0f0' },
|
||||||
|
* ],
|
||||||
|
* },
|
||||||
|
* };
|
||||||
|
*
|
||||||
|
* With backgrounds, you configure the list of backgrounds that every story can render in.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Global Types
|
||||||
|
*
|
||||||
|
* Global Types allow you to add your own toolbars by creating
|
||||||
|
* globalTypes with a toolbar annotation:
|
||||||
|
*
|
||||||
|
* For example:
|
||||||
|
*
|
||||||
|
* export const globalTypes = {
|
||||||
|
* theme: {
|
||||||
|
* name: 'Theme',
|
||||||
|
* description: 'Global theme for components',
|
||||||
|
* defaultValue: 'light',
|
||||||
|
* toolbar: {
|
||||||
|
* icon: 'circlehollow',
|
||||||
|
* // array of plain string values or MenuItem shape
|
||||||
|
* items: ['light', 'dark'],
|
||||||
|
* },
|
||||||
|
* },
|
||||||
|
* };
|
||||||
|
*
|
||||||
|
* Will add a new dropdown in your toolbar with options light and dark.
|
||||||
|
**/
|
||||||
2
src/types/global.d.ts → global.d.ts
vendored
2
src/types/global.d.ts → global.d.ts
vendored
@ -11,3 +11,5 @@ export declare global {
|
|||||||
state: any & {idx: number}
|
state: any & {idx: number}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
declare module "svg-inline-react"
|
||||||
21876
package-lock.json
generated
21876
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
64
package.json
64
package.json
@ -1,34 +1,37 @@
|
|||||||
{
|
{
|
||||||
"name": "test",
|
"name": "freeland",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@headlessui/react": "^1.5.0",
|
"@headlessui/react": "^1.6.6",
|
||||||
"@react-keycloak/web": "^3.4.0",
|
"@reduxjs/toolkit": "^1.8.3",
|
||||||
"@reduxjs/toolkit": "^1.8.1",
|
"@types/node": "^16.11.47",
|
||||||
"axios": "^0.26.1",
|
"@types/react": "^18.0.15",
|
||||||
|
"@types/react-dom": "^18.0.6",
|
||||||
|
"axios": "^0.27.2",
|
||||||
"classnames": "^2.3.1",
|
"classnames": "^2.3.1",
|
||||||
"cross-env": "^7.0.3",
|
|
||||||
"formik": "^2.2.9",
|
"formik": "^2.2.9",
|
||||||
"graphql": "^16.4.0",
|
"graphql": "^16.5.0",
|
||||||
"graphql-tag": "^2.12.6",
|
"graphql-tag": "^2.12.6",
|
||||||
"i18next": "^21.6.16",
|
"i18next": "^21.8.16",
|
||||||
"i18next-browser-languagedetector": "^6.1.4",
|
"i18next-browser-languagedetector": "^6.1.4",
|
||||||
"i18next-http-backend": "^1.4.0",
|
"i18next-http-backend": "^1.4.1",
|
||||||
"jwt-decode": "^3.1.2",
|
"jwt-decode": "^3.1.2",
|
||||||
"keycloak-js": "^18.0.0",
|
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
"lodash.debounce": "^4.0.8",
|
"react": "^18.2.0",
|
||||||
"react": "^18.0.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-dom": "^18.0.0",
|
|
||||||
"react-hotkeys": "^2.0.0",
|
"react-hotkeys": "^2.0.0",
|
||||||
"react-i18next": "^11.16.7",
|
"react-i18next": "^11.18.3",
|
||||||
"react-redux": "^7.2.8",
|
"react-redux": "^8.0.2",
|
||||||
"react-router-dom": "^6.3.0",
|
"react-router-dom": "^6.3.0",
|
||||||
"react-scripts": "5.0.0",
|
"react-scripts": "5.0.1",
|
||||||
"react-scrollbars-custom": "^4.0.27",
|
"react-scrollbars-custom": "^4.1.0",
|
||||||
|
"storybook-addon-pseudo-states": "^1.15.1",
|
||||||
|
"tsconfig-paths-webpack-plugin": "^4.0.0",
|
||||||
|
"typescript": "^4.7.4",
|
||||||
"web-vitals": "^2.1.4",
|
"web-vitals": "^2.1.4",
|
||||||
"yup": "^0.32.11"
|
"yup": "^0.32.11",
|
||||||
|
"tailwindcss": "^3.1.7"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev-tools": "redux-devtools --hostname=localhost --port=8000",
|
"dev-tools": "redux-devtools --hostname=localhost --port=8000",
|
||||||
@ -45,6 +48,14 @@
|
|||||||
"react-app/jest"
|
"react-app/jest"
|
||||||
],
|
],
|
||||||
"overrides": [
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": [
|
||||||
|
"**/*.stories.*"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"import/no-anonymous-default-export": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"files": [
|
"files": [
|
||||||
"**/*.stories.*"
|
"**/*.stories.*"
|
||||||
@ -68,6 +79,7 @@
|
|||||||
]
|
]
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@babel/preset-typescript": "^7.18.6",
|
||||||
"@storybook/addon-actions": "^6.5.9",
|
"@storybook/addon-actions": "^6.5.9",
|
||||||
"@storybook/addon-essentials": "^6.5.9",
|
"@storybook/addon-essentials": "^6.5.9",
|
||||||
"@storybook/addon-interactions": "^6.5.9",
|
"@storybook/addon-interactions": "^6.5.9",
|
||||||
@ -78,23 +90,17 @@
|
|||||||
"@storybook/preset-create-react-app": "^4.1.2",
|
"@storybook/preset-create-react-app": "^4.1.2",
|
||||||
"@storybook/react": "^6.5.9",
|
"@storybook/react": "^6.5.9",
|
||||||
"@storybook/testing-library": "^0.0.13",
|
"@storybook/testing-library": "^0.0.13",
|
||||||
|
"@svgr/webpack": "^6.3.1",
|
||||||
"@testing-library/jest-dom": "^5.16.4",
|
"@testing-library/jest-dom": "^5.16.4",
|
||||||
"@testing-library/react": "^12.1.4",
|
"@testing-library/react": "^13.3.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
"@types/jest": "^27.4.1",
|
"@types/jest": "^27.5.2",
|
||||||
"@types/lodash.debounce": "^4.0.6",
|
"autoprefixer": "^10.4.8",
|
||||||
"@types/node": "^16.11.26",
|
|
||||||
"@types/react": "^17.0.44",
|
|
||||||
"@types/react-dom": "^17.0.15",
|
|
||||||
"@types/react-redux": "^7.1.23",
|
|
||||||
"autoprefixer": "^10.4.4",
|
|
||||||
"babel-plugin-named-exports-order": "^0.0.2",
|
"babel-plugin-named-exports-order": "^0.0.2",
|
||||||
"jest": "^28.1.3",
|
"jest": "^28.1.3",
|
||||||
"postcss": "^8.4.12",
|
"postcss": "^8.4.14",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"react-test-renderer": "^18.2.0",
|
"react-test-renderer": "^18.2.0",
|
||||||
"tailwindcss": "^3.0.23",
|
|
||||||
"typescript": "^4.6.3",
|
|
||||||
"webpack": "^5.74.0"
|
"webpack": "^5.74.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -24,7 +24,7 @@
|
|||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
<title>Dashboard | Techpal</title>
|
<title>Freeland</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
|||||||
32
src/App.tsx
32
src/App.tsx
@ -1,23 +1,7 @@
|
|||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Libraries */
|
/* Libraries */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
import React, { useEffect } from "react";
|
import React from "react";
|
||||||
import { BrowserRouter as Router } from "react-router-dom";
|
|
||||||
import { Provider } from "react-redux";
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
/* Parts */
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
import AppHotKeys from "ui/views/HotKeys";
|
|
||||||
import AppLoader from "components/parts/Loader";
|
|
||||||
import GlobalSearchbar from "ui/views/GlobalSearch";
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
/* Misc */
|
|
||||||
/* -------------------------------------------------------------------------- */
|
|
||||||
import { store } from "store/store";
|
|
||||||
import routes from "routes";
|
|
||||||
import RoutesRenderer from "components/RoutesRenderer";
|
|
||||||
import NotificationsField from "ui/views/NotificationsField";
|
|
||||||
|
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Application root component */
|
/* Application root component */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
@ -26,19 +10,7 @@ import NotificationsField from "ui/views/NotificationsField";
|
|||||||
* @return {JSX.Element}
|
* @return {JSX.Element}
|
||||||
*/
|
*/
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return <div>Hello world!</div>;
|
||||||
<Provider store={store}>
|
|
||||||
<AppHotKeys>
|
|
||||||
<React.Suspense fallback={<AppLoader />}>
|
|
||||||
<Router>
|
|
||||||
<RoutesRenderer routes={routes} />
|
|
||||||
</Router>
|
|
||||||
<GlobalSearchbar />
|
|
||||||
<NotificationsField />
|
|
||||||
</React.Suspense>
|
|
||||||
</AppHotKeys>
|
|
||||||
</Provider>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default App;
|
export default App;
|
||||||
|
|||||||
3
src/assets/svg/arrow-big-right.svg
Normal file
3
src/assets/svg/arrow-big-right.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M3 10.5C2.44772 10.5 2 10.9477 2 11.5C2 12.0523 2.44772 12.5 3 12.5V10.5ZM20.7071 12.2071C21.0976 11.8166 21.0976 11.1834 20.7071 10.7929L14.3431 4.42893C13.9526 4.03841 13.3195 4.03841 12.9289 4.42893C12.5384 4.81946 12.5384 5.45262 12.9289 5.84315L18.5858 11.5L12.9289 17.1569C12.5384 17.5474 12.5384 18.1805 12.9289 18.5711C13.3195 18.9616 13.9526 18.9616 14.3431 18.5711L20.7071 12.2071ZM3 12.5H20V10.5H3V12.5Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 507 B |
4
src/assets/svg/arrow-down.svg
Normal file
4
src/assets/svg/arrow-down.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 0.707107 0.707107 -0.707107 10.2001 16)"/>
|
||||||
|
<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 12 17.8)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 323 B |
4
src/assets/svg/arrow-left.svg
Normal file
4
src/assets/svg/arrow-left.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(-0.707107 0.707107 0.707107 0.707107 8.80005 10.2001)" fill="#262626"/>
|
||||||
|
<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 0.707107 0.707107 -0.707107 7 12)" fill="#262626"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 376 B |
@ -1,4 +0,0 @@
|
|||||||
<svg viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M7.35355 4.35355C7.54882 4.15829 7.54882 3.84171 7.35355 3.64645L4.17157 0.464466C3.97631 0.269204 3.65973 0.269204 3.46447 0.464466C3.2692 0.659728 3.2692 0.976311 3.46447 1.17157L6.29289 4L3.46447 6.82843C3.2692 7.02369 3.2692 7.34027 3.46447 7.53553C3.65973 7.7308 3.97631 7.7308 4.17157 7.53553L7.35355 4.35355ZM0 4.5H7V3.5H0V4.5Z" fill="white" />
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 443 B |
@ -1,4 +1,4 @@
|
|||||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
<path d="M5 12H19" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
<rect x="16" y="10.2001" width="2.54558" height="12.7279" rx="1.27279" transform="rotate(45 16 10.2001)"/>
|
||||||
<path d="M12 5L19 12L12 19" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
<rect x="17.8" y="12" width="2.54558" height="12.7279" rx="1.27279" transform="rotate(135 17.8 12)"/>
|
||||||
</svg>
|
</svg>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 257 B After Width: | Height: | Size: 289 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
|
|
||||||
</svg>;
|
|
||||||
|
Before Width: | Height: | Size: 309 B |
@ -1,7 +0,0 @@
|
|||||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g opacity="0.6">
|
|
||||||
<path d="M19 12H5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M12 19L5 12L12 5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 297 B |
@ -1,7 +0,0 @@
|
|||||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g opacity="0.6">
|
|
||||||
<path d="M18 8C18 6.4087 17.3679 4.88258 16.2426 3.75736C15.1174 2.63214 13.5913 2 12 2C10.4087 2 8.88258 2.63214 7.75736 3.75736C6.63214 4.88258 6 6.4087 6 8C6 15 3 17 3 17H21C21 17 18 15 18 8Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M13.73 21C13.5542 21.3031 13.3019 21.5547 12.9982 21.7295C12.6946 21.9044 12.3504 21.9965 12 21.9965C11.6496 21.9965 11.3054 21.9044 11.0018 21.7295C10.6982 21.5547 10.4458 21.3031 10.27 21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 647 B |
3
src/assets/svg/bookmark.svg
Normal file
3
src/assets/svg/bookmark.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M6 21.3242V4C6 3.44772 6.44772 3 7 3H17C17.5523 3 18 3.44771 18 4V21.3242C18 21.5563 17.7112 21.6631 17.5602 21.4869L12.7593 15.8858C12.3602 15.4202 11.6398 15.4202 11.2407 15.8858L6.43981 21.4869C6.28876 21.6631 6 21.5563 6 21.3242Z" stroke-width="2"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 343 B |
3
src/assets/svg/caret-down.svg
Normal file
3
src/assets/svg/caret-down.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M13.1315 4.6875H2.86897C2.56116 4.6875 2.38929 5.0125 2.57991 5.23438L7.71116 11.1844C7.85804 11.3547 8.14085 11.3547 8.28929 11.1844L13.4205 5.23438C13.6112 5.0125 13.4393 4.6875 13.1315 4.6875Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 288 B |
3
src/assets/svg/caret-left.svg
Normal file
3
src/assets/svg/caret-left.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11.3125 13.131L11.3125 2.86855C11.3125 2.56073 10.9875 2.38886 10.7657 2.57948L4.81566 7.71073C4.64534 7.85761 4.64534 8.14042 4.81566 8.28886L10.7657 13.4201C10.9875 13.6107 11.3125 13.4389 11.3125 13.131Z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 301 B |
3
src/assets/svg/caret-right.svg
Normal file
3
src/assets/svg/caret-right.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M4.68793 2.86853L4.68793 13.131C4.68793 13.4388 5.01293 13.6107 5.2348 13.4201L11.1848 8.28884C11.3551 8.14196 11.3551 7.85915 11.1848 7.71071L5.2348 2.57946C5.01293 2.38884 4.68793 2.56071 4.68793 2.86853Z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 300 B |
3
src/assets/svg/caret-up.svg
Normal file
3
src/assets/svg/caret-up.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M13.1315 11.3121H2.86897C2.56116 11.3121 2.38929 10.9871 2.57991 10.7653L7.71116 4.81526C7.85804 4.64495 8.14085 4.64495 8.28929 4.81526L13.4205 10.7653C13.6112 10.9871 13.4393 11.3121 13.1315 11.3121Z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 295 B |
@ -1,5 +0,0 @@
|
|||||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 405.272 405.272" style="enable-background:new 0 0 405.272 405.272;" xml:space="preserve">
|
|
||||||
<path d="M393.401,124.425L179.603,338.208c-15.832,15.835-41.514,15.835-57.361,0L11.878,227.836
|
|
||||||
c-15.838-15.835-15.838-41.52,0-57.358c15.841-15.841,41.521-15.841,57.355-0.006l81.698,81.699L336.037,67.064
|
|
||||||
c15.841-15.841,41.523-15.829,57.358,0C409.23,82.902,409.23,108.578,393.401,124.425z" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 523 B |
4
src/assets/svg/checkmark.svg
Normal file
4
src/assets/svg/checkmark.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M6.65267 11.9722L6.62614 11.9999L0 5.07261L2.1576 2.81694L6.65276 7.51641L13.8424 0L16 2.25567L6.6793 12L6.65267 11.9722Z" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 219 B |
6
src/assets/svg/chevrones-left.svg
Normal file
6
src/assets/svg/chevrones-left.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(-0.707107 0.707107 0.707107 0.707107 12.8 10.2001)"/>
|
||||||
|
<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 0.707107 0.707107 -0.707107 11 12)"/>
|
||||||
|
<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(-0.707107 0.707107 0.707107 0.707107 3.79999 10.2001)"/>
|
||||||
|
<rect width="2.54558" height="12.7279" rx="1.27279" transform="matrix(0.707107 0.707107 0.707107 -0.707107 2 12)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 580 B |
6
src/assets/svg/chevrones-right.svg
Normal file
6
src/assets/svg/chevrones-right.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="2" height="10" rx="1" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 13.8284 9.41425)" />
|
||||||
|
<rect width="2" height="10" rx="1" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 15.2426 8.00006)" />
|
||||||
|
<rect width="2" height="10" rx="1" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 7.82843 9.41425)" />
|
||||||
|
<rect width="2" height="10" rx="1" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 9.24265 8.00006)" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 532 B |
@ -1,3 +0,0 @@
|
|||||||
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M13.0002 8.19995C11.7272 8.19995 10.5063 8.70566 9.60608 9.60584C8.70591 10.506 8.20019 11.7269 8.20019 13C8.20019 14.273 8.70591 15.4939 9.60608 16.3941C10.5063 17.2942 11.7272 17.7999 13.0002 17.7999C14.2732 17.7999 15.4941 17.2942 16.3943 16.3941C17.2945 15.4939 17.8002 14.273 17.8002 13C17.8002 11.7269 17.2945 10.506 16.3943 9.60584C15.4941 8.70566 14.2732 8.19995 13.0002 8.19995ZM9.80019 13C9.80019 12.1513 10.1373 11.3373 10.7375 10.7372C11.3376 10.1371 12.1515 9.79995 13.0002 9.79995C13.8489 9.79995 14.6628 10.1371 15.2629 10.7372C15.8631 11.3373 16.2002 12.1513 16.2002 13C16.2002 13.8486 15.8631 14.6626 15.2629 15.2627C14.6628 15.8628 13.8489 16.2 13.0002 16.2C12.1515 16.2 11.3376 15.8628 10.7375 15.2627C10.1373 14.6626 9.80019 13.8486 9.80019 13ZM9.00019 0.199951C9.21237 0.199951 9.41585 0.284237 9.56588 0.434266C9.71591 0.584295 9.80019 0.787778 9.80019 0.999951V3.39995H12.2002V0.999951C12.2002 0.787778 12.2845 0.584295 12.4345 0.434266C12.5845 0.284237 12.788 0.199951 13.0002 0.199951C13.2124 0.199951 13.4159 0.284237 13.5659 0.434266C13.7159 0.584295 13.8002 0.787778 13.8002 0.999951V3.39995H16.2002V0.999951C16.2002 0.787778 16.2845 0.584295 16.4345 0.434266C16.5845 0.284237 16.788 0.199951 17.0002 0.199951C17.2124 0.199951 17.4159 0.284237 17.5659 0.434266C17.7159 0.584295 17.8002 0.787778 17.8002 0.999951V3.39995H18.6002C19.6611 3.39995 20.6785 3.82138 21.4286 4.57152C22.1788 5.32167 22.6002 6.33908 22.6002 7.39995V8.19995H25.0002C25.2124 8.19995 25.4159 8.28424 25.5659 8.43427C25.7159 8.58429 25.8002 8.78778 25.8002 8.99995C25.8002 9.21212 25.7159 9.41561 25.5659 9.56564C25.4159 9.71566 25.2124 9.79995 25.0002 9.79995H22.6002V12.2H25.0002C25.2124 12.2 25.4159 12.2842 25.5659 12.4343C25.7159 12.5843 25.8002 12.7878 25.8002 13C25.8002 13.2121 25.7159 13.4156 25.5659 13.5656C25.4159 13.7157 25.2124 13.8 25.0002 13.8H22.6002V16.2H25.0002C25.2124 16.2 25.4159 16.2842 25.5659 16.4343C25.7159 16.5843 25.8002 16.7878 25.8002 17C25.8002 17.2121 25.7159 17.4156 25.5659 17.5656C25.4159 17.7157 25.2124 17.7999 25.0002 17.7999H22.6002V18.6C22.6002 19.6608 22.1788 20.6782 21.4286 21.4284C20.6785 22.1785 19.6611 22.5999 18.6002 22.5999H17.8002V25C17.8002 25.2121 17.7159 25.4156 17.5659 25.5656C17.4159 25.7157 17.2124 25.7999 17.0002 25.7999C16.788 25.7999 16.5845 25.7157 16.4345 25.5656C16.2845 25.4156 16.2002 25.2121 16.2002 25V22.5999H13.8002V25C13.8002 25.2121 13.7159 25.4156 13.5659 25.5656C13.4159 25.7157 13.2124 25.7999 13.0002 25.7999C12.788 25.7999 12.5845 25.7157 12.4345 25.5656C12.2845 25.4156 12.2002 25.2121 12.2002 25V22.5999H9.80019V25C9.80019 25.2121 9.71591 25.4156 9.56588 25.5656C9.41585 25.7157 9.21237 25.7999 9.00019 25.7999C8.78802 25.7999 8.58454 25.7157 8.43451 25.5656C8.28448 25.4156 8.20019 25.2121 8.20019 25V22.5999H7.4002C6.33933 22.5999 5.32191 22.1785 4.57177 21.4284C3.82162 20.6782 3.4002 19.6608 3.4002 18.6V17.7999H1.0002C0.788022 17.7999 0.584539 17.7157 0.43451 17.5656C0.284481 17.4156 0.200195 17.2121 0.200195 17C0.200195 16.7878 0.284481 16.5843 0.43451 16.4343C0.584539 16.2842 0.788022 16.2 1.0002 16.2H3.4002V13.8H1.0002C0.788022 13.8 0.584539 13.7157 0.43451 13.5656C0.284481 13.4156 0.200195 13.2121 0.200195 13C0.200195 12.7878 0.284481 12.5843 0.43451 12.4343C0.584539 12.2842 0.788022 12.2 1.0002 12.2H3.4002V9.79995H1.0002C0.788022 9.79995 0.584539 9.71566 0.43451 9.56564C0.284481 9.41561 0.200195 9.21212 0.200195 8.99995C0.200195 8.78778 0.284481 8.58429 0.43451 8.43427C0.584539 8.28424 0.788022 8.19995 1.0002 8.19995H3.4002V7.39995C3.4002 6.33908 3.82162 5.32167 4.57177 4.57152C5.32191 3.82138 6.33933 3.39995 7.4002 3.39995H8.20019V0.999951C8.20019 0.787778 8.28448 0.584295 8.43451 0.434266C8.58454 0.284237 8.78802 0.199951 9.00019 0.199951ZM21.0002 7.39995C21.0002 6.76343 20.7473 6.15298 20.2973 5.70289C19.8472 5.25281 19.2367 4.99995 18.6002 4.99995H7.4002C6.76368 4.99995 6.15323 5.25281 5.70314 5.70289C5.25305 6.15298 5.0002 6.76343 5.0002 7.39995V18.6C5.0002 19.2365 5.25305 19.8469 5.70314 20.297C6.15323 20.7471 6.76368 21 7.4002 21H18.6002C19.2367 21 19.8472 20.7471 20.2973 20.297C20.7473 19.8469 21.0002 19.2365 21.0002 18.6V7.39995Z" fill="white"/>
|
|
||||||
</svg>;
|
|
||||||
|
Before Width: | Height: | Size: 4.2 KiB |
@ -1,17 +0,0 @@
|
|||||||
<svg viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2">
|
|
||||||
<circle cx="22" cy="22" r="6" stroke-opacity="0">
|
|
||||||
<animate attributeName="r" begin="1.5s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite" />
|
|
||||||
<animate attributeName="stroke-opacity" begin="1.5s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite" />
|
|
||||||
<animate attributeName="stroke-width" begin="1.5s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite" />
|
|
||||||
</circle>
|
|
||||||
<circle cx="22" cy="22" r="6" stroke-opacity="0">
|
|
||||||
<animate attributeName="r" begin="3s" dur="3s" values="6;22" calcMode="linear" repeatCount="indefinite" />
|
|
||||||
<animate attributeName="stroke-opacity" begin="3s" dur="3s" values="1;0" calcMode="linear" repeatCount="indefinite" />
|
|
||||||
<animate attributeName="stroke-width" begin="3s" dur="3s" values="2;0" calcMode="linear" repeatCount="indefinite" />
|
|
||||||
</circle>
|
|
||||||
<circle cx="22" cy="22" r="8">
|
|
||||||
<animate attributeName="r" begin="0s" dur="1.5s" values="6;1;2;3;4;5;6" calcMode="linear" repeatCount="indefinite" />
|
|
||||||
</circle>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.2 KiB |
9
src/assets/svg/cite.svg
Normal file
9
src/assets/svg/cite.svg
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="none" d="M19 12V4C19 2.89543 18.1046 2 17 2H5C3.89543 2 3 2.89543 3 4V20C3 21.1046 3.89543 22 5 22H8" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path fill="none" d="M7 6H15" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path fill="none" d="M7 10H11" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M11.5 19.5H15C15.2761 19.5 15.5 19.7239 15.5 20V22C15.5 22.2761 15.2761 22.5 15 22.5H12C11.7239 22.5 11.5 22.2761 11.5 22V19.5Z"/>
|
||||||
|
<path fill="none" d="M12 20V18C12 16.8954 12.8954 16 14 16L15 16" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M17.5 19.5H21C21.2761 19.5 21.5 19.7239 21.5 20V22C21.5 22.2761 21.2761 22.5 21 22.5H18C17.7239 22.5 17.5 22.2761 17.5 22V19.5Z"/>
|
||||||
|
<path fill="none" d="M18 20V18C18 16.8954 18.8954 16 20 16L21 16" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 906 B |
@ -1,7 +0,0 @@
|
|||||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g opacity="0.6">
|
|
||||||
<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.258 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.0113 9.77251C4.28059 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15V15Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 3.9 KiB |
4
src/assets/svg/copy.svg
Normal file
4
src/assets/svg/copy.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M17 8V20C17 21.1046 16.1046 22 15 22H10H5C3.89543 22 3 21.1046 3 20V8C3 6.89543 3.89543 6 5 6H15C16.1046 6 17 6.89543 17 8Z" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M7 6V4C7 2.89543 7.89543 2 9 2H19C20.1046 2 21 2.89543 21 4V17C21 18.1046 20.1046 19 19 19H17" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 403 B |
5
src/assets/svg/delete.svg
Normal file
5
src/assets/svg/delete.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M17.0689 21H6.93112C6.40648 21 5.97104 20.5946 5.93366 20.0712L5.07652 8.07125C5.03517 7.49238 5.49363 7 6.07398 7H17.926C18.5064 7 18.9648 7.49238 18.9235 8.07125L18.0663 20.0712C18.029 20.5946 17.5935 21 17.0689 21Z" stroke-width="2"/>
|
||||||
|
<path d="M3 7H21" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M7 7V4C7 3.44772 7.44772 3 8 3H16C16.5523 3 17 3.44772 17 4V7" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 501 B |
@ -1,4 +0,0 @@
|
|||||||
<svg width="16" height="28" viewBox="0 0 16 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M8 1.16663V26.8333" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
||||||
<path d="M13.8333 5.83337H5.08333C4.00037 5.83337 2.96175 6.26358 2.19598 7.02936C1.43021 7.79513 1 8.83374 1 9.91671C1 10.9997 1.43021 12.0383 2.19598 12.8041C2.96175 13.5698 4.00037 14 5.08333 14H10.9167C11.9996 14 13.0382 14.4302 13.804 15.196C14.5698 15.9618 15 17.0004 15 18.0834C15 19.1663 14.5698 20.205 13.804 20.9707C13.0382 21.7365 11.9996 22.1667 10.9167 22.1667H1" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
|
||||||
</svg>;
|
|
||||||
|
Before Width: | Height: | Size: 670 B |
5
src/assets/svg/download.svg
Normal file
5
src/assets/svg/download.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="none" d="M4 12V18C4 19.1046 4.89543 20 6 20H18C19.1046 20 20 19.1046 20 18V12" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path fill="none" d="M12 4L12 13" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M8.36682 12.6402C7.82405 11.9889 8.2872 11 9.13504 11H14.865C15.7128 11 16.176 11.9889 15.6332 12.6402L12.7682 16.0781C12.3684 16.5579 11.6316 16.5579 11.2318 16.0781L8.36682 12.6402Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 485 B |
@ -1,6 +0,0 @@
|
|||||||
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<rect x="0" fill="none" width="24" height="24" />
|
|
||||||
<g>
|
|
||||||
<path d="M7 10l5 5 5-5" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 163 B |
3
src/assets/svg/edit1.svg
Normal file
3
src/assets/svg/edit1.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M5 15L3.5 16.5L2 22L7.5 20.5L9 19M5 15L17 3C17.2626 2.73735 17.5744 2.52901 17.9176 2.38687C18.2608 2.24473 18.6286 2.17157 19 2.17157C19.3714 2.17157 19.7392 2.24473 20.0824 2.38687C20.4256 2.52901 20.7374 2.73735 21 3C21.2626 3.26264 21.471 3.57444 21.6131 3.9176C21.7553 4.26077 21.8284 4.62856 21.8284 5C21.8284 5.37143 21.7553 5.73923 21.6131 6.08239C21.471 6.42555 21.2626 6.73735 21 7L9 19M5 15L9 19" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 563 B |
4
src/assets/svg/edit2.svg
Normal file
4
src/assets/svg/edit2.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M11 4H4C3.46957 4 2.96086 4.21071 2.58579 4.58579C2.21071 4.96086 2 5.46957 2 6V19C2 19.5304 2.21071 20.0391 2.58579 20.4142C2.96086 20.7893 3.46957 21 4 21H18C18.5304 21 19.0391 20.7893 19.4142 20.4142C19.7893 20.0391 20 19.5304 20 19V13" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M18.5 2.49998C18.8978 2.10216 19.4374 1.87866 20 1.87866C20.5626 1.87866 21.1022 2.10216 21.5 2.49998C21.8978 2.89781 22.1213 3.43737 22.1213 3.99998C22.1213 4.56259 21.8978 5.10216 21.5 5.49998L12 15L8 16L9 12L18.5 2.49998Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 697 B |
@ -1,7 +0,0 @@
|
|||||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g opacity="0.6">
|
|
||||||
<path d="M4 4H20C21.1 4 22 4.9 22 6V18C22 19.1 21.1 20 20 20H4C2.9 20 2 19.1 2 18V6C2 4.9 2.9 4 4 4Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M22 6L12 13L2 6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 379 B |
5
src/assets/svg/error.svg
Normal file
5
src/assets/svg/error.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M12 8V12" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M12 16H12.01" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 444 B |
@ -1,8 +0,0 @@
|
|||||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g opacity="0.6">
|
|
||||||
<path d="M9 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M16 17L21 12L16 7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M21 12H9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 537 B |
4
src/assets/svg/eye.svg
Normal file
4
src/assets/svg/eye.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M1 12C1 12 5 4 12 4C19 4 23 12 23 12C23 12 19 20 12 20C5 20 1 12 1 12Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
<path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 417 B |
3
src/assets/svg/favorite.svg
Normal file
3
src/assets/svg/favorite.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M12 3L14.9048 9.50932L22 10.2574L16.7 15.0284L18.1803 22L12 18.4393L5.81966 22L7.3 15.0284L2 10.2574L9.09524 9.50932L12 3Z" stroke-width="2" stroke-linejoin="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 256 B |
7
src/assets/svg/filetext.svg
Normal file
7
src/assets/svg/filetext.svg
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M4 20V4C4 2.89543 4.89543 2 6 2H13.1716C13.702 2 14.2107 2.21071 14.5858 2.58579L19.4142 7.41421C19.7893 7.78929 20 8.29799 20 8.82843V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20Z" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M8 14H16" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M14 8L19 8" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M14 3V8" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M8 18H16" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 572 B |
@ -1,8 +0,0 @@
|
|||||||
<svg viewBox="0 0 24 24" stroke="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g opacity="0.6">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.94996 3.18608C9.58956 2.52283 11.367 2.27241 13.126 2.45681C14.885 2.64122 16.5718 3.2548 18.0382 4.24366C19.5046 5.23252 20.7057 6.56639 21.536 8.12806C22.3663 9.68973 22.8003 11.4314 22.8 13.2001C22.8 13.5183 22.6735 13.8236 22.4485 14.0486C22.2234 14.2737 21.9182 14.4001 21.6 14.4001C21.2817 14.4001 20.9765 14.2737 20.7514 14.0486C20.5264 13.8236 20.4 13.5183 20.4 13.2001C20.4005 11.8243 20.0631 10.4695 19.4175 9.25459C18.7718 8.03973 17.8377 7.00204 16.6971 6.23273C15.5565 5.46342 14.2445 4.98603 12.8762 4.84252C11.5079 4.69901 10.1253 4.89377 8.84996 5.40968C8.70292 5.47461 8.54433 5.50933 8.38361 5.51179C8.2229 5.51424 8.06332 5.48439 7.91437 5.42399C7.76541 5.36359 7.6301 5.27389 7.51648 5.16019C7.40286 5.0465 7.31323 4.91114 7.25293 4.76215C7.19262 4.61315 7.16286 4.45356 7.16542 4.29284C7.16797 4.13213 7.20279 3.97356 7.26781 3.82656C7.33282 3.67956 7.4267 3.54712 7.54389 3.43709C7.66107 3.32707 7.79916 3.24171 7.94996 3.18608ZM5.59436 5.95088C5.8328 6.16147 5.97787 6.45812 5.99767 6.77562C6.01747 7.09313 5.91039 7.4055 5.69996 7.64408C4.3438 9.17679 3.59665 11.1535 3.59996 13.2001C3.59996 13.5183 3.47353 13.8236 3.24849 14.0486C3.02344 14.2737 2.71822 14.4001 2.39996 14.4001C2.0817 14.4001 1.77648 14.2737 1.55143 14.0486C1.32639 13.8236 1.19996 13.5183 1.19996 13.2001C1.19662 10.5689 2.15711 8.02766 3.89996 6.05648C4.00425 5.93824 4.13082 5.84171 4.27243 5.77241C4.41404 5.7031 4.56792 5.66238 4.72528 5.65258C4.88263 5.64277 5.04038 5.66407 5.1895 5.71525C5.33862 5.76644 5.4762 5.84651 5.59436 5.95088Z" />
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.99994 13.2002C5.99994 11.6089 6.63208 10.0828 7.7573 8.95755C8.88252 7.83234 10.4086 7.2002 11.9999 7.2002C13.5912 7.2002 15.1174 7.83234 16.2426 8.95755C17.3678 10.0828 17.9999 11.6089 17.9999 13.2002C17.9999 13.5185 17.8735 13.8237 17.6485 14.0487C17.4234 14.2738 17.1182 14.4002 16.7999 14.4002C16.4817 14.4002 16.1765 14.2738 15.9514 14.0487C15.7264 13.8237 15.5999 13.5185 15.5999 13.2002C15.5999 12.2454 15.2207 11.3297 14.5455 10.6546C13.8704 9.97948 12.9547 9.6002 11.9999 9.6002C11.0452 9.6002 10.1295 9.97948 9.45436 10.6546C8.77922 11.3297 8.39994 12.2454 8.39994 13.2002C8.39994 15.2126 7.98594 17.1314 7.23834 18.875C7.11279 19.1675 6.87619 19.3981 6.58059 19.5161C6.285 19.6342 5.95462 19.6299 5.66214 19.5044C5.36966 19.3788 5.13903 19.1422 5.021 18.8466C4.90296 18.5511 4.90719 18.2207 5.03274 17.9282C5.67314 16.4343 6.00224 14.8256 5.99994 13.2002ZM16.7051 15.6146C16.8609 15.6393 17.0102 15.6944 17.1446 15.7768C17.279 15.8592 17.3959 15.9674 17.4885 16.095C17.5811 16.2226 17.6476 16.3672 17.6843 16.5205C17.721 16.6738 17.7271 16.8329 17.7023 16.9886C17.5459 17.9757 17.3274 18.9521 17.0483 19.9118C17.0073 20.0664 16.9358 20.2113 16.838 20.3379C16.7402 20.4645 16.6181 20.5702 16.4788 20.649C16.3396 20.7277 16.1859 20.7777 16.027 20.7962C15.8681 20.8147 15.7071 20.8012 15.5535 20.7566C15.3999 20.7119 15.2568 20.637 15.1325 20.5362C15.0083 20.4355 14.9054 20.3109 14.83 20.1698C14.7546 20.0287 14.7082 19.8739 14.6935 19.7146C14.6788 19.5553 14.6961 19.3947 14.7443 19.2422C14.9927 18.3866 15.1895 17.5082 15.3323 16.6118C15.3825 16.2978 15.5552 16.0165 15.8126 15.8297C16.07 15.643 16.391 15.566 16.7051 15.6158V15.6146Z" />
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9999 12C12.3182 12 12.6234 12.1264 12.8484 12.3515C13.0735 12.5765 13.1999 12.8817 13.1999 13.2C13.1999 15.8832 12.6479 18.4416 11.6519 20.7648C11.5897 20.9096 11.4997 21.0408 11.3868 21.1508C11.2739 21.2608 11.1405 21.3475 10.9942 21.4059C10.8478 21.4644 10.6914 21.4934 10.5338 21.4914C10.3762 21.4894 10.2205 21.4564 10.0757 21.3942C9.93089 21.332 9.79973 21.2419 9.68973 21.1291C9.57972 21.0162 9.49302 20.8828 9.43457 20.7365C9.37613 20.5901 9.34708 20.4336 9.3491 20.2761C9.35111 20.1185 9.38415 19.9628 9.44631 19.818C10.3425 17.7269 10.803 15.4751 10.7999 13.2C10.7999 12.8817 10.9263 12.5765 11.1514 12.3515C11.3764 12.1264 11.6817 12 11.9999 12Z" fill="white" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 4.0 KiB |
5
src/assets/svg/folder.svg
Normal file
5
src/assets/svg/folder.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M20 19H4C3.44772 19 3 18.5523 3 18V6C3 5.44772 3.44772 5 4 5H8.58579C8.851 5 9.10536 5.10536 9.29289 5.29289L11.7071 7.70711C11.8946 7.89464 12.149 8 12.4142 8H20C20.5523 8 21 8.44772 21 9V18C21 18.5523 20.5523 19 20 19Z" fill="none" stroke-width="2"/>
|
||||||
|
<path d="M13 11C13 10.4477 12.5523 10 12 10C11.4477 10 11 10.4477 11 11H13ZM11 16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16H11ZM11 11V16H13V11H11Z" stroke="none" />
|
||||||
|
<path d="M14.5 14.5C15.0523 14.5 15.5 14.0523 15.5 13.5C15.5 12.9477 15.0523 12.5 14.5 12.5L14.5 14.5ZM9.5 12.5C8.94772 12.5 8.5 12.9477 8.5 13.5C8.5 14.0523 8.94772 14.5 9.5 14.5L9.5 12.5ZM14.5 12.5L9.5 12.5L9.5 14.5L14.5 14.5L14.5 12.5Z" stroke="none" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 778 B |
@ -1,8 +0,0 @@
|
|||||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g opacity="0.6">
|
|
||||||
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M2 12H22" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
<path d="M12 2C14.5013 4.73835 15.9228 8.29203 16 12C15.9228 15.708 14.5013 19.2616 12 22C9.49872 19.2616 8.07725 15.708 8 12C8.07725 8.29203 9.49872 4.73835 12 2V2Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 625 B |
@ -1,3 +0,0 @@
|
|||||||
<svg width="52" height="60" viewBox="0 0 52 60" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M23 1.73205C24.8564 0.660254 27.1436 0.660254 29 1.73205L48.9808 13.2679C50.8372 14.3397 51.9808 16.3205 51.9808 18.4641V41.5359C51.9808 43.6795 50.8372 45.6603 48.9808 46.7321L29 58.2679C27.1436 59.3397 24.8564 59.3397 23 58.2679L3.01924 46.7321C1.16283 45.6603 0.0192375 43.6795 0.0192375 41.5359V18.4641C0.0192375 16.3205 1.16283 14.3397 3.01924 13.2679L23 1.73205Z" fillOpacity="0.6" />
|
|
||||||
</svg>;
|
|
||||||
|
Before Width: | Height: | Size: 506 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />
|
|
||||||
</svg>;
|
|
||||||
|
Before Width: | Height: | Size: 408 B |
6
src/assets/svg/key.svg
Normal file
6
src/assets/svg/key.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.704 3.70394C15.0989 2.09889 12.4966 2.09889 10.8915 3.70395C9.28647 5.309 9.28647 7.91132 10.8915 9.51638L14.379 13.0038C15.984 14.6089 18.5864 14.6089 20.1914 13.0038C21.7965 11.3988 21.7965 8.79647 20.1914 7.19141L16.704 3.70394ZM15.3387 5.28955C14.5485 4.49935 13.2673 4.49935 12.4771 5.28955C11.6869 6.07975 11.6869 7.36091 12.4771 8.15111L15.7442 11.4182C16.5344 12.2084 17.8156 12.2084 18.6058 11.4182C19.396 10.628 19.396 9.34689 18.6058 8.55669L15.3387 5.28955Z" />
|
||||||
|
<path d="M12.7875 11.2568L4.59995 19.4443" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M6.42353 17.6207L8.8798 20.077" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M9.25196 14.7923L12.527 18.0673" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 875 B |
8
src/assets/svg/list.svg
Normal file
8
src/assets/svg/list.svg
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="2" y="3" width="4" height="4" rx="2"/>
|
||||||
|
<rect x="9" y="4" width="13" height="2" rx="1"/>
|
||||||
|
<rect x="2" y="10" width="4" height="4" rx="2"/>
|
||||||
|
<rect x="9" y="11" width="13" height="2" rx="1"/>
|
||||||
|
<rect x="2" y="17" width="4" height="4" rx="2"/>
|
||||||
|
<rect x="9" y="18" width="13" height="2" rx="1"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 375 B |
@ -1,7 +0,0 @@
|
|||||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g opacity="0.6">
|
|
||||||
<path d="M19 11H5C3.89543 11 3 11.8954 3 13V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V13C21 11.8954 20.1046 11 19 11Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M7 11V7C7 5.67392 7.52678 4.40215 8.46447 3.46447C9.40215 2.52678 10.6739 2 12 2C13.3261 2 14.5979 2.52678 15.5355 3.46447C16.4732 4.40215 17 5.67392 17 7V11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 556 B |
@ -1,5 +0,0 @@
|
|||||||
<svg width="320" height="124" viewBox="0 0 320 124" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<circle cx="42.625" cy="62" r="31" fill="#FF0000"/>
|
|
||||||
<circle cx="96.875" cy="81.375" r="11.625" fill="#0075FF"/>
|
|
||||||
<path d="M143.136 57.928V70.792C143.136 71.688 143.344 72.344 143.76 72.76C144.208 73.144 144.944 73.336 145.968 73.336H149.088V79H144.864C139.2 79 136.368 76.248 136.368 70.744V57.928H133.2V52.408H136.368V45.832H143.136V52.408H149.088V57.928H143.136ZM178.641 65.128C178.641 66.088 178.577 66.952 178.449 67.72H159.009C159.169 69.64 159.841 71.144 161.025 72.232C162.209 73.32 163.665 73.864 165.393 73.864C167.889 73.864 169.665 72.792 170.721 70.648H177.969C177.201 73.208 175.729 75.32 173.553 76.984C171.377 78.616 168.705 79.432 165.537 79.432C162.977 79.432 160.673 78.872 158.625 77.752C156.609 76.6 155.025 74.984 153.873 72.904C152.753 70.824 152.193 68.424 152.193 65.704C152.193 62.952 152.753 60.536 153.873 58.456C154.993 56.376 156.561 54.776 158.577 53.656C160.593 52.536 162.913 51.976 165.537 51.976C168.065 51.976 170.321 52.52 172.305 53.608C174.321 54.696 175.873 56.248 176.961 58.264C178.081 60.248 178.641 62.536 178.641 65.128ZM171.681 63.208C171.649 61.48 171.025 60.104 169.809 59.08C168.593 58.024 167.105 57.496 165.345 57.496C163.681 57.496 162.273 58.008 161.121 59.032C160.001 60.024 159.313 61.416 159.057 63.208H171.681ZM181.818 65.704C181.818 62.952 182.378 60.552 183.498 58.504C184.618 56.424 186.17 54.824 188.154 53.704C190.138 52.552 192.41 51.976 194.97 51.976C198.266 51.976 200.986 52.808 203.13 54.472C205.306 56.104 206.762 58.408 207.498 61.384H200.25C199.866 60.232 199.21 59.336 198.282 58.696C197.386 58.024 196.266 57.688 194.922 57.688C193.002 57.688 191.482 58.392 190.362 59.8C189.242 61.176 188.682 63.144 188.682 65.704C188.682 68.232 189.242 70.2 190.362 71.608C191.482 72.984 193.002 73.672 194.922 73.672C197.642 73.672 199.418 72.456 200.25 70.024H207.498C206.762 72.904 205.306 75.192 203.13 76.888C200.954 78.584 198.234 79.432 194.97 79.432C192.41 79.432 190.138 78.872 188.154 77.752C186.17 76.6 184.618 75 183.498 72.952C182.378 70.872 181.818 68.456 181.818 65.704ZM227.397 52.024C229.413 52.024 231.205 52.472 232.773 53.368C234.341 54.232 235.557 55.528 236.421 57.256C237.317 58.952 237.765 61 237.765 63.4V79H231.045V64.312C231.045 62.2 230.517 60.584 229.461 59.464C228.405 58.312 226.965 57.736 225.141 57.736C223.285 57.736 221.813 58.312 220.725 59.464C219.669 60.584 219.141 62.2 219.141 64.312V79H212.421V43.48H219.141V55.72C220.005 54.568 221.157 53.672 222.597 53.032C224.037 52.36 225.637 52.024 227.397 52.024ZM250.876 56.248C251.74 55.032 252.924 54.024 254.428 53.224C255.964 52.392 257.708 51.976 259.66 51.976C261.932 51.976 263.98 52.536 265.804 53.656C267.66 54.776 269.116 56.376 270.172 58.456C271.26 60.504 271.804 62.888 271.804 65.608C271.804 68.328 271.26 70.744 270.172 72.856C269.116 74.936 267.66 76.552 265.804 77.704C263.98 78.856 261.932 79.432 259.66 79.432C257.708 79.432 255.98 79.032 254.476 78.232C253.004 77.432 251.804 76.424 250.876 75.208V91.672H244.156V52.408H250.876V56.248ZM264.94 65.608C264.94 64.008 264.604 62.632 263.932 61.48C263.292 60.296 262.428 59.4 261.34 58.792C260.284 58.184 259.132 57.88 257.884 57.88C256.668 57.88 255.516 58.2 254.428 58.84C253.372 59.448 252.508 60.344 251.836 61.528C251.196 62.712 250.876 64.104 250.876 65.704C250.876 67.304 251.196 68.696 251.836 69.88C252.508 71.064 253.372 71.976 254.428 72.616C255.516 73.224 256.668 73.528 257.884 73.528C259.132 73.528 260.284 73.208 261.34 72.568C262.428 71.928 263.292 71.016 263.932 69.832C264.604 68.648 264.94 67.24 264.94 65.608ZM274.959 65.608C274.959 62.92 275.487 60.536 276.543 58.456C277.631 56.376 279.087 54.776 280.911 53.656C282.767 52.536 284.831 51.976 287.103 51.976C289.087 51.976 290.815 52.376 292.287 53.176C293.791 53.976 294.991 54.984 295.887 56.2V52.408H302.655V79H295.887V75.112C295.023 76.36 293.823 77.4 292.287 78.232C290.783 79.032 289.039 79.432 287.055 79.432C284.815 79.432 282.767 78.856 280.911 77.704C279.087 76.552 277.631 74.936 276.543 72.856C275.487 70.744 274.959 68.328 274.959 65.608ZM295.887 65.704C295.887 64.072 295.567 62.68 294.927 61.528C294.287 60.344 293.423 59.448 292.335 58.84C291.247 58.2 290.079 57.88 288.831 57.88C287.583 57.88 286.431 58.184 285.375 58.792C284.319 59.4 283.455 60.296 282.783 61.48C282.143 62.632 281.823 64.008 281.823 65.608C281.823 67.208 282.143 68.616 282.783 69.832C283.455 71.016 284.319 71.928 285.375 72.568C286.463 73.208 287.615 73.528 288.831 73.528C290.079 73.528 291.247 73.224 292.335 72.616C293.423 71.976 294.287 71.08 294.927 69.928C295.567 68.744 295.887 67.336 295.887 65.704ZM315.938 43.48V79H309.218V43.48H315.938Z" fill="white"/>
|
|
||||||
</svg>;
|
|
||||||
|
Before Width: | Height: | Size: 4.6 KiB |
@ -1,5 +0,0 @@
|
|||||||
<svg width="200" height="200" viewBox="0 0 268 243" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<circle cx="103.125" cy="81" r="75" fill="#FF0000" />
|
|
||||||
<circle cx="209.125" cy="127.875" r="28.125" fill="#0075FF" />
|
|
||||||
<path d="M31.92 200.66V216.74C31.92 217.86 32.18 218.68 32.7 219.2C33.26 219.68 34.18 219.92 35.46 219.92H39.36V227H34.08C27 227 23.46 223.56 23.46 216.68V200.66H19.5V193.76H23.46V185.54H31.92V193.76H39.36V200.66H31.92ZM76.3017 209.66C76.3017 210.86 76.2217 211.94 76.0617 212.9H51.7617C51.9617 215.3 52.8017 217.18 54.2817 218.54C55.7617 219.9 57.5817 220.58 59.7417 220.58C62.8617 220.58 65.0817 219.24 66.4017 216.56H75.4617C74.5017 219.76 72.6617 222.4 69.9417 224.48C67.2217 226.52 63.8817 227.54 59.9217 227.54C56.7217 227.54 53.8417 226.84 51.2817 225.44C48.7617 224 46.7817 221.98 45.3417 219.38C43.9417 216.78 43.2417 213.78 43.2417 210.38C43.2417 206.94 43.9417 203.92 45.3417 201.32C46.7417 198.72 48.7017 196.72 51.2217 195.32C53.7417 193.92 56.6417 193.22 59.9217 193.22C63.0817 193.22 65.9017 193.9 68.3817 195.26C70.9017 196.62 72.8417 198.56 74.2017 201.08C75.6017 203.56 76.3017 206.42 76.3017 209.66ZM67.6017 207.26C67.5617 205.1 66.7817 203.38 65.2617 202.1C63.7417 200.78 61.8817 200.12 59.6817 200.12C57.6017 200.12 55.8417 200.76 54.4017 202.04C53.0017 203.28 52.1417 205.02 51.8217 207.26H67.6017ZM80.273 210.38C80.273 206.94 80.973 203.94 82.373 201.38C83.773 198.78 85.713 196.78 88.193 195.38C90.673 193.94 93.513 193.22 96.713 193.22C100.833 193.22 104.233 194.26 106.913 196.34C109.633 198.38 111.453 201.26 112.373 204.98H103.313C102.833 203.54 102.013 202.42 100.853 201.62C99.733 200.78 98.333 200.36 96.653 200.36C94.253 200.36 92.353 201.24 90.953 203C89.553 204.72 88.853 207.18 88.853 210.38C88.853 213.54 89.553 216 90.953 217.76C92.353 219.48 94.253 220.34 96.653 220.34C100.053 220.34 102.273 218.82 103.313 215.78H112.373C111.453 219.38 109.633 222.24 106.913 224.36C104.193 226.48 100.793 227.54 96.713 227.54C93.513 227.54 90.673 226.84 88.193 225.44C85.713 224 83.773 222 82.373 219.44C80.973 216.84 80.273 213.82 80.273 210.38ZM137.247 193.28C139.767 193.28 142.007 193.84 143.967 194.96C145.927 196.04 147.447 197.66 148.527 199.82C149.647 201.94 150.207 204.5 150.207 207.5V227H141.807V208.64C141.807 206 141.147 203.98 139.827 202.58C138.507 201.14 136.707 200.42 134.427 200.42C132.107 200.42 130.267 201.14 128.907 202.58C127.587 203.98 126.927 206 126.927 208.64V227H118.527V182.6H126.927V197.9C128.007 196.46 129.447 195.34 131.247 194.54C133.047 193.7 135.047 193.28 137.247 193.28ZM166.595 198.56C167.675 197.04 169.155 195.78 171.035 194.78C172.955 193.74 175.135 193.22 177.575 193.22C180.415 193.22 182.975 193.92 185.255 195.32C187.575 196.72 189.395 198.72 190.715 201.32C192.075 203.88 192.755 206.86 192.755 210.26C192.755 213.66 192.075 216.68 190.715 219.32C189.395 221.92 187.575 223.94 185.255 225.38C182.975 226.82 180.415 227.54 177.575 227.54C175.135 227.54 172.975 227.04 171.095 226.04C169.255 225.04 167.755 223.78 166.595 222.26V242.84H158.195V193.76H166.595V198.56ZM184.175 210.26C184.175 208.26 183.755 206.54 182.915 205.1C182.115 203.62 181.035 202.5 179.675 201.74C178.355 200.98 176.915 200.6 175.355 200.6C173.835 200.6 172.395 201 171.035 201.8C169.715 202.56 168.635 203.68 167.795 205.16C166.995 206.64 166.595 208.38 166.595 210.38C166.595 212.38 166.995 214.12 167.795 215.6C168.635 217.08 169.715 218.22 171.035 219.02C172.395 219.78 173.835 220.16 175.355 220.16C176.915 220.16 178.355 219.76 179.675 218.96C181.035 218.16 182.115 217.02 182.915 215.54C183.755 214.06 184.175 212.3 184.175 210.26ZM196.699 210.26C196.699 206.9 197.359 203.92 198.679 201.32C200.039 198.72 201.859 196.72 204.139 195.32C206.459 193.92 209.039 193.22 211.879 193.22C214.359 193.22 216.519 193.72 218.359 194.72C220.239 195.72 221.739 196.98 222.859 198.5V193.76H231.319V227H222.859V222.14C221.779 223.7 220.279 225 218.359 226.04C216.479 227.04 214.299 227.54 211.819 227.54C209.019 227.54 206.459 226.82 204.139 225.38C201.859 223.94 200.039 221.92 198.679 219.32C197.359 216.68 196.699 213.66 196.699 210.26ZM222.859 210.38C222.859 208.34 222.459 206.6 221.659 205.16C220.859 203.68 219.779 202.56 218.419 201.8C217.059 201 215.599 200.6 214.039 200.6C212.479 200.6 211.039 200.98 209.719 201.74C208.399 202.5 207.319 203.62 206.479 205.1C205.679 206.54 205.279 208.26 205.279 210.26C205.279 212.26 205.679 214.02 206.479 215.54C207.319 217.02 208.399 218.16 209.719 218.96C211.079 219.76 212.519 220.16 214.039 220.16C215.599 220.16 217.059 219.78 218.419 219.02C219.779 218.22 220.859 217.1 221.659 215.66C222.459 214.18 222.859 212.42 222.859 210.38ZM247.923 182.6V227H239.523V182.6H247.923Z" fill="white" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.6 KiB |
@ -1,4 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<circle cx="11" cy="16" r="8" fill="#FF0000" />
|
|
||||||
<circle cx="25" cy="21" r="3" fill="#0075FF" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 203 B |
3
src/assets/svg/minus.svg
Normal file
3
src/assets/svg/minus.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19 12L5 12" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 144 B |
@ -1,3 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M20.9999 12.79C20.8426 14.4922 20.2038 16.1144 19.1581 17.4668C18.1125 18.8192 16.7034 19.8458 15.0956 20.4265C13.4878 21.0073 11.7479 21.1181 10.0794 20.7461C8.41092 20.3741 6.8829 19.5345 5.67413 18.3258C4.46536 17.117 3.62584 15.589 3.25381 13.9205C2.88178 12.252 2.99262 10.5121 3.57336 8.9043C4.15411 7.29651 5.18073 5.88737 6.53311 4.84175C7.8855 3.79614 9.5077 3.15731 11.2099 3C10.2133 4.34827 9.73375 6.00945 9.85843 7.68141C9.98312 9.35338 10.7038 10.9251 11.8893 12.1106C13.0748 13.2961 14.6465 14.0168 16.3185 14.1415C17.9905 14.2662 19.6516 13.7866 20.9999 12.79Z" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
|
|
||||||
</svg>;
|
|
||||||
|
Before Width: | Height: | Size: 757 B |
5
src/assets/svg/more.svg
Normal file
5
src/assets/svg/more.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect x="21" y="10" width="4" height="4" rx="2" transform="rotate(90 21 10)" />
|
||||||
|
<rect x="14" y="10" width="4" height="4" rx="2" transform="rotate(90 14 10)" />
|
||||||
|
<rect x="7" y="10" width="4" height="4" rx="2" transform="rotate(90 7 10)" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 318 B |
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
|
||||||
</svg>;
|
|
||||||
|
Before Width: | Height: | Size: 413 B |
4
src/assets/svg/plus.svg
Normal file
4
src/assets/svg/plus.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M19 12L5 12" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M12 5L12 19" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 208 B |
5
src/assets/svg/printer.svg
Normal file
5
src/assets/svg/printer.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M9 18H5C3.89543 18 3 17.1046 3 16V11C3 9.89543 3.89543 9 5 9H14.25H19C20.1046 9 21 9.89543 21 11V11.7V16C21 17.1046 20.1046 18 19 18H15" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M7 9V5C7 3.89543 7.89543 3 9 3H13.25H15.2C16.1941 3 17 3.80589 17 4.8V9H7Z" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M9 20V15C9 14.4477 9.44772 14 10 14H12.75H14C14.5523 14 15 14.4477 15 15V16.1V20C15 20.5523 14.5523 21 14 21H10C9.44772 21 9 20.5523 9 20Z" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 587 B |
@ -1,7 +1,4 @@
|
|||||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<g opacity="0.6">
|
<path d="M19.8995 19.9246L14.2427 14.2678" stroke-width="2" stroke-linecap="round"/>
|
||||||
<path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<path d="M14.2426 5.78251C16.5858 8.12565 16.5858 11.9246 14.2426 14.2678C11.8995 16.6109 8.1005 16.6109 5.75736 14.2678C3.41421 11.9246 3.41421 8.12565 5.75736 5.78251C8.1005 3.43936 11.8995 3.43936 14.2426 5.78251Z" stroke-width="2"/>
|
||||||
<path d="M20.9999 21L16.6499 16.65" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 411 B After Width: | Height: | Size: 402 B |
@ -1,11 +0,0 @@
|
|||||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<rect x="2" y="2" width="4" height="4" rx="1" />
|
|
||||||
<rect x="10" y="2" width="4" height="4" rx="1" />
|
|
||||||
<rect x="18" y="2" width="4" height="4" rx="1" />
|
|
||||||
<rect x="2" y="10" width="4" height="4" rx="1" />
|
|
||||||
<rect x="10" y="10" width="4" height="4" rx="1" />
|
|
||||||
<rect x="18" y="10" width="4" height="4" rx="1" />
|
|
||||||
<rect x="2" y="18" width="4" height="4" rx="1" />
|
|
||||||
<rect x="10" y="18" width="4" height="4" rx="1" />
|
|
||||||
<rect x="18" y="18" width="4" height="4" rx="1" />
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 550 B |
3
src/assets/svg/share.svg
Normal file
3
src/assets/svg/share.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5 2C15.567 2 14 3.567 14 5.5C14 5.76819 14.0302 6.02934 14.0873 6.28023L8.87961 9.2237C8.15209 8.46927 7.13084 8 6 8C3.79086 8 2 9.79086 2 12C2 14.2091 3.79086 16 6 16C7.13084 16 8.15208 15.5307 8.87961 14.7763L14.0873 17.7198C14.0302 17.9707 14 18.2318 14 18.5C14 20.433 15.567 22 17.5 22C19.433 22 21 20.433 21 18.5C21 16.567 19.433 15 17.5 15C16.5572 15 15.7014 15.3728 15.0721 15.979L9.86462 13.0357C9.95292 12.7054 10 12.3582 10 12C10 11.6418 9.95292 11.2946 9.86462 10.9643L15.0721 8.02097C15.7014 8.6272 16.5572 9 17.5 9C19.433 9 21 7.433 21 5.5C21 3.567 19.433 2 17.5 2ZM6 10C4.89543 10 4 10.8954 4 12C4 13.1046 4.89543 14 6 14C7.10457 14 8 13.1046 8 12C8 10.8954 7.10457 10 6 10ZM16 5.5C16 4.67157 16.6716 4 17.5 4C18.3284 4 19 4.67157 19 5.5C19 6.32843 18.3284 7 17.5 7C16.6716 7 16 6.32843 16 5.5ZM17.5 17C16.6716 17 16 17.6716 16 18.5C16 19.3284 16.6716 20 17.5 20C18.3284 20 19 19.3284 19 18.5C19 17.6716 18.3284 17 17.5 17Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
@ -1,7 +0,0 @@
|
|||||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g opacity="0.6">
|
|
||||||
<path d="M4 3H20C20.5304 3 21.0391 3.21071 21.4142 3.58579C21.7893 3.96086 22 4.46957 22 5V11C22 13.6522 20.9464 16.1957 19.0711 18.0711C17.1957 19.9464 14.6522 21 12 21C10.6868 21 9.38642 20.7413 8.17317 20.2388C6.95991 19.7362 5.85752 18.9997 4.92893 18.0711C3.05357 16.1957 2 13.6522 2 11V5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3V3Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M8 10L12 14L16 10" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 649 B |
@ -1,3 +0,0 @@
|
|||||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M27.1729 11.4266L25.5329 13.8933C26.3238 15.4707 26.711 17.2197 26.6598 18.9836C26.6086 20.7474 26.1206 22.4711 25.2396 24H6.75958C5.61447 22.0134 5.13997 19.7108 5.40643 17.4334C5.67289 15.156 6.66613 13.0251 8.23888 11.3565C9.81164 9.688 11.8802 8.57068 14.1379 8.17022C16.3956 7.76976 18.7222 8.10747 20.7729 9.13329L23.2396 7.49329C20.7282 5.88291 17.7493 5.1613 14.7794 5.44387C11.8095 5.72645 9.02017 6.99689 6.85757 9.05197C4.69497 11.1071 3.28406 13.8281 2.85054 16.7797C2.41701 19.7314 2.98591 22.7431 4.46625 25.3333C4.69893 25.7363 5.03303 26.0715 5.43535 26.3054C5.83768 26.5393 6.29421 26.6638 6.75958 26.6666H25.2262C25.6961 26.6685 26.1582 26.5462 26.5656 26.312C26.973 26.0779 27.3113 25.7402 27.5462 25.3333C28.7747 23.2052 29.3913 20.779 29.3277 18.3226C29.2642 15.8661 28.5231 13.4751 27.1862 11.4133L27.1729 11.4266ZM14.1196 20.5466C14.3672 20.7946 14.6613 20.9913 14.9851 21.1254C15.3088 21.2596 15.6558 21.3287 16.0062 21.3287C16.3567 21.3287 16.7037 21.2596 17.0274 21.1254C17.3511 20.9913 17.6453 20.7946 17.8929 20.5466L25.4396 9.22662L14.1196 16.7733C13.8716 17.021 13.675 17.3151 13.5408 17.6388C13.4066 17.9625 13.3375 18.3095 13.3375 18.66C13.3375 19.0104 13.4066 19.3574 13.5408 19.6811C13.675 20.0049 13.8716 20.299 14.1196 20.5466V20.5466Z" fill="white"/>
|
|
||||||
</svg>;
|
|
||||||
|
Before Width: | Height: | Size: 1.4 KiB |
@ -1,7 +0,0 @@
|
|||||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g opacity="0.6">
|
|
||||||
<path d="M18 6L6 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M6 6L18 18" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 316 B |
@ -1,9 +0,0 @@
|
|||||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g opacity="0.6">
|
|
||||||
<path d="M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M8.5 11C10.7091 11 12.5 9.20914 12.5 7C12.5 4.79086 10.7091 3 8.5 3C6.29086 3 4.5 4.79086 4.5 7C4.5 9.20914 6.29086 11 8.5 11Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M20 8V14" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M23 11H17" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 744 B |
@ -1,7 +1,4 @@
|
|||||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
<g opacity="0.6">
|
<circle cx="12" cy="8" r="5" stroke-width="2"/>
|
||||||
<path d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
<path d="M4 21V18C4 15.2386 6.23858 13 9 13H15C17.7614 13 20 15.2386 20 18V21" stroke-width="2" stroke-linecap="round"/>
|
||||||
<path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
</svg>
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 548 B After Width: | Height: | Size: 249 B |
@ -1,9 +0,0 @@
|
|||||||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<g opacity="0.6">
|
|
||||||
<path d="M17 21V19C17 17.9391 16.5786 16.9217 15.8284 16.1716C15.0783 15.4214 14.0609 15 13 15H5C3.93913 15 2.92172 15.4214 2.17157 16.1716C1.42143 16.9217 1 17.9391 1 19V21" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M23 21V19C22.9993 18.1137 22.7044 17.2528 22.1614 16.5523C21.6184 15.8519 20.8581 15.3516 20 15.13" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
<path d="M16 3.13C16.8604 3.35031 17.623 3.85071 18.1676 4.55232C18.7122 5.25392 19.0078 6.11683 19.0078 7.005C19.0078 7.89318 18.7122 8.75608 18.1676 9.45769C17.623 10.1593 16.8604 10.6597 16 10.88" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 996 B |
4
src/assets/svg/xmark.svg
Normal file
4
src/assets/svg/xmark.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M16.9497 16.9498L7.05026 7.05027" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
<path d="M16.9497 7.05029L7.05025 16.9498" stroke-width="2" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 250 B |
30
src/components/Badge.stories.tsx
Normal file
30
src/components/Badge.stories.tsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import React, { Children } from "react";
|
||||||
|
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||||
|
import Badge from "./Badge";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default{
|
||||||
|
title: 'Badge',
|
||||||
|
component: Badge,
|
||||||
|
} as ComponentMeta<typeof Badge>;
|
||||||
|
|
||||||
|
const Template: ComponentStory<typeof Badge> = (args) => <Badge {...args} />;
|
||||||
|
|
||||||
|
export const High = Template.bind({});
|
||||||
|
High.args = {
|
||||||
|
emphasis: 'high',
|
||||||
|
children: ['Tom Cook'],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Medium = Template.bind({});
|
||||||
|
Medium.args = {
|
||||||
|
emphasis: 'medium',
|
||||||
|
children: ['Tanya Fox'],
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Low = Template.bind({});
|
||||||
|
Low.args = {
|
||||||
|
emphasis:'low',
|
||||||
|
children:['Hellen Schmidt'],
|
||||||
|
};
|
||||||
51
src/components/Badge.tsx
Normal file
51
src/components/Badge.tsx
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Imports */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
import classNames from "classnames";
|
||||||
|
import { StyleType } from "core/_variants";
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Component props */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
emphasis?: StyleType;
|
||||||
|
children: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
iconed?: boolean;
|
||||||
|
onClick?: () => void;
|
||||||
|
} & Omit<React.MouseEventHandler<HTMLSpanElement>, "">;
|
||||||
|
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Component implementation */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
function Badge({
|
||||||
|
className,
|
||||||
|
children,
|
||||||
|
onClick,
|
||||||
|
emphasis = "low",
|
||||||
|
...props
|
||||||
|
}: Props): JSX.Element {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
onClick={onClick}
|
||||||
|
className={classNames(
|
||||||
|
"border p-2 rounded-sm text-xs text-center",
|
||||||
|
{
|
||||||
|
"cursor-pointer": onClick,
|
||||||
|
"border-transparent": emphasis == "low",
|
||||||
|
"bg-blue-400 text-white": emphasis == "high",
|
||||||
|
"border-gray-400 background-gray-200": emphasis == "medium",
|
||||||
|
},
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
export default Badge;
|
||||||
28
src/components/BaseLayout.tsx
Normal file
28
src/components/BaseLayout.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import React from "react";
|
||||||
|
type Props = {
|
||||||
|
header?: React.ReactElement,
|
||||||
|
children: React.ReactNode,
|
||||||
|
footer?: React.ReactElement,
|
||||||
|
className : string,
|
||||||
|
}
|
||||||
|
|
||||||
|
function BaseLayout( { header, footer, children, className }: Props ) {
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
<header>
|
||||||
|
{header}
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
{footer}
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BaseLayout;
|
||||||
|
|
||||||
116
src/components/Button.tsx
Normal file
116
src/components/Button.tsx
Normal file
@ -0,0 +1,116 @@
|
|||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Imports */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
import React from "react";
|
||||||
|
import classNames from "classnames";
|
||||||
|
import '../index.css'
|
||||||
|
import { StyleType } from "core/_variants";
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Component props */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
type Props = {
|
||||||
|
emphasis?: StyleType | undefined,
|
||||||
|
disabled?:boolean,
|
||||||
|
iconed?: boolean,
|
||||||
|
} & Omit<React.ComponentPropsWithoutRef<"button">, "">
|
||||||
|
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Emphasis styles */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
const buttonEnableHighEmphasis = `
|
||||||
|
bg-blue-500
|
||||||
|
hover:bg-blue-400
|
||||||
|
active:bg-blue-700
|
||||||
|
focus:shadow-lg shadow-blue-500
|
||||||
|
focus:outline outline-blue-400/10 outline-8`;
|
||||||
|
|
||||||
|
const buttonDisabledHighEmphasis =
|
||||||
|
`bg-gray-200
|
||||||
|
focus:outline-none`;
|
||||||
|
|
||||||
|
const buttonGeneralHighEmphasis = `
|
||||||
|
text-white
|
||||||
|
`
|
||||||
|
|
||||||
|
const buttonEnabledMediumEmphasis =
|
||||||
|
`text-blue-500
|
||||||
|
border-gray-500
|
||||||
|
active:border-blue-600
|
||||||
|
active:text-blue-600
|
||||||
|
hover:border-blue-400
|
||||||
|
hover:text-blue-400
|
||||||
|
focus:outline outline-blue-400/10 outline-8
|
||||||
|
focus:border-blue-600/70`;
|
||||||
|
|
||||||
|
|
||||||
|
const buttonDisabledMediumEmphasis =
|
||||||
|
`text-gray-200
|
||||||
|
border-gray-200
|
||||||
|
focus:outline-none`;
|
||||||
|
|
||||||
|
const buttonGeneralMediumEmphasis =
|
||||||
|
`bg-white
|
||||||
|
border`;
|
||||||
|
|
||||||
|
|
||||||
|
const buttonEnabledLowEmphasis =
|
||||||
|
`text-gray-900
|
||||||
|
hover:text-blue-400
|
||||||
|
active:text-blue-600
|
||||||
|
focus:bg-gray-50`;
|
||||||
|
|
||||||
|
const buttonDisabledLowEmphasis =
|
||||||
|
`text-gray-200`;
|
||||||
|
|
||||||
|
const buttonGenerealLowEmphasis =
|
||||||
|
`focus:outline-none
|
||||||
|
bg-transparent`;
|
||||||
|
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* Component implementation */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
export const Button = ({
|
||||||
|
emphasis ='high',
|
||||||
|
disabled = false,
|
||||||
|
iconed = false,
|
||||||
|
className,
|
||||||
|
children, ...props} : Props) => {
|
||||||
|
|
||||||
|
return(
|
||||||
|
<button
|
||||||
|
//TODO change on click event
|
||||||
|
onClick={!disabled ? () => alert('Click') : undefined}
|
||||||
|
|
||||||
|
className={classNames([
|
||||||
|
'text-center',
|
||||||
|
'px-4 py-2 text-[15px]',
|
||||||
|
'rounded',
|
||||||
|
{
|
||||||
|
'!cursor-default': disabled,
|
||||||
|
'transition-all': !disabled,
|
||||||
|
'transition duration-200':!disabled,
|
||||||
|
|
||||||
|
},
|
||||||
|
{ // Define high emphasis
|
||||||
|
[`${buttonEnableHighEmphasis}`]: !disabled && emphasis === 'high',
|
||||||
|
[`${buttonDisabledHighEmphasis}`]: disabled && emphasis === 'high',
|
||||||
|
[`${buttonGeneralHighEmphasis}`] : emphasis === 'high',
|
||||||
|
// Define medium emphasis
|
||||||
|
[`${buttonEnabledMediumEmphasis}`]: !disabled && emphasis === 'medium',
|
||||||
|
[`${buttonDisabledMediumEmphasis}`]: disabled && emphasis === 'medium',
|
||||||
|
[`${buttonGeneralMediumEmphasis}`]: emphasis === 'medium',
|
||||||
|
// Define low emphasis
|
||||||
|
[`${buttonEnabledLowEmphasis}`]: !disabled && emphasis === 'low',
|
||||||
|
[`${buttonDisabledLowEmphasis}`]: disabled && emphasis ==='low',
|
||||||
|
[`${buttonGenerealLowEmphasis}`]: emphasis === 'low',
|
||||||
|
|
||||||
|
},
|
||||||
|
className,
|
||||||
|
])}
|
||||||
|
{...props}>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@ -1,8 +1,7 @@
|
|||||||
import Checkbox from "./Checkbox";
|
|
||||||
import { Meta, Story, ComponentStory, ComponentMeta } from "@storybook/react";
|
|
||||||
import React, { useState } from "react";
|
import React, { useState } from "react";
|
||||||
import { ReactComponent as Checkmark } from "assets/svg/check.svg";
|
import { Meta, Story, ComponentStory, ComponentMeta } from "@storybook/react";
|
||||||
import { boolean } from "yup/lib/locale";
|
|
||||||
|
import Checkbox from "./Checkbox";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: "Checkbox",
|
title: "Checkbox",
|
||||||
|
|||||||
88
src/components/Container.stories.tsx
Normal file
88
src/components/Container.stories.tsx
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
||||||
|
|
||||||
|
import Container from './Container';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// Title inside navigation bar
|
||||||
|
title: 'Container',
|
||||||
|
// Component to test
|
||||||
|
component: Container,
|
||||||
|
// Clarifying the way how to process specific
|
||||||
|
// properties of your component and which values
|
||||||
|
// it can accept.
|
||||||
|
} as ComponentMeta<typeof Container>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* This is a way to define a tempalte for your component.
|
||||||
|
*
|
||||||
|
* This template should cover all the states.
|
||||||
|
*
|
||||||
|
* In most cases you should just distruct args attribute
|
||||||
|
* on a returning component.
|
||||||
|
*/
|
||||||
|
const Template: ComponentStory<typeof Container> = (args) => (
|
||||||
|
<Container {...args}></Container>
|
||||||
|
);
|
||||||
|
//
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
/* States of your component */
|
||||||
|
/* -------------------------------------------------------------------------- */
|
||||||
|
|
||||||
|
export const Desktop: ComponentStory<typeof Container> = Template.bind({});
|
||||||
|
Desktop.args = {
|
||||||
|
className: 'bg-blue-500 w-840 block',
|
||||||
|
children: <div>840px</div>,
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
Desktop.parameters = {
|
||||||
|
viewport: {
|
||||||
|
defaultViewport: 'desktop',
|
||||||
|
|
||||||
|
viewports: {
|
||||||
|
|
||||||
|
desktop: {
|
||||||
|
name: 'main_container',
|
||||||
|
styles: {
|
||||||
|
width: '840px',
|
||||||
|
height: '100%',
|
||||||
|
paddingLeft: '0.5rem',
|
||||||
|
paddingRight: '0.5rem',
|
||||||
|
},
|
||||||
|
type: 'desktop',
|
||||||
|
},
|
||||||
|
|
||||||
|
screen_sm: {
|
||||||
|
name: 'screen_sm',
|
||||||
|
styles: {
|
||||||
|
width: 'calc(100% - 30px)',
|
||||||
|
height: '100%',
|
||||||
|
},
|
||||||
|
type: 'tablet',
|
||||||
|
},
|
||||||
|
|
||||||
|
screen_md: {
|
||||||
|
name: 'screen_md',
|
||||||
|
styles: {
|
||||||
|
width: 'calc(100% - 30px)',
|
||||||
|
height: '100%',
|
||||||
|
},
|
||||||
|
type: 'tablet',
|
||||||
|
},
|
||||||
|
|
||||||
|
screen_lg_xl_2xl: {
|
||||||
|
name: 'lg-xl-2xl',
|
||||||
|
styles: {
|
||||||
|
width: '840px',
|
||||||
|
height: '100%',
|
||||||
|
},
|
||||||
|
type: 'desktop',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
23
src/components/Container.tsx
Normal file
23
src/components/Container.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import classNames from "classnames";
|
||||||
|
import React from "react";
|
||||||
|
type Props = {
|
||||||
|
/**
|
||||||
|
* Content of component
|
||||||
|
*/
|
||||||
|
children: React.ReactNode;
|
||||||
|
/**
|
||||||
|
* Component styling
|
||||||
|
*/
|
||||||
|
className?: string;
|
||||||
|
} & Omit<React.ComponentPropsWithoutRef<"div">, "">
|
||||||
|
/**
|
||||||
|
* Main container to handle page content max-width on
|
||||||
|
* different screen sizes
|
||||||
|
*/
|
||||||
|
export default function Container({children, className}: Props) {
|
||||||
|
return (
|
||||||
|
<div className={ classNames('container mx-auto', className) }>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
37
src/components/Icons.stories.tsx
Normal file
37
src/components/Icons.stories.tsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
||||||
|
|
||||||
|
import {
|
||||||
|
SVGBookmark
|
||||||
|
} from "./icons";
|
||||||
|
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
item: React.FunctionComponent<React.SVGProps<SVGSVGElement>>
|
||||||
|
}& React.SVGProps<SVGSVGElement>;
|
||||||
|
|
||||||
|
const Icon = ({item, ...props}: Props) => {
|
||||||
|
const Item = item;
|
||||||
|
return <span><Item {...props} /></span>
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
// Title inside navigation bar
|
||||||
|
title: 'Icons',
|
||||||
|
// Component to test
|
||||||
|
component: Icon,
|
||||||
|
// Specify subcomponents to be able to work with
|
||||||
|
// nested structure,
|
||||||
|
} as ComponentMeta<typeof Icon>;
|
||||||
|
|
||||||
|
|
||||||
|
const Template: ComponentStory<typeof Icon> = (args) => (
|
||||||
|
<Icon {...args} />
|
||||||
|
);
|
||||||
|
|
||||||
|
export const Bookmark = Template.bind({});
|
||||||
|
Bookmark.args = {
|
||||||
|
item: SVGBookmark,
|
||||||
|
className: "fill-blue-500"
|
||||||
|
};
|
||||||
41
src/components/Radio.tsx
Normal file
41
src/components/Radio.tsx
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
import classNames from "classnames";
|
||||||
|
import React from "react";
|
||||||
|
import { ReactComponent as Checkmark } from "assets/svg/check.svg";
|
||||||
|
|
||||||
|
export type Props = {
|
||||||
|
/**
|
||||||
|
* An Element next to the Radio
|
||||||
|
*/
|
||||||
|
children?: React.ReactNode;
|
||||||
|
} & Omit<React.HTMLProps<HTMLInputElement>, "type">;
|
||||||
|
|
||||||
|
const Radio = ({ children, className, ...props }: Props) => {
|
||||||
|
return (
|
||||||
|
<label
|
||||||
|
className={classNames(
|
||||||
|
" group inline-flex gap-x-4 text-base select-none",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
htmlFor={props.id}
|
||||||
|
>
|
||||||
|
<input className="hidden peer" type="radio" {...props} />
|
||||||
|
<div
|
||||||
|
className=" w-6 h-6 rounded-full box-border p-0.5 border-2 border-gray-300
|
||||||
|
peer-checked:border-blue-500
|
||||||
|
group-hover:border-blue-500
|
||||||
|
|
||||||
|
transition-all
|
||||||
|
|
||||||
|
after:content-[''] after:w-full after:h-full after:block after:bg-blue-500
|
||||||
|
after:rounded-full after:scale-0 after:peer-checked:scale-100 duration-200
|
||||||
|
|
||||||
|
peer-disabled:border-gray-300 peer-disabled:bg-gray-75/5
|
||||||
|
after:peer-disabled:bg-[#8C8C8C]
|
||||||
|
|
||||||
|
hover:border-blue-500"
|
||||||
|
></div>
|
||||||
|
{children}
|
||||||
|
</label>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default Radio;
|
||||||
48
src/components/breadcrumbs.tsx
Normal file
48
src/components/breadcrumbs.tsx
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import React, { Children, ReactElement } from "react";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
divider: "dotted" | "slash";
|
||||||
|
children: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
} ;
|
||||||
|
|
||||||
|
/* ---------- a random number for a unique key (react requirement) ---------- */
|
||||||
|
|
||||||
|
function randomInteger( min: number, max: number ) {
|
||||||
|
let rand = min + Math.random() * (max + 1 - min);
|
||||||
|
return Math.floor(rand);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ----------------------- get the divider as designed ---------------------- */
|
||||||
|
|
||||||
|
function GetDivider( symbol: string ) {
|
||||||
|
const dividers = {
|
||||||
|
'dotted' : <span className='inline-block h-1 w-1 bg-gray-500 rounded m-1 text-center' key={ randomInteger(20, 1000) }></span>,
|
||||||
|
'slash' : <span className='fz-12 f-gray-700 m-1' key={ randomInteger(20, 1000) }>/</span>,
|
||||||
|
}
|
||||||
|
return ( symbol === 'dotted') ? dividers.dotted : dividers.slash
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Breadcrumbs( { divider ,children, className }: Props ) {
|
||||||
|
|
||||||
|
/* -------------- Convert the children into an array and insert ------------- */
|
||||||
|
/* ------------------the elements with the divider into it ------------------ */
|
||||||
|
|
||||||
|
let childrenToArray = React.Children.toArray(children)
|
||||||
|
let LinkAndDivider: any
|
||||||
|
LinkAndDivider = [];
|
||||||
|
|
||||||
|
for( let i = 0; i < childrenToArray.length; i++ ) {
|
||||||
|
|
||||||
|
let dividerComponent = GetDivider( divider )
|
||||||
|
LinkAndDivider = LinkAndDivider.concat( childrenToArray[i] ).concat( dividerComponent )
|
||||||
|
}
|
||||||
|
LinkAndDivider.pop();
|
||||||
|
|
||||||
|
return(
|
||||||
|
<div className={ className }>
|
||||||
|
{ LinkAndDivider }
|
||||||
|
</div>
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -4,7 +4,6 @@ import React, { Fragment } from "react";
|
|||||||
import _ModalTitle from "./_ModalTitle";
|
import _ModalTitle from "./_ModalTitle";
|
||||||
import _ModalFooter from "./_ModalFooter";
|
import _ModalFooter from "./_ModalFooter";
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
import _ModalCloseButton from "./_ModalCloseButton";
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
@ -57,6 +56,5 @@ function Modal ({
|
|||||||
|
|
||||||
Modal.Header = _ModalTitle;
|
Modal.Header = _ModalTitle;
|
||||||
Modal.Footer = _ModalFooter;
|
Modal.Footer = _ModalFooter;
|
||||||
Modal.CloseButton = _ModalCloseButton;
|
|
||||||
|
|
||||||
export default Modal;
|
export default Modal;
|
||||||
|
|||||||
@ -1,24 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import Button from "components/controls/Button";
|
|
||||||
import { ReactComponent as SVGTimesIcon } from "assets/svg/times.svg";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
onClose: VoidFunction,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function _ModalCloseButton({onClose}: Props) {
|
|
||||||
return (
|
|
||||||
<div className="absolute right-4 top-4">
|
|
||||||
<Button
|
|
||||||
htmlType="button"
|
|
||||||
iconed="only"
|
|
||||||
className="w-10 h-10"
|
|
||||||
variant="gray"
|
|
||||||
type="text"
|
|
||||||
onClick={onClose}
|
|
||||||
>
|
|
||||||
<SVGTimesIcon className="w-full h-full stroke-current" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,6 +1,5 @@
|
|||||||
import { Combobox } from "@headlessui/react";
|
import { Combobox } from "@headlessui/react";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { ReactComponent as SVGDropdownIcon } from "assets/svg/dropdown.svg";
|
|
||||||
import classNames from "classnames";
|
import classNames from "classnames";
|
||||||
|
|
||||||
type OptionPropsArg = {
|
type OptionPropsArg = {
|
||||||
@ -50,10 +49,6 @@ export default function Combox<T = any>({
|
|||||||
/>
|
/>
|
||||||
<Combobox.Button className="absolute inset-y-0 right-0 p-2.5 flex items-center w-10 hover:bg-blue-500
|
<Combobox.Button className="absolute inset-y-0 right-0 p-2.5 flex items-center w-10 hover:bg-blue-500
|
||||||
border-l-2 border-blue-900/50 transition-colors">
|
border-l-2 border-blue-900/50 transition-colors">
|
||||||
<SVGDropdownIcon
|
|
||||||
className="w-full h-full fill-white"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</Combobox.Button>
|
</Combobox.Button>
|
||||||
</div>
|
</div>
|
||||||
<Combobox.Options
|
<Combobox.Options
|
||||||
@ -77,7 +72,7 @@ export default function Combox<T = any>({
|
|||||||
}
|
}
|
||||||
value={valueMaper ? valueMaper(option) : option}
|
value={valueMaper ? valueMaper(option) : option}
|
||||||
>
|
>
|
||||||
{(stats) => itemBuilder(stats, option)}
|
|
||||||
</Combobox.Option>
|
</Combobox.Option>
|
||||||
))
|
))
|
||||||
)}
|
)}
|
||||||
|
|||||||
33
src/components/icons.tsx
Normal file
33
src/components/icons.tsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
export { ReactComponent as SVGArrowBigRight } from "@assets/svg/arrow-big-right.svg";
|
||||||
|
export { ReactComponent as SVGArrowDown } from "@assets/svg/arrow-down.svg";
|
||||||
|
export { ReactComponent as SVGArrowLeft } from "@assets/svg/arrow-left.svg";
|
||||||
|
export { ReactComponent as SVGArrowRight } from "@assets/svg/arrow-right.svg";
|
||||||
|
export { ReactComponent as SVGBookmark } from "@assets/svg/bookmark.svg";
|
||||||
|
export { ReactComponent as SVGCaretDown } from "@assets/svg/caret-down.svg";
|
||||||
|
export { ReactComponent as SVGCaretLeft } from "@assets/svg/caret-left.svg";
|
||||||
|
export { ReactComponent as SVGCaretRight } from "@assets/svg/caret-right.svg";
|
||||||
|
export { ReactComponent as SVGCaretUp } from "@assets/svg/caret-up.svg";
|
||||||
|
export { ReactComponent as SVGChevronesLeft } from "@assets/svg/chevrones-left.svg";
|
||||||
|
export { ReactComponent as SVGChevronesRight } from "@assets/svg/chevrones-right.svg";
|
||||||
|
export { ReactComponent as SVGCite } from "@assets/svg/cite.svg";
|
||||||
|
export { ReactComponent as SVGCopy } from "@assets/svg/copy.svg";
|
||||||
|
export { ReactComponent as SVGDelete } from "@assets/svg/delete.svg";
|
||||||
|
export { ReactComponent as SVGDownload } from "@assets/svg/download.svg";
|
||||||
|
export { ReactComponent as SVGEdit1 } from "@assets/svg/edit1.svg";
|
||||||
|
export { ReactComponent as SVGEdit2 } from "@assets/svg/edit2.svg";
|
||||||
|
export { ReactComponent as SVGError } from "@assets/svg/error.svg";
|
||||||
|
export { ReactComponent as SVGEye } from "@assets/svg/eye.svg";
|
||||||
|
export { ReactComponent as SVGFavorite } from "@assets/svg/favorite.svg";
|
||||||
|
export { ReactComponent as SVGFiletext } from "@assets/svg/filetext.svg";
|
||||||
|
export { ReactComponent as SVGFolder } from "@assets/svg/folder.svg";
|
||||||
|
export { ReactComponent as SVGKey } from "@assets/svg/key.svg";
|
||||||
|
export { ReactComponent as SVGList } from "@assets/svg/list.svg";
|
||||||
|
export { ReactComponent as SVGMinus } from "@assets/svg/minus.svg";
|
||||||
|
export { ReactComponent as SVGMore } from "@assets/svg/more.svg";
|
||||||
|
export { ReactComponent as SVGPlus } from "@assets/svg/plus.svg";
|
||||||
|
export { ReactComponent as SVGPrinter } from "@assets/svg/printer.svg";
|
||||||
|
export { ReactComponent as SVGSearch } from "@assets/svg/search.svg";
|
||||||
|
export { ReactComponent as SVGShare } from "@assets/svg/share.svg";
|
||||||
|
export { ReactComponent as SVGUser } from "@assets/svg/user.svg";
|
||||||
|
export { ReactComponent as SVGXMark } from "@assets/svg/xmark.svg";
|
||||||
|
export { ReactComponent as SVGCheckmark } from "@assets/svg/checkmark.svg";
|
||||||
@ -11,11 +11,9 @@ import { useTranslation } from "react-i18next";
|
|||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Components */
|
/* Components */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
import Button from "components/controls/Button";
|
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Icons */
|
/* Icons */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
import { ReactComponent as SVGBackIcon } from "assets/svg/backstab.svg";
|
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Component */
|
/* Component */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
@ -36,20 +34,6 @@ export default function GlobalControls() {
|
|||||||
leaveFrom="opacity-100"
|
leaveFrom="opacity-100"
|
||||||
leaveTo="opacity-0"
|
leaveTo="opacity-0"
|
||||||
>
|
>
|
||||||
<Button
|
|
||||||
type="fill"
|
|
||||||
variant="blue"
|
|
||||||
onClick={() => navigate(-1)}
|
|
||||||
className="font-bold"
|
|
||||||
iconed
|
|
||||||
>
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<div className="flex-none w-6 h-6">
|
|
||||||
<SVGBackIcon className="w-full h-full stroke-current opacity-60"/>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">{t('back')}</div>
|
|
||||||
</div>
|
|
||||||
</Button>
|
|
||||||
</Transition>
|
</Transition>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -8,17 +8,11 @@ import { useNavigate } from "react-router-dom";
|
|||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
import ContextMenu from "components/containers/contextmenu/ContextMenu";
|
import ContextMenu from "components/containers/contextmenu/ContextMenu";
|
||||||
import Logotype from "components/Logotype";
|
import Logotype from "components/Logotype";
|
||||||
import Button from "components/controls/Button";
|
|
||||||
import Avatar from "components/containers/Avatar";
|
import Avatar from "components/containers/Avatar";
|
||||||
import ContextMenuAction from "components/containers/contextmenu/ContextMenuAction";
|
import ContextMenuAction from "components/containers/contextmenu/ContextMenuAction";
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* SVG */
|
/* SVG */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
import { ReactComponent as SVGSearchIcon } from "assets/svg/search.svg";
|
|
||||||
import { ReactComponent as SVGBellIcon } from "assets/svg/bell.svg";
|
|
||||||
import { ReactComponent as SVGCogIcon } from "assets/svg/cog.svg";
|
|
||||||
import { ReactComponent as SVGUserAddIcon } from "assets/svg/user-add.svg";
|
|
||||||
import { ReactComponent as SVGExitIcon } from "assets/svg/exit.svg";
|
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Hooks */
|
/* Hooks */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
@ -66,12 +60,7 @@ export default function Header({title}: Props) {
|
|||||||
<Logotype name={title} />
|
<Logotype name={title} />
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-none flex items-center space-x-3">
|
<div className="flex-none flex items-center space-x-3">
|
||||||
<Button iconed="only" className="w-10 h-10" variant="blue" type="text" onClick={showSearchbar}>
|
|
||||||
<SVGSearchIcon className="w-full h-full stroke-current" />
|
|
||||||
</Button>
|
|
||||||
<Button iconed="only" className="w-10 h-10" variant="blue" type="text">
|
|
||||||
<SVGBellIcon className="w-full h-full stroke-current" />
|
|
||||||
</Button>
|
|
||||||
<ContextMenu
|
<ContextMenu
|
||||||
button={<Avatar className="p-2" />}
|
button={<Avatar className="p-2" />}
|
||||||
className="absolute w-full min-h-14 sm:w-80 -bottom-3
|
className="absolute w-full min-h-14 sm:w-80 -bottom-3
|
||||||
@ -100,9 +89,7 @@ export default function Header({title}: Props) {
|
|||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors"
|
className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors"
|
||||||
caption="Account settings"
|
caption="Account settings"
|
||||||
icon={
|
|
||||||
<SVGCogIcon className="w-6 h-6 stroke-gray-200/30 group-hover:stroke-current" />
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
<ContextMenuAction
|
<ContextMenuAction
|
||||||
action={() => {
|
action={() => {
|
||||||
@ -111,17 +98,13 @@ export default function Header({title}: Props) {
|
|||||||
disabled={isLoading}
|
disabled={isLoading}
|
||||||
className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors"
|
className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md hover:text-blue-400 transition-colors"
|
||||||
caption={t("account.connect")}
|
caption={t("account.connect")}
|
||||||
icon={
|
|
||||||
<SVGUserAddIcon className="w-6 h-6 stroke-gray-200/30 group-hover:stroke-current" />
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
<ContextMenuAction
|
<ContextMenuAction
|
||||||
action={signOut}
|
action={signOut}
|
||||||
className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md transition-colors"
|
className="group w-full py-2 -mx-4 px-4 hover:bg-gray-200/20 rounded-md transition-colors"
|
||||||
caption={t('logOut')}
|
caption={t('logOut')}
|
||||||
icon={
|
|
||||||
<SVGExitIcon className="w-6 h-6 stroke-gray-200/30 group-hover:stroke-current" />
|
|
||||||
}
|
|
||||||
/>
|
/>
|
||||||
</ContextMenu>
|
</ContextMenu>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
21
src/components/typography/Link.tsx
Normal file
21
src/components/typography/Link.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
href?: string;
|
||||||
|
children: React.ReactNode;
|
||||||
|
disabled?: boolean;
|
||||||
|
className?: string;
|
||||||
|
} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "">;
|
||||||
|
|
||||||
|
export default function Link({ href, children, disabled, ...props }: Props) {
|
||||||
|
return (
|
||||||
|
// eslint-disable-next-line jsx-a11y/anchor-is-valid
|
||||||
|
<a
|
||||||
|
href={disabled ? undefined : href}
|
||||||
|
aria-disabled={disabled}
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
export type StyleType = "fill" | "outline" | "text";
|
export type StyleType = "high" | "medium" | "low";
|
||||||
|
|
||||||
export type StyleColorVariants = "blue" | "pink" | "red" | "purple" | "yellow" | "sky" | "emerald" | "gray" | "dark-coral";
|
export type StyleColorVariants = "blue" | "pink" | "red" | "purple" | "yellow" | "sky" | "emerald" | "gray" | "dark-coral";
|
||||||
|
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
import _ from "lodash";
|
||||||
export interface DTOModel<T extends {} | undefined> {
|
export interface DTOModel<T extends {} | undefined> {
|
||||||
status: number;
|
status: number;
|
||||||
type: string;
|
type: string;
|
||||||
@ -15,4 +16,16 @@ export interface GraphQLFailureDTO {
|
|||||||
errors: {code: string, message: string, name: string}[]
|
errors: {code: string, message: string, name: string}[]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function isDTOModel(obj: any): obj is DTOModel<any> {
|
||||||
|
return obj !== null && typeof obj === "object" && !!obj.isDTOModel;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const isDTO = (obj: any): obj is DTOModel<any> => obj.data !== null &&
|
||||||
|
_.isObject(obj.data) &&
|
||||||
|
_.has(obj.data, "status") &&
|
||||||
|
_.has(obj.data, "type") &&
|
||||||
|
_.has(obj.data, "message") &&
|
||||||
|
_.has(obj.data, "description") &&
|
||||||
|
_.has(obj.data, "data")
|
||||||
|
|
||||||
export const GRAPHQL_UNAUTHORIZED_KEY = "UNAUTHENTICATED";
|
export const GRAPHQL_UNAUTHORIZED_KEY = "UNAUTHENTICATED";
|
||||||
@ -1,7 +1,6 @@
|
|||||||
import { AxiosError } from "axios";
|
import { AxiosError } from "axios";
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import { DTOModel } from "./dto_model";
|
import { DTOModel, isDTO } from "./dto_model";
|
||||||
|
|
||||||
|
|
||||||
export interface FailureI {
|
export interface FailureI {
|
||||||
status?: number;
|
status?: number;
|
||||||
@ -31,22 +30,25 @@ class Failure implements FailureI {
|
|||||||
* @returns {boolean}
|
* @returns {boolean}
|
||||||
*/
|
*/
|
||||||
static isFailure(o: any): o is Failure {
|
static isFailure(o: any): o is Failure {
|
||||||
if(!_.isObjectLike(o)) return false;
|
if (!_.isObjectLike(o)) return false;
|
||||||
if(_.has(o, 'message')) return true;
|
if (_.has(o, "message")) return true;
|
||||||
return false;
|
return false;
|
||||||
};
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
constructor({ status, message, key, meta }: FailureI) {
|
constructor({ status, message, key, meta }: FailureI) {
|
||||||
this.status = status;
|
this.status = status;
|
||||||
this.message = message;
|
this.message = message;
|
||||||
this.key = key;
|
this.key = key;
|
||||||
this.meta = meta;
|
this.meta = meta;
|
||||||
console.error([key ?? '', message].filter((i) => i.length !== 0).join(':'));
|
console.error([key ?? "", message].filter((i) => i.length !== 0).join(":"));
|
||||||
}
|
}
|
||||||
|
|
||||||
static fromReason(reason: AxiosError<DTOModel<any>>, key?: string): Failure {
|
static fromReason(reason: AxiosError<any, any>, key?: string): Failure {
|
||||||
|
|
||||||
|
try {
|
||||||
|
if(!Failure.verifyContainsDTO(reason)) {
|
||||||
|
throw reason;
|
||||||
|
}
|
||||||
if (reason.response) {
|
if (reason.response) {
|
||||||
return new Failure({
|
return new Failure({
|
||||||
status: reason.response!.status,
|
status: reason.response!.status,
|
||||||
@ -68,12 +70,31 @@ class Failure implements FailureI {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
throw reason;
|
||||||
|
} catch (error) {
|
||||||
return new Failure({
|
return new Failure({
|
||||||
message: reason.message,
|
message: reason.message,
|
||||||
key: key,
|
key: key,
|
||||||
meta: { isPlainFailure: true },
|
meta: { isPlainFailure: true },
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Verifies that passed object matches [DTOModel] structure
|
||||||
|
*
|
||||||
|
* Otherwise it will rethrow passed object
|
||||||
|
*/
|
||||||
|
static verifyContainsDTO(
|
||||||
|
reason: AxiosError<any, any>
|
||||||
|
): reason is AxiosError<DTOModel<any>, any> {
|
||||||
|
return [reason.response, reason.request].reduce((acc, obj) => {
|
||||||
|
if (acc || isDTO(obj)) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
|
||||||
toString(): string {
|
toString(): string {
|
||||||
return `${this.message} (${this.key ?? "key unknown"}) ${
|
return `${this.message} (${this.key ?? "key unknown"}) ${
|
||||||
|
|||||||
@ -62,10 +62,9 @@
|
|||||||
.theme-dark::before,
|
.theme-dark::before,
|
||||||
.theme-dark::after {
|
.theme-dark::after {
|
||||||
/* ------------------------------- Body color ------------------------------- */
|
/* ------------------------------- Body color ------------------------------- */
|
||||||
--color-body: rgba(15, 20, 34, 1);
|
|
||||||
--color-aside: #0a0e1a;
|
--color-aside: #0a0e1a;
|
||||||
--color-footer: 10 10 10;
|
--color-footer: 10 10 10;
|
||||||
--color-text: rgb(255 255 255);
|
--color-text: rgb(38, 38, 38);
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
--color-serv: 25 29 43;
|
--color-serv: 25 29 43;
|
||||||
--color-serv-50: 227 230 237;
|
--color-serv-50: 227 230 237;
|
||||||
@ -103,24 +102,6 @@
|
|||||||
--color-gray-900: 38 38 38;
|
--color-gray-900: 38 38 38;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pl,
|
|
||||||
.pl__worm {
|
|
||||||
animation-duration: 3s;
|
|
||||||
animation-iteration-count: infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pl {
|
|
||||||
animation-name: bump;
|
|
||||||
animation-timing-function: linear;
|
|
||||||
width: 8em;
|
|
||||||
height: 8em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pl__worm {
|
|
||||||
animation-name: worm;
|
|
||||||
animation-timing-function: cubic-bezier(0.42, 0.17, 0.75, 0.83);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Dark theme */
|
/* Dark theme */
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
@ -128,71 +109,6 @@
|
|||||||
--fg: hsl(var(--hue), 10%, 90%);
|
--fg: hsl(var(--hue), 10%, 90%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Animations */
|
|
||||||
@keyframes bump {
|
|
||||||
|
|
||||||
from,
|
|
||||||
42%,
|
|
||||||
46%,
|
|
||||||
51%,
|
|
||||||
55%,
|
|
||||||
59%,
|
|
||||||
63%,
|
|
||||||
67%,
|
|
||||||
71%,
|
|
||||||
74%,
|
|
||||||
78%,
|
|
||||||
81%,
|
|
||||||
85%,
|
|
||||||
88%,
|
|
||||||
92%,
|
|
||||||
to {
|
|
||||||
transform: translate(0, 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
44% {
|
|
||||||
transform: translate(1.33%, 6.75%);
|
|
||||||
}
|
|
||||||
|
|
||||||
53% {
|
|
||||||
transform: translate(-16.67%, -0.54%);
|
|
||||||
}
|
|
||||||
|
|
||||||
61% {
|
|
||||||
transform: translate(3.66%, -2.46%);
|
|
||||||
}
|
|
||||||
|
|
||||||
69% {
|
|
||||||
transform: translate(-0.59%, 15.27%);
|
|
||||||
}
|
|
||||||
|
|
||||||
76% {
|
|
||||||
transform: translate(-1.92%, -4.68%);
|
|
||||||
}
|
|
||||||
|
|
||||||
83% {
|
|
||||||
transform: translate(9.38%, 0.96%);
|
|
||||||
}
|
|
||||||
|
|
||||||
90% {
|
|
||||||
transform: translate(-4.55%, 1.98%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes worm {
|
|
||||||
from {
|
|
||||||
stroke-dashoffset: 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
25% {
|
|
||||||
stroke-dashoffset: 295;
|
|
||||||
}
|
|
||||||
|
|
||||||
to {
|
|
||||||
stroke-dashoffset: 1165;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer components {
|
@layer components {
|
||||||
|
|||||||
@ -48,7 +48,6 @@ export default function LanguageSelector({ isShown, onClose }: Props) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal isOpen={isShown} onClose={onClose} className="max-w-lg">
|
<Modal isOpen={isShown} onClose={onClose} className="max-w-lg">
|
||||||
<Modal.CloseButton onClose={onClose} />
|
|
||||||
<Modal.Header>{t("selectLanguage")}</Modal.Header>
|
<Modal.Header>{t("selectLanguage")}</Modal.Header>
|
||||||
<Combox
|
<Combox
|
||||||
options={Object.keys(languages)}
|
options={Object.keys(languages)}
|
||||||
|
|||||||
@ -1,7 +1,6 @@
|
|||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Libraries */
|
/* Libraries */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
import Button from "components/controls/Button";
|
|
||||||
import StandalonePage from "components/StandalonePage";
|
import StandalonePage from "components/StandalonePage";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
@ -14,13 +13,6 @@ export default function AuthFailure() {
|
|||||||
<div className="flex flex-col items-center justify-center h-full space-y-4">
|
<div className="flex flex-col items-center justify-center h-full space-y-4">
|
||||||
<div className="text-3xl font-bold text-gray-200">You have to be authorized</div>
|
<div className="text-3xl font-bold text-gray-200">You have to be authorized</div>
|
||||||
<div className="text-2xl text-gray-400">to access techpal dashboard</div>
|
<div className="text-2xl text-gray-400">to access techpal dashboard</div>
|
||||||
<Button
|
|
||||||
variant="red"
|
|
||||||
type="fill"
|
|
||||||
href={process.env.REACT_APP_OPENID_PROVIDER_URL}
|
|
||||||
>
|
|
||||||
Войти
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</StandalonePage>
|
</StandalonePage>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Libraries */
|
/* Libraries */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
import React, { useEffect } from "react";
|
import React from "react";
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Misc */
|
/* Misc */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
@ -15,7 +15,6 @@ import AvailabilityIndicator from "components/indicators/AvailabilityIndicator";
|
|||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Icons */
|
/* Icons */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
import { ReactComponent as SVGArrowRightShortIcon } from "assets/svg/arrow-right-short.svg";
|
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Dashboard page */
|
/* Dashboard page */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
@ -25,7 +24,7 @@ import { useServicesViewModel } from "services/controller/servicesViewModel";
|
|||||||
import CircleLoader from "components/CircleLoader";
|
import CircleLoader from "components/CircleLoader";
|
||||||
import _ from "lodash";
|
import _ from "lodash";
|
||||||
import { useUIStore } from "ui/data/uiSlice";
|
import { useUIStore } from "ui/data/uiSlice";
|
||||||
import Button from "components/controls/Button";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
import { useSubscriptionsStore } from "subscriptions/data/subscriptionsSlice";
|
import { useSubscriptionsStore } from "subscriptions/data/subscriptionsSlice";
|
||||||
import { useSubscriptionsViewModel } from "subscriptions/controller/subscriptionsViewModel";
|
import { useSubscriptionsViewModel } from "subscriptions/controller/subscriptionsViewModel";
|
||||||
@ -48,7 +47,7 @@ export default function Dashboard() {
|
|||||||
hasSubscription,
|
hasSubscription,
|
||||||
} = useSubscriptionsViewModel(subscriptionsStore, uiStore);
|
} = useSubscriptionsViewModel(subscriptionsStore, uiStore);
|
||||||
/* ---------------------------------- Hooks --------------------------------- */
|
/* ---------------------------------- Hooks --------------------------------- */
|
||||||
const Wrapper: React.FC = React.useMemo(
|
const Wrapper: React.FC<Omit<React.ComponentPropsWithoutRef<"div">, "">> = React.useMemo(
|
||||||
() => (props) =>
|
() => (props) =>
|
||||||
(
|
(
|
||||||
<div className="grid grid-cols-4 grid-rows-none gap-x-8 gap-y-8">
|
<div className="grid grid-cols-4 grid-rows-none gap-x-8 gap-y-8">
|
||||||
@ -64,13 +63,7 @@ export default function Dashboard() {
|
|||||||
</HexagonOutlined>
|
</HexagonOutlined>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-grow">
|
<div className="flex-grow">
|
||||||
<Button
|
|
||||||
variant="emerald"
|
|
||||||
type="outline"
|
|
||||||
onClick={() => navigate("/services")}
|
|
||||||
>
|
|
||||||
Connect service
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="pl-20 opacity-40">
|
<div className="pl-20 opacity-40">
|
||||||
@ -84,13 +77,13 @@ export default function Dashboard() {
|
|||||||
className="font-semibold inline-flex items-center space-x-2 hover:space-x-3"
|
className="font-semibold inline-flex items-center space-x-2 hover:space-x-3"
|
||||||
>
|
>
|
||||||
<span className="transition-all">connect</span>
|
<span className="transition-all">connect</span>
|
||||||
<SVGArrowRightShortIcon className="w-3 h-3 fill-white transition-all" />
|
|
||||||
</TextAction>
|
</TextAction>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
[]
|
[navigate]
|
||||||
);
|
);
|
||||||
/* --------------------------------- Markup --------------------------------- */
|
/* --------------------------------- Markup --------------------------------- */
|
||||||
if (subscriptionsLoading) {
|
if (subscriptionsLoading) {
|
||||||
@ -128,7 +121,6 @@ export default function Dashboard() {
|
|||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<TextAction className="font-semibold inline-flex items-center space-x-2 hover:space-x-3">
|
<TextAction className="font-semibold inline-flex items-center space-x-2 hover:space-x-3">
|
||||||
<span className="transition-all">open</span>
|
<span className="transition-all">open</span>
|
||||||
<SVGArrowRightShortIcon className="w-3 h-3 fill-white transition-all" />
|
|
||||||
</TextAction>
|
</TextAction>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
@ -175,7 +167,6 @@ export default function Dashboard() {
|
|||||||
className="font-semibold inline-flex items-center space-x-2 hover:space-x-3"
|
className="font-semibold inline-flex items-center space-x-2 hover:space-x-3"
|
||||||
>
|
>
|
||||||
<span className="transition-all">open</span>
|
<span className="transition-all">open</span>
|
||||||
<SVGArrowRightShortIcon className="w-3 h-3 fill-white transition-all" />
|
|
||||||
</TextAction>
|
</TextAction>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
@ -9,7 +9,6 @@ import { useTranslation } from "react-i18next";
|
|||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Components */
|
/* Components */
|
||||||
import Button from "components/controls/Button";
|
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Misc */
|
/* Misc */
|
||||||
@ -17,7 +16,6 @@ import Button from "components/controls/Button";
|
|||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Icons */
|
/* Icons */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
import { ReactComponent as SVGBackIcon } from "assets/svg/backstab.svg";
|
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
/* Account information management page */
|
/* Account information management page */
|
||||||
/* -------------------------------------------------------------------------- */
|
/* -------------------------------------------------------------------------- */
|
||||||
@ -33,23 +31,7 @@ const NoMatch = (): JSX.Element => {
|
|||||||
<div className="font-bold text-6xl text-gray-500">404</div>
|
<div className="font-bold text-6xl text-gray-500">404</div>
|
||||||
<div className="font-bold text-3xl mb-10">Page Not Found</div>
|
<div className="font-bold text-3xl mb-10">Page Not Found</div>
|
||||||
<div className="font-thin text-xl mb-10">{t('serv.noSuchPath')}</div>
|
<div className="font-thin text-xl mb-10">{t('serv.noSuchPath')}</div>
|
||||||
<Button
|
|
||||||
iconed={true}
|
|
||||||
htmlType="button"
|
|
||||||
variant="blue"
|
|
||||||
onClick={() =>
|
|
||||||
navigate("/", {
|
|
||||||
replace: true,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<div className="flex items-center space-x-3">
|
|
||||||
<div className="flex-none w-6 h-6">
|
|
||||||
<SVGBackIcon className="w-full h-full stroke-current opacity-60" />
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">{t("serv.goHome")}</div>
|
|
||||||
</div>
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
270
src/stories/AllIcons.stories.tsx
Normal file
270
src/stories/AllIcons.stories.tsx
Normal file
@ -0,0 +1,270 @@
|
|||||||
|
import React, { Component } from "react";
|
||||||
|
import { ComponentMeta, ComponentStory, Meta} from "@storybook/react";
|
||||||
|
import { ReactComponent as SVGArrowBigRight } from "../assets/svg/arrow-big-right.svg" ;
|
||||||
|
import { ReactComponent as SVGArrowRight} from "../assets/svg/arrow-right.svg";
|
||||||
|
// import {ReactComponent as SVGArrowLeft} from "../assets/svg/arrow-left.svg";
|
||||||
|
import {ReactComponent as SVGArrowDown} from "../assets/svg/arrow-down.svg";
|
||||||
|
import {ReactComponent as SVGBookmark} from "../assets/svg/bookmark.svg";
|
||||||
|
import {ReactComponent as SVGCaretDown} from "../assets/svg/caret-down.svg"
|
||||||
|
import {ReactComponent as SVGCaretLeft} from "../assets/svg/caret-left.svg"
|
||||||
|
import {ReactComponent as SVGCaretRight} from "../assets/svg/caret-right.svg"
|
||||||
|
import {ReactComponent as SVGCaretUp} from "../assets/svg/caret-up.svg";
|
||||||
|
import {ReactComponent as SVGChevronesLeft} from "../assets/svg/chevrones-left.svg";
|
||||||
|
import {ReactComponent as SVGChevronesRight} from "../assets/svg/chevrones-right.svg";
|
||||||
|
import {ReactComponent as SVGCite} from "../assets/svg/cite.svg";
|
||||||
|
import {ReactComponent as SVGCopy} from "../assets/svg/copy.svg";
|
||||||
|
import {ReactComponent as SVGDelete} from "../assets/svg/delete.svg";
|
||||||
|
import {ReactComponent as SVGDownload} from "../assets/svg/download.svg";
|
||||||
|
import {ReactComponent as SVGEdit1} from "../assets/svg/edit1.svg";
|
||||||
|
import {ReactComponent as SVGEdit2} from "../assets/svg/edit2.svg";
|
||||||
|
import {ReactComponent as SVGError} from "../assets/svg/error.svg";
|
||||||
|
import {ReactComponent as SVGEye} from "../assets/svg/eye.svg";
|
||||||
|
import {ReactComponent as SVGFavorite} from "../assets/svg/favorite.svg";
|
||||||
|
import {ReactComponent as SVGFiletext} from "../assets/svg/filetext.svg";
|
||||||
|
import {ReactComponent as SVGFolder} from "../assets/svg/folder.svg";
|
||||||
|
import {ReactComponent as SVGKey} from "../assets/svg/key.svg";
|
||||||
|
import {ReactComponent as SVGList} from "../assets/svg/list.svg";
|
||||||
|
import {ReactComponent as SVGMinus} from "../assets/svg/minus.svg";
|
||||||
|
import {ReactComponent as SVGMore} from "../assets/svg/more.svg";
|
||||||
|
import {ReactComponent as SVGPlus} from "../assets/svg/plus.svg";
|
||||||
|
import {ReactComponent as SVGPrinter} from "../assets/svg/printer.svg";
|
||||||
|
import {ReactComponent as SVGSearch} from "../assets/svg/search.svg";
|
||||||
|
import {ReactComponent as SVGShare} from "../assets/svg/share.svg";
|
||||||
|
import {ReactComponent as SVGUser} from "../assets/svg/user.svg";
|
||||||
|
import {ReactComponent as SVGXMark} from "../assets/svg/xmark.svg";
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: "Icons",
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const ArrowBigRightStory: ComponentStory<typeof SVGArrowBigRight> = (args) => <SVGArrowBigRight {...args}/>;
|
||||||
|
const ArrowRightStory: ComponentStory<typeof SVGArrowRight> = (args) => <SVGArrowRight {...args}/>;
|
||||||
|
//const SVGArrowLeftStory : ComponentStory<typeof SVGArrowLeft> = (args) => <SVGArrowLeft {... args} />
|
||||||
|
const SVGArrowDownStory : ComponentStory<typeof SVGArrowDown> = (args) => <SVGArrowDown {... args} />
|
||||||
|
const SVGBookmarkStory : ComponentStory<typeof SVGBookmark> = (args) => <SVGBookmark {... args} />
|
||||||
|
const SVGCaretDownStory : ComponentStory<typeof SVGCaretDown> = (args) => <SVGCaretDown {... args} />
|
||||||
|
const SVGCaretLeftStory : ComponentStory<typeof SVGCaretLeft> = (args) => <SVGCaretLeft {... args} />
|
||||||
|
const SVGCaretRightStory : ComponentStory<typeof SVGCaretRight> = (args) => <SVGCaretRight {... args} />
|
||||||
|
const SVGCaretUpStory : ComponentStory<typeof SVGCaretUp> = (args) => <SVGCaretUp {... args} />
|
||||||
|
const SVGChevronesLeftStory : ComponentStory<typeof SVGChevronesLeft> = (args) => <SVGChevronesLeft {... args} />
|
||||||
|
const SVGChevronesRightStory : ComponentStory<typeof SVGChevronesRight> = (args) => <SVGChevronesRight {... args} />
|
||||||
|
const SVGCiteStory : ComponentStory<typeof SVGCite> = (args) => <SVGCite {... args} />
|
||||||
|
const SVGCopyStory : ComponentStory<typeof SVGCopy> = (args) => <SVGCopy {... args} />
|
||||||
|
const SVGDeleteStory : ComponentStory<typeof SVGDelete> = (args) => <SVGDelete {... args} />
|
||||||
|
const SVGDownloadStory : ComponentStory<typeof SVGDownload> = (args) => <SVGDownload {... args} />
|
||||||
|
const SVGEdit1Story : ComponentStory<typeof SVGEdit1> = (args) => <SVGEdit1 {... args} />
|
||||||
|
const SVGEdit2Story : ComponentStory<typeof SVGEdit2> = (args) => <SVGEdit2 {... args} />
|
||||||
|
const SVGErrorStory : ComponentStory<typeof SVGError> = (args) => <SVGError {... args} />
|
||||||
|
const SVGEyeStory : ComponentStory<typeof SVGEye> = (args) => <SVGEye {... args} />
|
||||||
|
const SVGFavoriteStory : ComponentStory<typeof SVGFavorite> = (args) => <SVGFavorite {... args} />
|
||||||
|
const SVGFiletextStory : ComponentStory<typeof SVGFiletext> = (args) => <SVGFiletext {... args} />
|
||||||
|
const SVGFolderStory : ComponentStory<typeof SVGFolder> = (args) => <SVGFolder {... args} />
|
||||||
|
const SVGKeyStory : ComponentStory<typeof SVGKey> = (args) => <SVGKey {... args} />
|
||||||
|
const SVGListStory : ComponentStory<typeof SVGList> = (args) => <SVGList {... args} />
|
||||||
|
const SVGMinusStory : ComponentStory<typeof SVGMinus> = (args) => <SVGMinus {... args} />
|
||||||
|
const SVGMoreStory : ComponentStory<typeof SVGMore> = (args) => <SVGMore {... args} />
|
||||||
|
const SVGPlusStory : ComponentStory<typeof SVGPlus> = (args) => <SVGPlus {... args} />
|
||||||
|
const SVGPrinterStory : ComponentStory<typeof SVGPrinter> = (args) => <SVGPrinter {... args} />
|
||||||
|
const SVGSearchStory : ComponentStory<typeof SVGSearch> = (args) => <SVGSearch {... args} />
|
||||||
|
const SVGShareStory : ComponentStory<typeof SVGShare> = (args) => <SVGShare {... args} />
|
||||||
|
const SVGUserStory : ComponentStory<typeof SVGUser> = (args) => <SVGUser {... args} />
|
||||||
|
const SVGXMarkStory : ComponentStory<typeof SVGXMark> = (args) => <SVGXMark {... args} />
|
||||||
|
|
||||||
|
export const ArrowBigRight= ArrowBigRightStory.bind({});
|
||||||
|
export const ArrowRight = ArrowRightStory.bind({});
|
||||||
|
//export const ArrowLeft = SVGArrowLeftStory.bind({});
|
||||||
|
export const ArrowDown = SVGArrowDownStory.bind({});
|
||||||
|
export const Bookmark = SVGBookmarkStory.bind({});
|
||||||
|
export const CaretDown = SVGCaretDownStory.bind({});
|
||||||
|
export const CaretLeft = SVGCaretLeftStory.bind({});
|
||||||
|
export const CaretRight = SVGCaretRightStory.bind({});
|
||||||
|
export const CaretUp = SVGCaretUpStory.bind({});
|
||||||
|
export const ChevronesLeft = SVGChevronesLeftStory.bind({});
|
||||||
|
export const ChevronesRight = SVGChevronesRightStory.bind({});
|
||||||
|
export const Cite = SVGCiteStory.bind({});
|
||||||
|
export const Copy = SVGCopyStory.bind({});
|
||||||
|
export const Delete = SVGDeleteStory.bind({});
|
||||||
|
export const Download = SVGDownloadStory.bind({});
|
||||||
|
export const Edit1 = SVGEdit1Story.bind({});
|
||||||
|
export const Edit2 = SVGEdit2Story.bind({});
|
||||||
|
export const Error = SVGErrorStory.bind({});
|
||||||
|
export const Eye = SVGEyeStory.bind({});
|
||||||
|
export const Favorite = SVGFavoriteStory.bind({});
|
||||||
|
export const Filetext = SVGFiletextStory.bind({});
|
||||||
|
export const Folder = SVGFolderStory.bind({});
|
||||||
|
export const Key = SVGKeyStory.bind({});
|
||||||
|
export const List = SVGListStory.bind({});
|
||||||
|
export const Minus = SVGMinusStory.bind({});
|
||||||
|
export const More = SVGMoreStory.bind({});
|
||||||
|
export const Plus = SVGPlusStory.bind({});
|
||||||
|
export const Printer = SVGPrinterStory.bind({});
|
||||||
|
export const Search = SVGSearchStory.bind({});
|
||||||
|
export const Share = SVGShareStory.bind({});
|
||||||
|
export const User = SVGUserStory.bind({});
|
||||||
|
export const XMark = SVGXMarkStory.bind({});
|
||||||
|
|
||||||
|
|
||||||
|
ArrowBigRight.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
|
||||||
|
ArrowRight.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
|
||||||
|
// ArrowLeft.args = {
|
||||||
|
// fill: 'blue',
|
||||||
|
// stroke: 'blue',
|
||||||
|
// width: 25,
|
||||||
|
// };
|
||||||
|
ArrowDown.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Bookmark.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
CaretDown.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
CaretLeft.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
CaretRight.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
CaretUp.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
ChevronesLeft.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
ChevronesRight.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Cite.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Copy.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Delete.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Download.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Edit1.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Edit2.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Error.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Eye.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Favorite.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Filetext.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Folder.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Key.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
List.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Minus.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
More.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Plus.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Printer.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Search.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
Share.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
User.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
};
|
||||||
|
XMark.args = {
|
||||||
|
fill: 'blue',
|
||||||
|
stroke: 'blue',
|
||||||
|
width: 25,
|
||||||
|
}
|
||||||
@ -1,41 +1,30 @@
|
|||||||
import React from 'react';
|
import React, { Children } from "react";
|
||||||
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
import { ComponentStory, ComponentMeta } from '@storybook/react';
|
||||||
|
import { Button } from "../components/Button";
|
||||||
|
|
||||||
import { Button } from './Button';
|
|
||||||
|
|
||||||
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
|
||||||
export default {
|
export default{
|
||||||
title: 'Example/Button',
|
title: 'Button',
|
||||||
component: Button,
|
component: Button,
|
||||||
// More on argTypes: https://storybook.js.org/docs/react/api/argtypes
|
|
||||||
argTypes: {
|
|
||||||
backgroundColor: { control: 'color' },
|
|
||||||
},
|
|
||||||
} as ComponentMeta<typeof Button>;
|
} as ComponentMeta<typeof Button>;
|
||||||
|
|
||||||
// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
|
|
||||||
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
|
const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
|
||||||
|
|
||||||
export const Primary = Template.bind({});
|
export const High = Template.bind({});
|
||||||
// More on args: https://storybook.js.org/docs/react/writing-stories/args
|
High.args = {
|
||||||
Primary.args = {
|
emphasis: 'high',
|
||||||
primary: true,
|
children: ['High'],
|
||||||
label: 'Button',
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Secondary = Template.bind({});
|
export const Medium = Template.bind({});
|
||||||
Secondary.args = {
|
Medium.args = {
|
||||||
label: 'Button',
|
emphasis: 'medium',
|
||||||
|
children: ['Medium'],
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Large = Template.bind({});
|
export const Low = Template.bind({});
|
||||||
Large.args = {
|
Low.args = {
|
||||||
size: 'large',
|
emphasis:'low',
|
||||||
label: 'Button',
|
children:['Low'],
|
||||||
};
|
|
||||||
|
|
||||||
export const Small = Template.bind({});
|
|
||||||
Small.args = {
|
|
||||||
size: 'small',
|
|
||||||
label: 'Button',
|
|
||||||
};
|
};
|
||||||
@ -1,48 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import './button.css';
|
|
||||||
|
|
||||||
interface ButtonProps {
|
|
||||||
/**
|
|
||||||
* Is this the principal call to action on the page?
|
|
||||||
*/
|
|
||||||
primary?: boolean;
|
|
||||||
/**
|
|
||||||
* What background color to use
|
|
||||||
*/
|
|
||||||
backgroundColor?: string;
|
|
||||||
/**
|
|
||||||
* How large should the button be?
|
|
||||||
*/
|
|
||||||
size?: 'small' | 'medium' | 'large';
|
|
||||||
/**
|
|
||||||
* Button contents
|
|
||||||
*/
|
|
||||||
label: string;
|
|
||||||
/**
|
|
||||||
* Optional click handler
|
|
||||||
*/
|
|
||||||
onClick?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Primary UI component for user interaction
|
|
||||||
*/
|
|
||||||
export const Button = ({
|
|
||||||
primary = false,
|
|
||||||
size = 'medium',
|
|
||||||
backgroundColor,
|
|
||||||
label,
|
|
||||||
...props
|
|
||||||
}: ButtonProps) => {
|
|
||||||
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
|
|
||||||
style={{ backgroundColor }}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user