Sacha Weatherstone
5 years ago
11 changed files with 270 additions and 9 deletions
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
Binary file not shown.
@ -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"); |
||||
|
} |
||||
@ -0,0 +1,123 @@ |
|||||
|
import React from 'react'; |
||||
|
|
||||
|
import { HomeIcon, MenuIcon } from '@heroicons/react/outline'; |
||||
|
|
||||
|
export const Tmp = () => { |
||||
|
return ( |
||||
|
<div className="h-screen flex flex-col flex-auto items-center w-full min-w-0 bg-gray-200 "> |
||||
|
<div className="relative flex justify-center w-full overflow-hidden z-50 bg-primary"> |
||||
|
<div className="max-w-360 w-full sm:py-3 sm:m-8 sm:mb-0 md:mt-12 md:mx-8 md:pt-4 md:pb-3 sm:rounded-t-xl border-b sm:shadow-2xl overflow-hidden bg-white"> |
||||
|
<div className="relative flex flex-auto flex-0 items-center h-16 px-4 md:px-6"> |
||||
|
{/* NORMAL NAV ICON */} |
||||
|
<div className="hidden md:flex items-center mx-2"> |
||||
|
<img |
||||
|
className="w-16 dark:hidden" |
||||
|
src="Mesh_Logo_Black.svg" |
||||
|
alt="Logo image" |
||||
|
/> |
||||
|
<img |
||||
|
className="hidden dark:flexw-16" |
||||
|
src="Mesh_Logo_White.svg" |
||||
|
alt="Logo image" |
||||
|
/> |
||||
|
</div> |
||||
|
{/* END NORMAL NAV ICON */} |
||||
|
{/* MOBILE NAV BUTTON */} |
||||
|
<button className="md:hidden w-10 h-10 rounded-full hover:bg-gray-200 hover:shadow-inner text-gray-500"> |
||||
|
<span className="flex justify-center "> |
||||
|
<MenuIcon className="h-6 w-6" /> |
||||
|
</span> |
||||
|
</button> |
||||
|
{/* END MOBILE NAV BUTTON */} |
||||
|
<div className="flex items-center pl-2 ml-auto space-x-1 sm:space-x-2"> |
||||
|
{/* HEADER BUTTON */} |
||||
|
<button className="w-10 h-10 rounded-full hover:bg-gray-200 hover:shadow-inner"> |
||||
|
<span className="flex justify-center "> |
||||
|
<span className="w-6 shadow rounded-sm"> |
||||
|
<img |
||||
|
className="w-full" |
||||
|
src="assets/images/flags/US.svg" |
||||
|
alt="Flag image for en" |
||||
|
/> |
||||
|
</span> |
||||
|
</span> |
||||
|
</button> |
||||
|
{/* END HEADER BUTTON */} |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="hidden md:flex flex-auto flex-0 relative items-center h-16 px-4 "> |
||||
|
<div className="flex items-center"> |
||||
|
{/* NAV ITEM */} |
||||
|
<div className="flex h-12 items-center hover:bg-gray-100 rounded-md cursor-pointer px-3 select-none"> |
||||
|
<HomeIcon className="h-5 w-5 mr-3" /> |
||||
|
<span>Dashboard</span> |
||||
|
</div> |
||||
|
{/* END NAV ITEM */} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="flex flex-auto justify-center w-full sm:px-8 sm:mb-8"> |
||||
|
<div className="flex flex-col flex-auto w-full sm:max-w-360 sm:shadow-xl sm:overflow-hidden bg-gray-100 sm:rounded-b-xl"> |
||||
|
<div className="flex flex-col flex-auto min-w-0 "> |
||||
|
<div className="flex flex-col sm:flex-row flex-0 sm:items-center sm:justify-between p-6 sm:py-8 sm:px-10 border-b bg-white"> |
||||
|
<div className="flex-1 min-w-0"> |
||||
|
<div className="flex flex-wrap items-center font-medium"> |
||||
|
<div> |
||||
|
<a className="whitespace-nowrap text-purple-500"> |
||||
|
User Interface |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="mt-2"> |
||||
|
<h2 className="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate"> |
||||
|
{' '} |
||||
|
Confirmation Dialog{' '} |
||||
|
</h2> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="flex-auto p-6 sm:p-10 "> |
||||
|
<div className="max-w-3xl"> |
||||
|
<div className="max-w-3xl prose prose-sm"> |
||||
|
<p> |
||||
|
{' '} |
||||
|
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.{' '} |
||||
|
</p> |
||||
|
<p> |
||||
|
{' '} |
||||
|
In order for you to save time while developing with Fuse, we |
||||
|
have created a simple yet powerful{' '} |
||||
|
<code>FuseConfirmationService</code> to create customized |
||||
|
confirmation dialogs on-the-fly.{' '} |
||||
|
</p> |
||||
|
<p> |
||||
|
{' '} |
||||
|
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.{' '} |
||||
|
</p> |
||||
|
<p> |
||||
|
{' '} |
||||
|
For more detailed information and API documentation, check |
||||
|
the{' '} |
||||
|
<a href="/ui/fuse-components/services/confirmation"> |
||||
|
documentation |
||||
|
</a>{' '} |
||||
|
page.{' '} |
||||
|
</p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
@ -0,0 +1,15 @@ |
|||||
|
import React from 'react'; |
||||
|
|
||||
|
interface NavItemProps { |
||||
|
icon: JSX.Element; |
||||
|
text: string; |
||||
|
} |
||||
|
|
||||
|
export const NavItem = ({ icon, text }: NavItemProps) => { |
||||
|
return ( |
||||
|
<div className="flex h-12 items-center hover:bg-gray-100 rounded-md cursor-pointer px-3 select-none"> |
||||
|
{icon} |
||||
|
<span className="">{text}</span> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
Loading…
Reference in new issue