Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revamped the kitchen sink #808

Merged
merged 1 commit into from
Oct 31, 2023
Merged

Revamped the kitchen sink #808

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 119 additions & 62 deletions packages/kitchen-sink/src/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,12 @@ import {
lazy,
Suspense,
LazyExoticComponent,
useEffect,
} from 'react';
import './style.css';
import { ErrorBoundary } from 'react-error-boundary';
import { RxHamburgerMenu } from 'react-icons/rx';
import { AiOutlineClose } from 'react-icons/ai';

type Module = { default: ComponentType<any> };

Expand Down Expand Up @@ -38,12 +41,46 @@ type Module = { default: ComponentType<any> };

function App() {
const [selected, setSelected] = useState<number>(-1);

const [sidebarOpened, setSidebarOpened] = useState(false);

const [isMobile, setIsMobile] = useState(true);

const [screen, setScreen] = useState<number | null>(null);

// Setting the Screen Size State whenever the screen is resized
useEffect(() => {
const handleResize = () => setScreen(window.innerWidth);
window.addEventListener('resize', handleResize);
handleResize();
return () => window.removeEventListener('resize', handleResize);
}, []);

// Toggling the isMobile State whenever the screensize changes
useEffect(() => {
if (screen! <= 768) {
setIsMobile(true);
setSidebarOpened(false);
} else {
setIsMobile(false);
setSidebarOpened(true);
}
}, [screen]);

const hasSelected = selected >= 0;

const Mod = hasSelected ? loadedModules[selected]! : null;

return (
<div>
{isMobile && (
<button
className="kitchen_sink-layout-icon"
onClick={() => setSidebarOpened(true)}
>
<RxHamburgerMenu />
</button>
)}
<h1>Million.js Kitchen Sink</h1>
<p>
Hey! We're actively recruiting cooks 🧑‍🍳 to help assemble a list of
Expand All @@ -53,71 +90,91 @@ type Module = { default: ComponentType<any> };
</a>{' '}
for details.
</p>
<div
style={{
display: 'flex',
gap: '0.5rem',
flexWrap: 'wrap',
}}
>
{modules.map(([key], index) => {
return (
<button
onClick={async () => {
setSelected(index);
loadedModules[index] = lazy(() => modules[index]![1]());
}}
key={key}
disabled={hasSelected && selected === index}
>
{key
.replace('./examples/', '')
.replace('.tsx', '')
.replace('.jsx', '')}
</button>
);
})}{' '}
</div>
<details open={hasSelected}>
<summary>
Currently Selected:{' '}
<strong>{hasSelected ? modules[selected]![0] : 'None'}</strong>
</summary>
<div style={{ padding: '1rem' }}>
<ErrorBoundary
fallbackRender={({ error }) => (
<div
style={{
color: '#ff8080',
background: '#290000',
padding: '1rem',
borderRadius: '1rem',
}}
>
<h2>💥 {error.message}</h2>
<pre>{error.stack}</pre>
</div>
)}
>
{hasSelected && Mod && (
<Suspense
fallback={
<div
style={{
opacity: 0.5,
}}
>
<p className="spinner"></p>
Loading module...
</div>
}

<div className="kitchen_sink-layout">
<div
className={`kitchen_sink-sidebar ${
sidebarOpened
? 'kitchen_sink-sidebar_open'
: 'kitchen_sink-sidebar_close'
}`}
>
<div className="kitchen_sink-sidebar_container">
{isMobile && (
<button
className="kitchen_sink-layout-icon"
onClick={() => setSidebarOpened(false)}
>
<Mod />
</Suspense>
<AiOutlineClose />
</button>
)}
</ErrorBoundary>
{modules.map(([key], index) => {
return (
<button
onClick={async () => {
isMobile && setSidebarOpened(false)
setSelected(index);
loadedModules[index] = lazy(() => modules[index]![1]());
}}
key={key}
disabled={hasSelected && selected === index}
>
{key
.replace('./examples/', '')
.replace('.tsx', '')
.replace('.jsx', '')}
</button>
);
})}{' '}
</div>
</div>
</details>
<div className="kitchen_sink-content">
<div className="kitchen_sink-content_container">
<details open={hasSelected}>
<summary>
Currently Selected:{' '}
<strong>
{hasSelected ? modules[selected]![0] : 'None'}
</strong>
</summary>
<div style={{ padding: '1rem' }}>
<ErrorBoundary
fallbackRender={({ error }) => (
<div
style={{
color: '#ff8080',
background: '#290000',
padding: '1rem',
borderRadius: '1rem',
}}
>
<h2>💥 {error.message}</h2>
<pre>{error.stack}</pre>
</div>
)}
>
{hasSelected && Mod && (
<Suspense
fallback={
<div
style={{
opacity: 0.5,
}}
>
<p className="spinner"></p>
Loading module...
</div>
}
>
<Mod />
</Suspense>
)}
</ErrorBoundary>
</div>
</details>
</div>
</div>
</div>
</div>
);
}
Expand Down
133 changes: 97 additions & 36 deletions packages/kitchen-sink/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,9 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
font-family: 'Inter', sans-serif;
}
Expand Down Expand Up @@ -29,6 +35,90 @@ button:disabled {
cursor: not-allowed !important;
}

.kitchen_sink-layout {
margin-top: 1.5em;
display: flex;
height: 100vh;
max-width: 100vw;
overflow: hidden;
}

.kitchen_sink-layout-icon {
outline: none;
border: none;
cursor: pointer;
position: relative;
}

.kitchen_sink-content {
width: 100%;
overflow-x: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
.kitchen_sink-content::-webkit-scrollbar {
display: none;
}

.kitchen_sink-content_container {
width: 95%;
margin: 0 auto;
max-width: 1300px;
height: 100vh;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}

.kitchen_sink-content_container::-webkit-scrollbar {
display: none;
}
.kitchen_sink-sidebar {
border: 1px solid #353535;
height: 100vh;
box-shadow: 0px 4px 25px rgb(#000, 0.25);
overflow-y: scroll;
transition: all 200ms ease-in-out;
-ms-overflow-style: none;
scrollbar-width: none;
background: #252525;
}


.kitchen_sink-sidebar::-webkit-scrollbar {
display: none;
}

.kitchen_sink-sidebar_container {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
gap: 1em;
overflow-y: scroll;
}

.kitchen_sink-sidebar_close {
width: 0px;
overflow: hidden;
transition: all 200ms ease-in;
}

.kitchen_sink-sidebar_open {
padding: 1em;
width: 320px;
min-width: 270px;
}

@media screen and (max-width: 768px) {
.kitchen_sink-sidebar {
position: fixed;
z-index: 99999999;
top: 0;
left: 0;
}
}

pre {
white-space: pre-wrap;
/* css-3 */
Expand Down Expand Up @@ -901,24 +991,6 @@ input[type='range'] {
background-color: #45a049;
}

.markdown-editor-container {
width: 100%;
display: flex;
padding-bottom: 1em;
}

.markdown-input {
width: 100%;
height: 40vh;
font-size: 16px;
}

.markdown-preview {
border: 1px solid #ddd;
height: 40vh;
overflow-y: auto;
padding: 0 5px;
}
/* Age calculator styles */

.calculator-form {
Expand All @@ -938,27 +1010,16 @@ input[type='range'] {
font-size: 1.5rem;
}

/* ******************************** */
/* Bmi Calculator Responsiveness */

@media only screen and (min-width: 290px) and (max-width: 590px){
.BmiDivInputFields {
flex-direction: column;
}
}

/* ********************************* */

/*Snake Game CSS*/
.snakeGame--main{
.snakeGame--main {
height: 500px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
/* border: 1px solid red; */
}
.snakeGame--keys{
.snakeGame--keys {
width: 500px;
height: 150px;
border: 1px solid white;
Expand All @@ -969,7 +1030,7 @@ input[type='range'] {
justify-content: center;
align-items: center;
}
.snakeGame--keys2{
.snakeGame--keys2 {
display: flex;
flex-direction: row;
width: 65%;
Expand Down Expand Up @@ -1027,10 +1088,10 @@ input[type='range'] {
opacity: 0.5;
}
@media (max-width: 768px) {
.snakeGame--main{
flex-direction: column;
height: auto;
width: 100%;
.snakeGame--main {
flex-direction: column;
height: auto;
width: 100%;
}
.snakeGame {
width: 100%;
Expand Down