-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added reactor router dom fo navigation to different components
- Loading branch information
1 parent
17bcdaf
commit 5b6967c
Showing
10 changed files
with
630 additions
and
51 deletions.
There are no files selected for viewing
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| /* Nav container */ | ||
| nav { | ||
| background-color: #2c3e50; /* Dark background */ | ||
| padding: 10px 20px; /* Space around the nav */ | ||
| border-radius: 8px; /* Rounded corners */ | ||
| box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */ | ||
| } | ||
|
|
||
| /* Unordered list styles */ | ||
| nav ul { | ||
| list-style: none; /* Remove bullets */ | ||
| display: flex; /* Align items horizontally */ | ||
| justify-content: center; /* Center items horizontally */ | ||
| margin: 0; /* Remove default margin */ | ||
| padding: 0; /* Remove default padding */ | ||
| } | ||
|
|
||
| /* List item styles */ | ||
| nav ul li { | ||
| margin: 0 15px; /* Space between links */ | ||
| } | ||
|
|
||
| /* Link styles */ | ||
| nav ul li a { | ||
| text-decoration: none; /* Remove underline */ | ||
| color: white; /* White text */ | ||
| font-size: 18px; /* Larger font size */ | ||
| font-weight: bold; /* Bold font */ | ||
| padding: 8px 16px; /* Space around the text */ | ||
| border-radius: 4px; /* Rounded corners for each link */ | ||
| transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition */ | ||
| } | ||
|
|
||
| /* Link hover styles */ | ||
| nav ul li a:hover { | ||
| background-color: #3498db; /* Blue background on hover */ | ||
| transform: scale(1.1); /* Slightly enlarge on hover */ | ||
| } | ||
|
|
||
| /* Link active styles */ | ||
| nav ul li a.active { | ||
| color: #e74c3c; /* Red color when active */ | ||
| border-bottom: 3px solid #e74c3c; /* Red underline when active */ | ||
| } | ||
| /* | ||
| Explanation of the Styles: | ||
| ------------- | ||
| 1.nav: The background-color is set to a dark shade for a modern look, and box-shadow adds a subtle depth effect. | ||
| 2.ul: Flexbox is used to horizontally align the items and justify-content: center centers the links. | ||
| 3.li: Margin is used to space the links apart. | ||
| 4.a: The links have no underline by default, and the text is white for contrast against the dark background. The border-radius adds rounded corners to the links for a soft look. | ||
| 5.Hover Effect: When you hover over a link, it changes the background color and slightly enlarges to create a "pop" effect. | ||
| 6.Active Link: If you want the active link to be highlighted, you can apply the .active class in React based on the current route (this will be added dynamically as the user navigates). | ||
| */ |
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,131 @@ | ||
| import React from 'react'; | ||
| import { useCustomElementRef, fluid } from './../fluid'; // Replaced by @lmig/fluid-react-utils | ||
| import { useEffect,useState } from 'react'; | ||
| //built-in fetch API or a library like axios | ||
| //npm i axios | ||
| import axios from 'axios'; | ||
|
|
||
| function AxiosCall() { | ||
|
|
||
| // ---- Initialise FLUID | ||
| let env:any = fluid.environments.external; | ||
| useEffect(() => fluid.init(env)); | ||
| //since its typescript, cannot use with empty dependency | ||
| //useEffect(() => fluid.init(env), []); | ||
| // ---- Start Building | ||
| const [response, setResponse] = useState(null); | ||
|
|
||
| const validation = [ | ||
| { | ||
| type: 'required', | ||
| value: true, | ||
| message: 'This is a required field.', | ||
| }, | ||
| ]; | ||
| const fluidFormRef = useCustomElementRef( | ||
| { valueChanged: (event:any) => { | ||
| console.log('value changed'); | ||
| }, | ||
| formChanged: (event:any) => { | ||
| console.log(event.detail); | ||
| }, | ||
| actionClicked: (event:any) => { | ||
| console.log(event.detail.data.redactedValue); | ||
| const sendData = async () => { | ||
| try { | ||
| const res = await axios.post('https://jsonplaceholder.typicode.com/posts', event.detail.data.redactedValue, { | ||
| headers: { | ||
| 'Content-Type': 'application/json', // Ensures JSON content | ||
| }, | ||
| }); | ||
|
|
||
| console.log(res.data); | ||
| setResponse(res.data); | ||
| } catch (error) { | ||
| console.error('Error:', error); | ||
| } | ||
| }; | ||
| sendData(); | ||
| }, | ||
| }, | ||
| { | ||
| config: { | ||
| layout: 'vertical', | ||
| elements: [ | ||
| { | ||
| dataPath: 'textInput', | ||
| label: 'My Text Input', | ||
| type: 'input', | ||
| controlName: 'textInput', | ||
| validation, | ||
| }, | ||
| { | ||
| dataPath: 'array', | ||
| label: 'Array Section', | ||
| elementType: 'array', | ||
|
|
||
| constraints: { | ||
| minimumEntries: 2, | ||
| maximumEntries: 8, | ||
| }, | ||
|
|
||
| initialValue: [ | ||
| { phoneNumber: '(801) 999-9999' }, | ||
| { phoneNumber: '(801) 222-2222' }, | ||
| ], | ||
|
|
||
| controlName: 'array', | ||
| formConfig: { | ||
| allowDeleteForm: (data: { | ||
| redactedValue?: { phoneNumber: number }; | ||
| }) => { | ||
| const test = !data?.redactedValue?.phoneNumber; | ||
| //console.log('data::', data, test); | ||
| return test; | ||
| }, | ||
|
|
||
| elements: [ | ||
| { | ||
| dataPath: 'phoneNumber', | ||
| label: 'phone', | ||
| type: 'input', | ||
| controlName: 'phoneNumber', | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| ], | ||
| submitConfig: { | ||
| actionText: 'Save', | ||
| actionKey: 'formSubmitted', | ||
| }, | ||
| cancelConfig: { | ||
| actionText: 'Cancel', | ||
| actionKey: 'formCancelled', | ||
| displayDialogBeforeAction: true, | ||
| }, | ||
| }, | ||
| } | ||
| ); | ||
| console.log('fluidFormRef', fluidFormRef); | ||
|
|
||
| // const btRef = useCustomElementRef( | ||
| // { | ||
| // click: async () => { | ||
| // console.log('click', fluidFormRef); | ||
| // const test = await fluidFormRef.current.markTouchedAndValidate(); | ||
| // console.log('test'); | ||
| // }, | ||
| // }, | ||
| // { label: 'Test useCustomElementRef.current' } | ||
| // ); | ||
| return ( | ||
| <div> | ||
| <fluid-text>Your Code Here</fluid-text> | ||
| <fluid-form ref={fluidFormRef}></fluid-form> | ||
| {response && <pre>Response: {JSON.stringify(response, null, 2)}</pre>} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default AxiosCall; |
Oops, something went wrong.