Skip to content

Commit f992e96

Browse files
harish-sethuramanharish-sethuraman
committed
modify styles
1 parent e9c61b8 commit f992e96

File tree

3 files changed

+89
-63
lines changed

3 files changed

+89
-63
lines changed

‎beta/src/components/MDX/Sandpack/Console.tsx‎

Lines changed: 70 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import * as React from 'react';
33
import {IconChevron} from 'components/Icon/IconChevron';
44

55
import {SandpackCodeViewer, useSandpack} from '@codesandbox/sandpack-react';
6-
import type {SandpackMessage} from '@codesandbox/sandpack-client';
76

87
const getType = (message: Methods): 'info' | 'warning' | 'error' => {
98
if (message === 'log' || message === 'info') {
@@ -62,70 +61,85 @@ export const SandpackConsole: React.FC<{clientId?: string}> = ({clientId}) => {
6261
return unsubscribe;
6362
}, [listen]);
6463

64+
const [showConsole, toggleConsole] = React.useState(false);
65+
6566
React.useEffect(() => {
6667
if (wrapperRef.current) {
6768
wrapperRef.current.scrollTop = wrapperRef.current.scrollHeight;
6869
}
6970
}, [logs]);
7071

7172
return (
72-
<div className="w-full h-full border-y dark:border-gray-700 dark:bg-gray-95 dark:text-white">
73-
{!!logs.length && (
74-
<div className="flex justify-between">
75-
<p className="p-2 text-md">console</p>
76-
<button className="p-2" onClick={() => setLogs([])}>
77-
<svg
78-
viewBox="0 0 24 24"
79-
width="18"
80-
height="18"
81-
stroke="currentColor"
82-
strokeWidth="2"
83-
fill="none"
84-
strokeLinecap="round"
85-
strokeLinejoin="round"
86-
className="css-i6dzq1">
87-
<circle cx="12" cy="12" r="10"></circle>
88-
<line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line>
89-
</svg>
90-
</button>
73+
<div
74+
className={cn(
75+
'absolute dark:border-gray-700 dark:bg-gray-95 border-t bottom-0 w-full',
76+
!!!logs.length && 'cursor-not-allowed'
77+
)}>
78+
<div className="flex justify-between h-8 items-center">
79+
<div onClick={() => !!logs.length && toggleConsole(!showConsole)}>
80+
<IconChevron displayDirection={showConsole ? 'down' : 'right'} />
9181
</div>
92-
)}
93-
<div className={cn('console-scroll')} ref={wrapperRef}>
94-
{logs.map(({data, id, method}) => {
95-
return (
96-
<p
97-
key={id}
98-
className={cn(
99-
'border-y border dark:border-gray-700 text-md p-1 pl-2',
100-
`console-${getType(method)}`
101-
)}>
102-
<span className={cn('console-message')}>
103-
{data.map((msg, index) => {
104-
if (typeof msg === 'string') {
105-
return <span key={`${msg}-${index}`}>{msg}</span>;
106-
}
107-
108-
console.log('console', console);
109-
110-
const children = JSON.stringify(msg);
111-
112-
return (
113-
<span
114-
className={cn('console-span')}
115-
key={`${msg}-${index}`}>
116-
<SandpackCodeViewer
117-
initMode="user-visible"
118-
// fileType="js"
119-
code={children}
120-
/>
121-
</span>
122-
);
123-
})}
124-
</span>
125-
</p>
126-
);
127-
})}
82+
<p className="p-1 text-md">console ({logs.length})</p>
83+
<button
84+
className={cn('p-1', !!!logs.length && 'cursor-not-allowed')}
85+
onClick={() => {
86+
setLogs([]);
87+
toggleConsole(false);
88+
}}>
89+
<svg
90+
viewBox="0 0 24 24"
91+
width="18"
92+
height="18"
93+
stroke="currentColor"
94+
strokeWidth="2"
95+
fill="none"
96+
strokeLinecap="round"
97+
strokeLinejoin="round">
98+
<circle cx="12" cy="12" r="10"></circle>
99+
<line x1="4.93" y1="4.93" x2="19.07" y2="19.07"></line>
100+
</svg>
101+
</button>
128102
</div>
103+
{showConsole && (
104+
<div className="w-full h-full border-y dark:border-gray-700 dark:bg-gray-95 dark:text-white">
105+
<div className={cn('console-scroll')} ref={wrapperRef}>
106+
{logs.map(({data, id, method}) => {
107+
return (
108+
<p
109+
key={id}
110+
className={cn(
111+
'border-y border dark:border-gray-700 text-md p-1 pl-2',
112+
`console-${getType(method)}`
113+
)}>
114+
<span className={cn('console-message')}>
115+
{data.map((msg, index) => {
116+
if (typeof msg === 'string') {
117+
return <span key={`${msg}-${index}`}>{msg}</span>;
118+
}
119+
120+
console.log('console', console);
121+
122+
const children = JSON.stringify(msg);
123+
124+
return (
125+
<span
126+
className={cn('console-span')}
127+
key={`${msg}-${index}`}>
128+
<SandpackCodeViewer
129+
initMode="user-visible"
130+
// fileType="js"
131+
code={children}
132+
/>
133+
</span>
134+
);
135+
})}
136+
</span>
137+
</p>
138+
);
139+
})}
140+
</div>
141+
</div>
142+
)}
129143
</div>
130144
);
131145
};

