Skip to content

Commit

Permalink
updated
Browse files Browse the repository at this point in the history
  • Loading branch information
jagankumar-egov committed Jul 12, 2024
1 parent 445de85 commit 39f486b
Showing 4 changed files with 92 additions and 7 deletions.
4 changes: 3 additions & 1 deletion micro-frontends/sample/src/App.jsx
Original file line number Diff line number Diff line change
@@ -8,6 +8,7 @@ import { Suspense, lazy } from "react";
import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
import withAuth from "./hoc/withAuth";
import Drawer from "./components/Drawer";
import ClickableScreen from "./components/ClickableScreen";
const basePath = import.meta.env.BASE_URL;

const routes = [
@@ -60,9 +61,9 @@ export const TodoComponent = () => {
};

function App() {
console.log(basePath,'basePath');
return (
<>
<ClickableScreen>
<div>
<TodoComponent></TodoComponent>
<Drawer></Drawer>
@@ -109,6 +110,7 @@ function App() {
<StatusBar></StatusBar>
</Suspense>
</div>
</ClickableScreen>
</>
);
}
57 changes: 57 additions & 0 deletions micro-frontends/sample/src/components/ClickableScreen.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
// ClickableScreen.js

import React from 'react';
import ToggleButton from './ToggleButton';
import { useDrawerState } from '../state/useDrawerState';
import { useNavigatorState } from '../state/useNavigatorState';
const enabled=false;
const ClickableScreen = ({ onTextClick,children }) => {

const { setData:setDrawer,data:drawerData } = useDrawerState();
const { data } = useNavigatorState();
const [state,setState] = React.useState(false);
const handleClick = (event) => {
// Get the element that was clicked
const clickedElement = event.target;

// Extract text content from the clicked element
const clickedText = clickedElement.textContent.trim();

// Call the callback with the clicked text
console.log(clickedText,'clickedText');
state&& setDrawer({...drawerData,isOpen:!drawerData?.isOpen,clickedFrom:data?.currentScreen ,content:clickedText})
onTextClick?.(clickedText);
setState(false);
};
return (
<div
// className="h-screen flex justify-center items-center bg-gray-200"
>
<div
// className="p-6 bg-white shadow-lg rounded-md cursor-pointer"
onClick={handleClick}
>
{!drawerData?.isOpen&&enabled&&<ToggleButton
opened={state}
onClick={(e)=>{
setState(!state);
e.preventDefault();
e.stopPropagation();
}}
// onClick={()=>setDrawer({...drawerData,isOpen:!drawerData?.isOpen,fromScreen:data?.currentScreen ,content:"Hii"})}
></ToggleButton>}

{/* <p className="mt-2 text-sm text-gray-600">Identify the text you clicked on.</p>
<button
className="mt-4 bg-indigo-500 text-white py-2 px-4 rounded-md hover:bg-indigo-600"
onClick={handleClick}
>
Click Me
</button> */}
{children}
</div>
</div>
);
};

export default ClickableScreen;
17 changes: 11 additions & 6 deletions micro-frontends/sample/src/components/Drawer.jsx
Original file line number Diff line number Diff line change
@@ -2,6 +2,7 @@

import React from 'react';
import { useDrawerState } from '../state/useDrawerState';
// import ClickableScreen from './ClickableScreen';

const Drawer = ({ onClose }) => {
const { data,resetData } = useDrawerState();
@@ -17,8 +18,7 @@ const Drawer = ({ onClose }) => {
<div className="relative w-screen max-w-md">
<div className="h-full flex flex-col py-6 bg-white shadow-xl overflow-y-scroll">
<div className="px-4 sm:px-6">
<h2>Clicked from : ${data?.clickedFrom}</h2>
<h6>content : ${data?.content}</h6>


<div className="flex items-start justify-between">
<h2 className="text-lg font-medium text-gray-900">Drawer Content</h2>
@@ -46,16 +46,21 @@ const Drawer = ({ onClose }) => {
</button>
</div>
</div>
<h4 className="text-lg font-light text-gray-900">Clicked from :</h4>
<h2 className="text-lg font-medium text-orange-800">{data?.clickedFrom}</h2>
<h4 className="text-lg font-light text-gray-900">Content :</h4>
<h2 className="text-lg font-medium text-orange-800">{data?.content}</h2>
</div>
<div className="mt-6 relative flex-1 px-4 sm:px-6">
{/* Replace with your content */}
{/* <ClickableScreen></ClickableScreen> */}
{/* <div className="mt-6 relative flex-1 px-4 sm:px-6">
<div className="h-full border-2 border-dashed border-gray-200">
{/* Your content here */}
{/* Your content here
<p className="text-sm text-gray-500">
Replace with your drawer content.
</p>
</div>
</div>
</div> */}
</div>
</div>
</section>
21 changes: 21 additions & 0 deletions micro-frontends/sample/src/components/ToggleButton.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// ToggleButton.js

import React from 'react';

const ToggleButton = ({ onClick,opened }) => {
return (
<>
<button
className={`fixed top-1/2 right-0 transform -translate-y-1/2 bg-indigo-500 text-white py-2 px-4 rounded-l-md hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 z-50 ${opened ? 'opacity-50' : 'opacity-100'}`}
onClick={onClick}
>
{opened?"Click on any text":"Enable Admin Mode"}
</button>
<div className={`fixed bottom-5 right-5 bg-white border border-gray-300 p-4 rounded-md shadow-md transition-opacity ${opened? 'opacity-90' : 'opacity-0'}`}>
<h1 className="text-xl font-semibold text-gray-900">Click anywhere on the screen</h1>
</div>
</>
);
};

export default ToggleButton;

0 comments on commit 39f486b

Please sign in to comment.