diff --git a/public/Mesh_Logo_Black.svg b/public/Mesh_Logo_Black.svg new file mode 100644 index 00000000..e0f9bb19 --- /dev/null +++ b/public/Mesh_Logo_Black.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/Mesh_Logo_White.svg b/public/Mesh_Logo_White.svg new file mode 100644 index 00000000..b1bcd575 --- /dev/null +++ b/public/Mesh_Logo_White.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/fonts/inter/Inter-italic.var.woff2 b/public/fonts/inter/Inter-italic.var.woff2 new file mode 100644 index 00000000..03875311 Binary files /dev/null and b/public/fonts/inter/Inter-italic.var.woff2 differ diff --git a/public/fonts/inter/Inter-roman.var.woff2 b/public/fonts/inter/Inter-roman.var.woff2 new file mode 100644 index 00000000..a6efdc48 Binary files /dev/null and b/public/fonts/inter/Inter-roman.var.woff2 differ diff --git a/public/fonts/inter/inter.css b/public/fonts/inter/inter.css new file mode 100644 index 00000000..3294b018 --- /dev/null +++ b/public/fonts/inter/inter.css @@ -0,0 +1,17 @@ +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: normal; + font-named-instance: 'Regular'; + src: url("Inter-roman.var.woff2?v=3.18") format("woff2"); +} + +@font-face { + font-family: 'Inter var'; + font-weight: 100 900; + font-display: swap; + font-style: italic; + font-named-instance: 'Italic'; + src: url("Inter-italic.var.woff2?v=3.18") format("woff2"); +} diff --git a/public/index.html b/public/index.html index e772d911..aa028384 100644 --- a/public/index.html +++ b/public/index.html @@ -8,6 +8,13 @@ + + + + { }, [dispatch]); return ( -
-
-
+ //
+ //
+ //
+ //
+
+
+
+
+ {/* NORMAL NAV ICON */} +
+ Logo image + Logo image +
+ {/* END NORMAL NAV ICON */} + {/* MOBILE NAV BUTTON */} + + {/* END MOBILE NAV BUTTON */} +
+ {/* HEADER BUTTON */} + + {/* END HEADER BUTTON */} + {/* THEME BUTTON */} + + {/* END THEME BUTTON */} +
+
+
+
+ {/* NAV ITEM */} + } + text={'Dashboard'} + /> + {/* END NAV ITEM */} +
+
+
+
+ +
+
+
content
+
+
); }; diff --git a/src/components/Tmp.tsx b/src/components/Tmp.tsx new file mode 100644 index 00000000..c3a0aa32 --- /dev/null +++ b/src/components/Tmp.tsx @@ -0,0 +1,123 @@ +import React from 'react'; + +import { HomeIcon, MenuIcon } from '@heroicons/react/outline'; + +export const Tmp = () => { + return ( +
+
+
+
+ {/* NORMAL NAV ICON */} +
+ Logo image + Logo image +
+ {/* END NORMAL NAV ICON */} + {/* MOBILE NAV BUTTON */} + + {/* END MOBILE NAV BUTTON */} +
+ {/* HEADER BUTTON */} + + {/* END HEADER BUTTON */} +
+
+
+
+ {/* NAV ITEM */} +
+ + Dashboard +
+ {/* END NAV ITEM */} +
+
+
+
+ +
+
+
+
+
+ +
+

+ {' '} + Confirmation Dialog{' '} +

+
+
+
+
+
+
+

+ {' '} + One of the repetitive and tedious jobs in Angular is to + create confirmation dialogs. Since dialogs require their own + component you have to either create a separate component + every time you need a confirmation dialog or you have to + create your own confirmation dialog system that can be + configured.{' '} +

+

+ {' '} + In order for you to save time while developing with Fuse, we + have created a simple yet powerful{' '} + FuseConfirmationService to create customized + confirmation dialogs on-the-fly.{' '} +

+

+ {' '} + Below you can configure and preview the confirmation dialog. + You can use the generated configuration object within your + code to have the exact same dialog.{' '} +

+

+ {' '} + For more detailed information and API documentation, check + the{' '} + + documentation + {' '} + page.{' '} +

+
+
+
+
+
+
+
+ ); +}; diff --git a/src/components/nav/NavItem.tsx b/src/components/nav/NavItem.tsx new file mode 100644 index 00000000..0acc848a --- /dev/null +++ b/src/components/nav/NavItem.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +interface NavItemProps { + icon: JSX.Element; + text: string; +} + +export const NavItem = ({ icon, text }: NavItemProps) => { + return ( +
+ {icon} + {text} +
+ ); +}; diff --git a/src/index.tsx b/src/index.tsx index 2b9e1b2b..9c306f44 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,12 +7,14 @@ import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import App from './App'; +// import { Tmp } from './components/Tmp'; import { store } from './store'; ReactDOM.render( + {/* */} , document.getElementById('root'), diff --git a/tailwind.config.js b/tailwind.config.js index 69651156..7f666bc3 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,10 +3,16 @@ module.exports = { purge: ['./public/**/*.html', './src/**/*.tsx'], darkMode: false, // or 'media' or 'class' theme: { - extend: {}, - }, - variants: { - extend: {}, + fontFamily: { + sans: 'Inter var', + mono: 'IBM Plex Mono', + }, + extend: { + colors: { + primary: '#67ea94', + }, + }, }, + variants: {}, plugins: [], };