‎beta/src/components/MDX/Sandpack/CustomPreset.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,12 @@ import {useSandpackLint} from './utils';
2424
export function CustomPreset({
2525
isSingleFile,
2626
showDevTools,
27+
showConsole,
2728
onDevToolsLoad,
2829
devToolsLoaded,
2930
}: {
3031
isSingleFile: boolean;
32+
showConsole: boolean;
3133
showDevTools: boolean;
3234
devToolsLoaded: boolean;
3335
onDevToolsLoad: () => void;
@@ -67,11 +69,14 @@ export function CustomPreset({
6769
showRunButton={false}
6870
extensions={[onLint]}
6971
/>
70-
<Preview
71-
className="order-last xl:order-2"
72-
isExpanded={isExpanded}
73-
lintErrors={lintErrors}
74-
/>
72+
<div className="sp-stack h-full">
73+
<Preview
74+
className="h-full"
75+
isExpanded={isExpanded}
76+
lintErrors={lintErrors}
77+
/>
78+
{showConsole && <SandpackConsole />}
79+
</div>
7580
{isExpandable && (
7681
<button
7782
translate="yes"
@@ -99,7 +104,6 @@ export function CustomPreset({
99104
</button>
100105
)}
101106
</div>
102-
<SandpackConsole />
103107

104108
{showDevTools && (
105109
<SandpackReactDevTools onLoadModule={onDevToolsLoad} />

‎beta/src/components/MDX/Sandpack/SandpackRoot.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ type SandpackProps = {
1414
autorun?: boolean;
1515
setup?: SandpackSetup;
1616
showDevTools?: boolean;
17+
showConsole?: boolean;
1718
};
1819

1920
const sandboxStyle = `
@@ -63,7 +64,13 @@ ul {
6364
`.trim();
6465

6566
function SandpackRoot(props: SandpackProps) {
66-
let {children, setup, autorun = true, showDevTools = false} = props;
67+
let {
68+
children,
69+
setup,
70+
autorun = true,
71+
showDevTools = false,
72+
showConsole = true,
73+
} = props;
6774
const [devToolsLoaded, setDevToolsLoaded] = React.useState(false);
6875
let codeSnippets = React.Children.toArray(children) as React.ReactElement[];
6976
let isSingleFile = true;
@@ -86,6 +93,7 @@ function SandpackRoot(props: SandpackProps) {
8693
<CustomPreset
8794
isSingleFile={isSingleFile}
8895
showDevTools={showDevTools}
96+
showConsole={showConsole}
8997
onDevToolsLoad={() => setDevToolsLoaded(true)}
9098
devToolsLoaded={devToolsLoaded}
9199
/>

0 commit comments

Comments
 (0)