-
Notifications
You must be signed in to change notification settings - Fork 517
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* use common folder for inertia frontend * adding react things * formatting * wip * wip * wip * wip * wip * fix logout wording * Apply fixes from StyleCI (#72) * wip * Apply fixes from StyleCI (#74) * wip * Apply fixes from StyleCI (#75) * add transition / headless ui * Apply fixes from StyleCI (#76)
- Loading branch information
1 parent
81c9007
commit bd47593
Showing
64 changed files
with
1,275 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
9 changes: 9 additions & 0 deletions
9
stubs/inertia-react/resources/js/Components/ApplicationLogo.js
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import React from 'react'; | ||
|
|
||
| export default function Button({ type = 'submit', className = '', processing, children }) { | ||
| return ( | ||
| <button | ||
| type={type} | ||
| className={ | ||
| `inline-flex items-center px-4 py-2 bg-gray-900 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest active:bg-gray-900 transition ease-in-out duration-150 ${ | ||
| processing && 'opacity-25' | ||
| } ` + className | ||
| } | ||
| disabled={processing} | ||
| > | ||
| {children} | ||
| </button> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import React from 'react'; | ||
|
|
||
| export default function Checkbox({ name, value, handleChange }) { | ||
| return ( | ||
| <input | ||
| type="checkbox" | ||
| name={name} | ||
| value={value} | ||
| className="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" | ||
| onChange={(e) => handleChange(e)} | ||
| /> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import React, { useState, useContext } from 'react'; | ||
| import { InertiaLink } from '@inertiajs/inertia-react'; | ||
| import { Transition } from '@headlessui/react'; | ||
|
|
||
| const DropDownContext = React.createContext(); | ||
|
|
||
| const Dropdown = ({ children }) => { | ||
| const [open, setOpen] = useState(false); | ||
|
|
||
| const toggleOpen = () => { | ||
| setOpen((previousState) => !previousState); | ||
| }; | ||
|
|
||
| return ( | ||
| <DropDownContext.Provider value={{ open, setOpen, toggleOpen }}> | ||
| <div className="relative">{children}</div> | ||
| </DropDownContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| const Trigger = ({ children }) => { | ||
| const { open, setOpen, toggleOpen } = useContext(DropDownContext); | ||
|
|
||
| return ( | ||
| <> | ||
| <div onClick={toggleOpen}>{children}</div> | ||
|
|
||
| {open && <div className="fixed inset-0 z-40" onClick={() => setOpen(false)}></div>} | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const Content = ({ align = 'right', width = '48', contentClasses = 'py-1 bg-white', children }) => { | ||
| const { open, setOpen } = useContext(DropDownContext); | ||
|
|
||
| let alignmentClasses = 'origin-top'; | ||
|
|
||
| if (align === 'left') { | ||
| alignmentClasses = 'origin-top-left left-0'; | ||
| } else if (align === 'right') { | ||
| alignmentClasses = 'origin-top-right right-0'; | ||
| } | ||
|
|
||
| let widthClasses = ''; | ||
|
|
||
| if (width === '48') { | ||
| widthClasses = 'w-48'; | ||
| } | ||
|
|
||
| return ( | ||
| <> | ||
| <Transition | ||
| show={open} | ||
| enter="transition ease-out duration-200" | ||
| enterFrom="transform opacity-0 scale-95" | ||
| enterTo="transform opacity-100 scale-100" | ||
| leave="transition ease-in duration-75" | ||
| leaveFrom="transform opacity-100 scale-100" | ||
| leaveTo="transform opacity-0 scale-95" | ||
| > | ||
| {open && ( | ||
| <div | ||
| className={`absolute z-50 mt-2 rounded-md shadow-lg ${alignmentClasses} ${widthClasses}`} | ||
| onClick={() => setOpen(false)} | ||
| > | ||
| <div className={`rounded-md ring-1 ring-black ring-opacity-5 ` + contentClasses}> | ||
| {children} | ||
| </div> | ||
| </div> | ||
| )} | ||
| </Transition> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| const Link = ({ href, method = 'post', as = 'a', children }) => { | ||
| return ( | ||
| <InertiaLink | ||
| href={href} | ||
| method={method} | ||
| as={as} | ||
| className="block w-full px-4 py-2 text-left text-sm leading-5 text-gray-700 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 transition duration-150 ease-in-out" | ||
| > | ||
| {children} | ||
| </InertiaLink> | ||
| ); | ||
| }; | ||
|
|
||
| Dropdown.Trigger = Trigger; | ||
| Dropdown.Content = Content; | ||
| Dropdown.Link = Link; | ||
|
|
||
| export default Dropdown; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import React from 'react'; | ||
|
|
||
| export default function Label({ forInput, value, className, children }) { | ||
| return ( | ||
| <label htmlFor={forInput} className={`block font-medium text-sm text-gray-700 ` + className}> | ||
| {value ? value : { children }} | ||
| </label> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import { InertiaLink } from '@inertiajs/inertia-react'; | ||
| import React from 'react'; | ||
|
|
||
| export default function NavLink({ href, active, children }) { | ||
| return ( | ||
| <InertiaLink | ||
| href={href} | ||
| className={ | ||
| active | ||
| ? 'inline-flex items-center px-1 pt-1 border-b-2 border-indigo-400 text-sm font-medium leading-5 text-gray-900 focus:outline-none focus:border-indigo-700 transition duration-150 ease-in-out' | ||
| : 'inline-flex items-center px-1 pt-1 border-b-2 border-transparent text-sm font-medium leading-5 text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none focus:text-gray-700 focus:border-gray-300 transition duration-150 ease-in-out' | ||
| } | ||
| > | ||
| {children} | ||
| </InertiaLink> | ||
| ); | ||
| } |
Oops, something went wrong.