diff --git a/public/favicon.svg b/public/favicon.svg index 4004d18..86e7802 100644 --- a/public/favicon.svg +++ b/public/favicon.svg @@ -1,5 +1,7 @@ - - - + + + + + + - \ No newline at end of file diff --git a/src/assets/fonts/Inter-Black.ttf b/src/assets/fonts/Inter-Black.ttf new file mode 100644 index 0000000..5aecf7d Binary files /dev/null and b/src/assets/fonts/Inter-Black.ttf differ diff --git a/src/assets/fonts/Inter-Bold.ttf b/src/assets/fonts/Inter-Bold.ttf new file mode 100644 index 0000000..8e82c70 Binary files /dev/null and b/src/assets/fonts/Inter-Bold.ttf differ diff --git a/src/assets/fonts/Inter-ExtraBold.ttf b/src/assets/fonts/Inter-ExtraBold.ttf new file mode 100644 index 0000000..cb4b821 Binary files /dev/null and b/src/assets/fonts/Inter-ExtraBold.ttf differ diff --git a/src/assets/fonts/Inter-ExtraLight.ttf b/src/assets/fonts/Inter-ExtraLight.ttf new file mode 100644 index 0000000..64aee30 Binary files /dev/null and b/src/assets/fonts/Inter-ExtraLight.ttf differ diff --git a/src/assets/fonts/Inter-Light.ttf b/src/assets/fonts/Inter-Light.ttf new file mode 100644 index 0000000..9e265d8 Binary files /dev/null and b/src/assets/fonts/Inter-Light.ttf differ diff --git a/src/assets/fonts/Inter-Medium.ttf b/src/assets/fonts/Inter-Medium.ttf new file mode 100644 index 0000000..b53fb1c Binary files /dev/null and b/src/assets/fonts/Inter-Medium.ttf differ diff --git a/src/assets/fonts/Inter-Regular.ttf b/src/assets/fonts/Inter-Regular.ttf new file mode 100644 index 0000000..8d4eebf Binary files /dev/null and b/src/assets/fonts/Inter-Regular.ttf differ diff --git a/src/assets/fonts/Inter-SemiBold.ttf b/src/assets/fonts/Inter-SemiBold.ttf new file mode 100644 index 0000000..c6aeeb1 Binary files /dev/null and b/src/assets/fonts/Inter-SemiBold.ttf differ diff --git a/src/assets/fonts/Inter-Thin.ttf b/src/assets/fonts/Inter-Thin.ttf new file mode 100644 index 0000000..7aed55d Binary files /dev/null and b/src/assets/fonts/Inter-Thin.ttf differ diff --git a/src/assets/svg/arrow-big-right.svg b/src/assets/svg/arrow-big-right.svg index a9397d2..c65d50a 100644 --- a/src/assets/svg/arrow-big-right.svg +++ b/src/assets/svg/arrow-big-right.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/svg/arrow-down.svg b/src/assets/svg/arrow-down.svg index a958b41..43df6f8 100644 --- a/src/assets/svg/arrow-down.svg +++ b/src/assets/svg/arrow-down.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/assets/svg/arrow-left.svg b/src/assets/svg/arrow-left.svg index 2d0004a..3031ddf 100644 --- a/src/assets/svg/arrow-left.svg +++ b/src/assets/svg/arrow-left.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/assets/svg/arrow-right.svg b/src/assets/svg/arrow-right.svg index 6c67bc6..099e1b1 100644 --- a/src/assets/svg/arrow-right.svg +++ b/src/assets/svg/arrow-right.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/src/assets/svg/arrow-up.svg b/src/assets/svg/arrow-up.svg new file mode 100644 index 0000000..cbcf4f1 --- /dev/null +++ b/src/assets/svg/arrow-up.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/bell-notification.svg b/src/assets/svg/bell-notification.svg new file mode 100644 index 0000000..c192911 --- /dev/null +++ b/src/assets/svg/bell-notification.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/bell.svg b/src/assets/svg/bell.svg new file mode 100644 index 0000000..ab895d3 --- /dev/null +++ b/src/assets/svg/bell.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/bookmark.svg b/src/assets/svg/bookmark-filled.svg similarity index 97% rename from src/assets/svg/bookmark.svg rename to src/assets/svg/bookmark-filled.svg index 6a7aa54..1612390 100644 --- a/src/assets/svg/bookmark.svg +++ b/src/assets/svg/bookmark-filled.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/bookmark-outlined.svg b/src/assets/svg/bookmark-outlined.svg new file mode 100644 index 0000000..2c2275d --- /dev/null +++ b/src/assets/svg/bookmark-outlined.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/caret-down.svg b/src/assets/svg/caret-down.svg index 7018716..344bca5 100644 --- a/src/assets/svg/caret-down.svg +++ b/src/assets/svg/caret-down.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/caret-left.svg b/src/assets/svg/caret-left.svg index d1e2a96..bfcf8bb 100644 --- a/src/assets/svg/caret-left.svg +++ b/src/assets/svg/caret-left.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/caret-right.svg b/src/assets/svg/caret-right.svg index cd66b42..5224193 100644 --- a/src/assets/svg/caret-right.svg +++ b/src/assets/svg/caret-right.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/caret-up.svg b/src/assets/svg/caret-up.svg index 11d79a7..e04c3e6 100644 --- a/src/assets/svg/caret-up.svg +++ b/src/assets/svg/caret-up.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/chart.svg b/src/assets/svg/chart.svg new file mode 100644 index 0000000..d0f1221 --- /dev/null +++ b/src/assets/svg/chart.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svg/checkmark.svg b/src/assets/svg/checkmark.svg deleted file mode 100644 index bdc5f46..0000000 --- a/src/assets/svg/checkmark.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/src/assets/svg/chevrones-left.svg b/src/assets/svg/chevrones-left.svg index 8653efb..e4a4167 100644 --- a/src/assets/svg/chevrones-left.svg +++ b/src/assets/svg/chevrones-left.svg @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/src/assets/svg/chevrones-right.svg b/src/assets/svg/chevrones-right.svg index cf1b7a3..56a289a 100644 --- a/src/assets/svg/chevrones-right.svg +++ b/src/assets/svg/chevrones-right.svg @@ -1,6 +1,6 @@ - - - - + + + + diff --git a/src/assets/svg/circle.svg b/src/assets/svg/circle.svg new file mode 100644 index 0000000..178698a --- /dev/null +++ b/src/assets/svg/circle.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/copy.svg b/src/assets/svg/copy.svg index b49085d..b056ebd 100644 --- a/src/assets/svg/copy.svg +++ b/src/assets/svg/copy.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/svg/delete.svg b/src/assets/svg/delete.svg index ddaed9d..552340b 100644 --- a/src/assets/svg/delete.svg +++ b/src/assets/svg/delete.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/assets/svg/edit1.svg b/src/assets/svg/edit1.svg index d4db844..c7a78b9 100644 --- a/src/assets/svg/edit1.svg +++ b/src/assets/svg/edit1.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/edit2.svg b/src/assets/svg/edit2.svg index 9ae6c74..7c0b428 100644 --- a/src/assets/svg/edit2.svg +++ b/src/assets/svg/edit2.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/svg/error.svg b/src/assets/svg/error.svg index 393174a..38e6756 100644 --- a/src/assets/svg/error.svg +++ b/src/assets/svg/error.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/assets/svg/eye.svg b/src/assets/svg/eye.svg index b347255..b8d684d 100644 --- a/src/assets/svg/eye.svg +++ b/src/assets/svg/eye.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/svg/favorite.svg b/src/assets/svg/favorite-filled.svg similarity index 100% rename from src/assets/svg/favorite.svg rename to src/assets/svg/favorite-filled.svg diff --git a/src/assets/svg/favorite-outlined.svg b/src/assets/svg/favorite-outlined.svg new file mode 100644 index 0000000..0fc5a75 --- /dev/null +++ b/src/assets/svg/favorite-outlined.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/file.svg b/src/assets/svg/file.svg new file mode 100644 index 0000000..e332284 --- /dev/null +++ b/src/assets/svg/file.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/filetext.svg b/src/assets/svg/filetext.svg index e085d8e..14d87f4 100644 --- a/src/assets/svg/filetext.svg +++ b/src/assets/svg/filetext.svg @@ -1,7 +1,7 @@ - - - - - + + + + + diff --git a/src/assets/svg/filter.svg b/src/assets/svg/filter.svg new file mode 100644 index 0000000..74fcf0e --- /dev/null +++ b/src/assets/svg/filter.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/svg/flag.svg b/src/assets/svg/flag.svg new file mode 100644 index 0000000..f122280 --- /dev/null +++ b/src/assets/svg/flag.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/folder.svg b/src/assets/svg/folder.svg index 79839fc..96d3a3d 100644 --- a/src/assets/svg/folder.svg +++ b/src/assets/svg/folder.svg @@ -1,5 +1,5 @@ - - + + diff --git a/src/assets/svg/formula.svg b/src/assets/svg/formula.svg new file mode 100644 index 0000000..d1f9c19 --- /dev/null +++ b/src/assets/svg/formula.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/hamburger.svg b/src/assets/svg/hamburger.svg new file mode 100644 index 0000000..dee8b6a --- /dev/null +++ b/src/assets/svg/hamburger.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/help.svg b/src/assets/svg/help.svg new file mode 100644 index 0000000..7d91a91 --- /dev/null +++ b/src/assets/svg/help.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/horizontal.svg b/src/assets/svg/horizontal.svg new file mode 100644 index 0000000..1a2a185 --- /dev/null +++ b/src/assets/svg/horizontal.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/image.svg b/src/assets/svg/image.svg new file mode 100644 index 0000000..2697578 --- /dev/null +++ b/src/assets/svg/image.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/info.svg b/src/assets/svg/info.svg new file mode 100644 index 0000000..ae2c70c --- /dev/null +++ b/src/assets/svg/info.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/svg/key.svg b/src/assets/svg/key.svg index 443abf4..4df111c 100644 --- a/src/assets/svg/key.svg +++ b/src/assets/svg/key.svg @@ -1,5 +1,5 @@ - + diff --git a/src/assets/svg/left-menu.svg b/src/assets/svg/left-menu.svg new file mode 100644 index 0000000..060f967 --- /dev/null +++ b/src/assets/svg/left-menu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/link.svg b/src/assets/svg/link.svg new file mode 100644 index 0000000..34a884b --- /dev/null +++ b/src/assets/svg/link.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/list.svg b/src/assets/svg/list.svg index 3525c5b..803ac04 100644 --- a/src/assets/svg/list.svg +++ b/src/assets/svg/list.svg @@ -1,8 +1,8 @@ - - - - - - + + + + + + diff --git a/src/assets/svg/logo.svg b/src/assets/svg/logo.svg new file mode 100644 index 0000000..ee27b58 --- /dev/null +++ b/src/assets/svg/logo.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svg/more.svg b/src/assets/svg/more.svg index 37ddd55..95a161a 100644 --- a/src/assets/svg/more.svg +++ b/src/assets/svg/more.svg @@ -1,5 +1,5 @@ - - - - + + + + diff --git a/src/assets/svg/palete.svg b/src/assets/svg/palete.svg new file mode 100644 index 0000000..6234601 --- /dev/null +++ b/src/assets/svg/palete.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/svg/plot.svg b/src/assets/svg/plot.svg new file mode 100644 index 0000000..44fb917 --- /dev/null +++ b/src/assets/svg/plot.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/printer.svg b/src/assets/svg/printer.svg index e947e1a..33790af 100644 --- a/src/assets/svg/printer.svg +++ b/src/assets/svg/printer.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/src/assets/svg/right-menu.svg b/src/assets/svg/right-menu.svg new file mode 100644 index 0000000..0958342 --- /dev/null +++ b/src/assets/svg/right-menu.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/scriptIcons.sh b/src/assets/svg/scriptIcons.sh new file mode 100644 index 0000000..97889a4 --- /dev/null +++ b/src/assets/svg/scriptIcons.sh @@ -0,0 +1,17 @@ +#!/bin/bash +icons="../../components/icons.tsx" +sgvnames=$(ls *.svg) + +for name in $sgvnames; do +svgInfo=$(grep $name $icons) +componentName=`echo "${name[@]^}" | sed 's/-\w/\U&/g' | tr -d '-' |sed 's/\.svg//g';` +if [ -z "$svgInfo" ] +then +echo 'export { ReactComponent as SVG'$componentName' } from "assets/svg/'$name'";' >> $icons +echo "$name Added to icons.tsx" +else +echo "$name already exist" +fi +done + + diff --git a/src/assets/svg/search.svg b/src/assets/svg/search.svg index 643d0e3..2f0ff62 100644 --- a/src/assets/svg/search.svg +++ b/src/assets/svg/search.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/svg/select-arrow.svg b/src/assets/svg/select-arrow.svg new file mode 100644 index 0000000..9c2dd2d --- /dev/null +++ b/src/assets/svg/select-arrow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/svg/selection.svg b/src/assets/svg/selection.svg new file mode 100644 index 0000000..8b6243f --- /dev/null +++ b/src/assets/svg/selection.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/send.svg b/src/assets/svg/send.svg new file mode 100644 index 0000000..d8f6102 --- /dev/null +++ b/src/assets/svg/send.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/settings.svg b/src/assets/svg/settings.svg new file mode 100644 index 0000000..fff536c --- /dev/null +++ b/src/assets/svg/settings.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/shape.svg b/src/assets/svg/shape.svg new file mode 100644 index 0000000..263715b --- /dev/null +++ b/src/assets/svg/shape.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/svg/share.svg b/src/assets/svg/share.svg index d641e77..0ac3e55 100644 --- a/src/assets/svg/share.svg +++ b/src/assets/svg/share.svg @@ -1,3 +1,3 @@ - + diff --git a/src/assets/svg/smile.svg b/src/assets/svg/smile.svg new file mode 100644 index 0000000..12c2690 --- /dev/null +++ b/src/assets/svg/smile.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/svg/table.svg b/src/assets/svg/table.svg new file mode 100644 index 0000000..c9bbe88 --- /dev/null +++ b/src/assets/svg/table.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/svg/text.svg b/src/assets/svg/text.svg new file mode 100644 index 0000000..9bd0b01 --- /dev/null +++ b/src/assets/svg/text.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/user.svg b/src/assets/svg/user.svg index 10488f3..bfbb08b 100644 --- a/src/assets/svg/user.svg +++ b/src/assets/svg/user.svg @@ -1,4 +1,4 @@ - - + + diff --git a/src/assets/svg/vertical.svg b/src/assets/svg/vertical.svg new file mode 100644 index 0000000..5b6809f --- /dev/null +++ b/src/assets/svg/vertical.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/svg/video.svg b/src/assets/svg/video.svg new file mode 100644 index 0000000..5cef7c2 --- /dev/null +++ b/src/assets/svg/video.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Inputgroup.tsx b/src/components/Inputgroup.tsx index cc06015..eb62bbd 100644 --- a/src/components/Inputgroup.tsx +++ b/src/components/Inputgroup.tsx @@ -14,7 +14,7 @@ export type Props = { children?: React.ReactNode | React.ReactNode[]; } & React.HTMLProps; -const Inputgroup = ({ children }: Props) => { +const Inputgroup = ({ children, className }: Props) => { const [focused, setFocused] = useState(false); useEffect(() => {}, [focused]); const arrChildren = React.Children.toArray(children); @@ -23,7 +23,8 @@ const Inputgroup = ({ children }: Props) => {
{arrChildren.map((e) => { diff --git a/src/components/Select.stories.tsx b/src/components/Select.stories.tsx new file mode 100644 index 0000000..fe42885 --- /dev/null +++ b/src/components/Select.stories.tsx @@ -0,0 +1,57 @@ +import React from "react"; +import { ComponentMeta, ComponentStory } from "@storybook/react"; +import { useState } from "react"; + +import Select from "./Select"; + +export default { + // Title inside navigation bar + title: "Select", + // Component to test + component: Select, + // Clarifying the way how to process specific + // properties of your component and which values + // it can accept. + argTypes: {}, +} as ComponentMeta; + +/** + * 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 = (args) => { + const { options = [{ name: String }] } = args; + const [selected, setSelected] = useState(options[0]); + return ( +
+ + options={options} + value={selected} + onChange={setSelected} + displayValueResolver={(options) => options.name} + /> +
+ ); +}; + +/* -------------------------------------------------------------------------- */ +/* States of your component */ +/* -------------------------------------------------------------------------- */ + +export const Default = Template.bind({}); + +Default.args = { + options: [ + { name: "Wade Cooper" }, + { name: "Arlene Mccoy" }, + { name: "Devon Webb" }, + { name: "Tom Cook" }, + { name: "Tanya Fox" }, + { name: "Hellen Schmidt" }, + ], +}; diff --git a/src/components/Select.tsx b/src/components/Select.tsx new file mode 100644 index 0000000..752939c --- /dev/null +++ b/src/components/Select.tsx @@ -0,0 +1,121 @@ +/* -------------------------------------------------------------------------- */ +/* Imports */ +/* -------------------------------------------------------------------------- */ +import React from "react"; +import { Fragment } from "react"; +import { Listbox, Transition } from "@headlessui/react"; +import classNames from "classnames"; +import "../index.css"; +import { ReactComponent as SelectIcon } from "../assets/svg/select-arrow.svg"; + +/* -------------------------------------------------------------------------- */ +/* Component props */ +/* -------------------------------------------------------------------------- */ + +type Props = { + options?: T[]; + disabled?: boolean; + className?: string; + value: T; + displayValueResolver?: (element: T) => any; + onChange: (element: T) => void; +} & Omit, "value" | "onChange">; + +/* -------------------------------------------------------------------------- */ +/* styles */ +/* -------------------------------------------------------------------------- */ + +const SelectButtonStyle = ` + relative w-full + cursor-default + rounded + border border-gray-50 + outline-8 + bg-white + py-2 pl-3 pr-10 text-left + hover:border-gray-300 + focus:outline-1 + focus-visible:border-gray-500 + sm:text-sm + `; + +const SelectOptionsStyle = ` + absolute z-10 mt-1 w-full max-h-56 + bg-white shadow-lg + rounded py-1 + overflow-auto + focus:outline-none + text-base + sm:text-sm + `; + +const SelectIconStyle = ` + pointer-events-none + absolute inset-y-0 right-0 + flex items-center pr-2 + `; +/* -------------------------------------------------------------------------- */ +/* Component implementation */ +/* -------------------------------------------------------------------------- */ +function Select({ + className, + options = [], + value, + onChange, + displayValueResolver, + disabled, + ...props +}: Props): JSX.Element { + return ( +
+ +
+ + {({ open }) => ( + <> + {`${ + displayValueResolver ? displayValueResolver(value) : value + }`} + + + + + )} + + + + + {options.map((option, id) => ( + + classNames( + active ? "text-gray-900 bg-blue-50" : "font-normal ", + "cursor-default select-none relative py-2 pl-3 pr-9", + selected ? "text-gray-900 bg-blue-100" : "font-normal " + ) + } + value={option} + > + {`${ + displayValueResolver ? displayValueResolver(option) : option + }`} + + ))} + + +
+ +
+ ); +} +export default Select; diff --git a/src/components/icons.tsx b/src/components/icons.tsx index 0e22b92..e480c84 100644 --- a/src/components/icons.tsx +++ b/src/components/icons.tsx @@ -31,3 +31,35 @@ 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"; +export { ReactComponent as SVGArrowUp } from "assets/svg/arrow-up.svg"; +export { ReactComponent as SVGBellNotification } from "assets/svg/bell-notification.svg"; +export { ReactComponent as SVGBell } from "assets/svg/bell.svg"; +export { ReactComponent as SVGBookmarkFilled } from "assets/svg/bookmark-filled.svg"; +export { ReactComponent as SVGBookmarkOutlined } from "assets/svg/bookmark-outlined.svg"; +export { ReactComponent as SVGChart } from "assets/svg/chart.svg"; +export { ReactComponent as SVGCircle } from "assets/svg/circle.svg"; +export { ReactComponent as SVGFavoriteFilled } from "assets/svg/favorite-filled.svg"; +export { ReactComponent as SVGFavoriteOutlined } from "assets/svg/favorite-outlined.svg"; +export { ReactComponent as SVGFile } from "assets/svg/file.svg"; +export { ReactComponent as SVGFilter } from "assets/svg/filter.svg"; +export { ReactComponent as SVGFlag } from "assets/svg/flag.svg"; +export { ReactComponent as SVGFormula } from "assets/svg/formula.svg"; +export { ReactComponent as SVGHamburger } from "assets/svg/hamburger.svg"; +export { ReactComponent as SVGHelp } from "assets/svg/help.svg"; +export { ReactComponent as SVGHorizontal } from "assets/svg/horizontal.svg"; +export { ReactComponent as SVGImage } from "assets/svg/image.svg"; +export { ReactComponent as SVGInfo } from "assets/svg/info.svg"; +export { ReactComponent as SVGLeftMenu } from "assets/svg/left-menu.svg"; +export { ReactComponent as SVGLink } from "assets/svg/link.svg"; +export { ReactComponent as SVGLogo } from "assets/svg/logo.svg"; +export { ReactComponent as SVGPalete } from "assets/svg/palete.svg"; +export { ReactComponent as SVGPlot } from "assets/svg/plot.svg"; +export { ReactComponent as SVGRightMenu } from "assets/svg/right-menu.svg"; +export { ReactComponent as SVGSelection } from "assets/svg/selection.svg"; +export { ReactComponent as SVGSend } from "assets/svg/send.svg"; +export { ReactComponent as SVGSettings } from "assets/svg/settings.svg"; +export { ReactComponent as SVGShape } from "assets/svg/shape.svg"; +export { ReactComponent as SVGSmile } from "assets/svg/smile.svg"; +export { ReactComponent as SVGTable } from "assets/svg/table.svg"; +export { ReactComponent as SVGVertical } from "assets/svg/vertical.svg"; +export { ReactComponent as SVGVideo } from "assets/svg/video.svg"; diff --git a/src/index.css b/src/index.css index 5364fa1..d0ce2d6 100644 --- a/src/index.css +++ b/src/index.css @@ -49,9 +49,81 @@ font-display: swap; } + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-Black.ttf") format("truetype"); + font-weight: 900; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-ExtraBold.ttf") format("truetype"); + font-weight: 800; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-Bold.ttf") format("truetype"); + font-weight: 700; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-SemiBold.ttf") format("truetype"); + font-weight: 600; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-Regular.ttf") format("truetype"); + font-weight: normal; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-Light.ttf") format("truetype"); + font-weight: 300; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-ExtraLight.ttf") format("truetype"); + font-weight: 200; + font-style: normal; + font-display: swap; + } + + @font-face { + font-family: "Inter"; + src: url("assets/fonts/Inter-Thin.ttf") format("truetype"); + font-weight: 100; + font-style: normal; + font-display: swap; + } + html { - font-family: "Poppins", -apple-system, "Segoe UI", system-ui, "Roboto", - "Helvetica Neue", "Arial"; + font-family: "Inter", "Poppins", -apple-system, "Segoe UI", system-ui, + "Roboto", "Helvetica Neue", "Arial"; color: var(--color-text); }