mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-27 03:08:06 +00:00
[warn] jsxBracketSameLine is deprecated so replaced it to bracketSameLine
This commit is contained in:
harish-sethuraman
@@ -27,8 +27,7 @@ function Breadcrumbs() {
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M6.86612 13.6161C6.37796 14.1043 6.37796 14.8957 6.86612 15.3839C7.35427 15.872 8.14572 15.872 8.63388 15.3839L13.1339 10.8839C13.622 10.3957 13.622 9.60428 13.1339 9.11612L8.63388 4.61612C8.14572 4.12797 7.35427 4.12797 6.86612 4.61612C6.37796 5.10428 6.37796 5.89573 6.86612 6.38388L10.4822 10L6.86612 13.6161Z"
|
||||
fill="currentColor"
|
||||
|
||||
@@ -37,8 +37,7 @@ export function Button({
|
||||
'bg-transparent text-secondary dark:text-secondary-dark bg-secondary-button dark:bg-secondary-button-dark hover:text-link focus:text-link border-transparent':
|
||||
!active,
|
||||
}
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -74,8 +74,7 @@ function FooterLink({
|
||||
{
|
||||
'flex-row-reverse justify-self-end text-right': type === 'Next',
|
||||
}
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
<IconNavArrow
|
||||
className="text-gray-30 dark:text-gray-50 inline group-focus:text-link dark:group-focus:text-link-dark"
|
||||
displayDirection={type === 'Previous' ? 'left' : 'right'}
|
||||
|
||||
@@ -20,8 +20,7 @@ export const IconArrow = React.memo<
|
||||
{...rest}
|
||||
className={cn(className, {
|
||||
'transform rotate-180': displayDirection === 'right',
|
||||
})}
|
||||
>
|
||||
})}>
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path d="M7.828 11H20v2H7.828l5.364 5.364-1.414 1.414L4 12l7.778-7.778 1.414 1.414z" />
|
||||
</svg>
|
||||
|
||||
@@ -22,12 +22,10 @@ export const IconArrowSmall = React.memo<
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={classes}
|
||||
{...rest}
|
||||
>
|
||||
{...rest}>
|
||||
<path
|
||||
d="M6.86612 13.6161C6.37796 14.1043 6.37796 14.8957 6.86612 15.3839C7.35427 15.872 8.14572 15.872 8.63388 15.3839L13.1339 10.8839C13.622 10.3957 13.622 9.60428 13.1339 9.11612L8.63388 4.61612C8.14572 4.12797 7.35427 4.12797 6.86612 4.61612C6.37796 5.10428 6.37796 5.89573 6.86612 6.38388L10.4822 10L6.86612 13.6161Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
fill="currentColor"></path>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -25,8 +25,7 @@ export const IconChevron = React.memo<
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
viewBox="0 0 20 20">
|
||||
<g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
|
||||
<path
|
||||
fill="currentColor"
|
||||
|
||||
@@ -17,8 +17,7 @@ export const IconClose = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
{...props}>
|
||||
<line x1={18} y1={6} x2={6} y2={18} />
|
||||
<line x1={6} y1={6} x2={18} y2={18} />
|
||||
</svg>
|
||||
|
||||
@@ -13,8 +13,7 @@ export const IconCodeBlock = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
height="1em"
|
||||
viewBox="0 0 24 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M24 9L18.343 14.657L16.929 13.243L21.172 9L16.929 4.757L18.343 3.343L24 9ZM2.828 9L7.071 13.243L5.657 14.657L0 9L5.657 3.343L7.07 4.757L2.828 9ZM9.788 18H7.66L14.212 0H16.34L9.788 18Z"
|
||||
fill="currentColor"
|
||||
|
||||
@@ -13,8 +13,7 @@ export const IconDeepDive = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
height="0.78em"
|
||||
viewBox="0 0 14 14"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M7.62728 12.3491V13.6825H6.29395V12.3491H0.960612C0.783801 12.3491 0.614232 12.2789 0.489207 12.1539C0.364183 12.0288 0.293945 11.8593 0.293945 11.6825V1.01579C0.293945 0.838979 0.364183 0.669409 0.489207 0.544385C0.614232 0.419361 0.783801 0.349123 0.960612 0.349123H4.96061C5.339 0.348674 5.71313 0.42896 6.05803 0.584621C6.40292 0.740282 6.71063 0.967734 6.96061 1.25179C7.2106 0.967734 7.51831 0.740282 7.8632 0.584621C8.20809 0.42896 8.58222 0.348674 8.96061 0.349123H12.9606C13.1374 0.349123 13.307 0.419361 13.432 0.544385C13.557 0.669409 13.6273 0.838979 13.6273 1.01579V11.6825C13.6273 11.8593 13.557 12.0288 13.432 12.1539C13.307 12.2789 13.1374 12.3491 12.9606 12.3491H7.62728ZM12.2939 11.0158V1.68246H8.96061C8.60699 1.68246 8.26785 1.82293 8.0178 2.07298C7.76776 2.32303 7.62728 2.66217 7.62728 3.01579V11.0158H12.2939ZM6.29395 11.0158V3.01579C6.29395 2.66217 6.15347 2.32303 5.90342 2.07298C5.65337 1.82293 5.31423 1.68246 4.96061 1.68246H1.62728V11.0158H6.29395Z"
|
||||
fill="currentColor"
|
||||
|
||||
@@ -12,8 +12,7 @@ export const IconError = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
width="1.33em"
|
||||
height="1.33em"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="10.1626" cy="9.99951" r="9.47021" fill="currentColor" />
|
||||
<path d="M6.22705 5.95996L14.2798 14.0127" stroke="white" />
|
||||
<path d="M14.2798 5.95996L6.22705 14.0127" stroke="white" />
|
||||
|
||||
@@ -13,8 +13,7 @@ export const IconFacebookCircle = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
width="1.33em"
|
||||
height="1.33em"
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
{...props}>
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z" />
|
||||
</svg>
|
||||
|
||||
@@ -12,8 +12,7 @@ export const IconGitHub = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 20 20"
|
||||
{...props}
|
||||
>
|
||||
{...props}>
|
||||
<path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -13,8 +13,7 @@ export const IconGotcha = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
height="1.11em"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M19 0.398926C19.552 0.398926 20 0.846926 20 1.39893V15.3989C20 15.9509 19.552 16.3989 19 16.3989H4.455L0 19.8989V1.39893C0 0.846926 0.448 0.398926 1 0.398926H19ZM18 2.39893H2V15.7839L3.763 14.3989H18V2.39893ZM8.515 4.81093L8.962 5.49893C7.294 6.40193 7.323 7.85093 7.323 8.16293C7.478 8.14293 7.641 8.13893 7.803 8.15393C8.705 8.23793 9.416 8.97893 9.416 9.89893C9.416 10.8649 8.632 11.6489 7.666 11.6489C7.129 11.6489 6.616 11.4039 6.292 11.0589C5.777 10.5129 5.5 9.89893 5.5 8.90393C5.5 7.15393 6.728 5.58593 8.515 4.81093ZM13.515 4.81093L13.962 5.49893C12.294 6.40193 12.323 7.85093 12.323 8.16293C12.478 8.14293 12.641 8.13893 12.803 8.15393C13.705 8.23793 14.416 8.97893 14.416 9.89893C14.416 10.8649 13.632 11.6489 12.666 11.6489C12.129 11.6489 11.616 11.4039 11.292 11.0589C10.777 10.5129 10.5 9.89893 10.5 8.90393C10.5 7.15393 11.728 5.58593 13.515 4.81093Z"
|
||||
fill="currentColor"
|
||||
|
||||
@@ -16,8 +16,7 @@ export const IconHamburger = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
{...props}>
|
||||
<line x1="3" y1="12" x2="21" y2="12"></line>
|
||||
<line x1="3" y1="6" x2="21" y2="6"></line>
|
||||
<line x1="3" y1="18" x2="21" y2="18"></line>
|
||||
|
||||
@@ -13,8 +13,7 @@ export const IconHint = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
width="12"
|
||||
height="14"
|
||||
viewBox="0 0 12 15"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4.53487 11H5.21954V7.66665H6.55287V11H7.23754C7.32554 10.1986 7.7342 9.53732 8.39754 8.81532C8.47287 8.73398 8.9522 8.23732 9.00887 8.16665C9.47973 7.5784 9.77486 6.86913 9.86028 6.1205C9.9457 5.37187 9.81794 4.61434 9.4917 3.93514C9.16547 3.25594 8.65402 2.6827 8.01628 2.28143C7.37853 1.88016 6.64041 1.66719 5.88692 1.66703C5.13344 1.66686 4.39523 1.87953 3.75731 2.28052C3.11939 2.68152 2.60771 3.25454 2.28118 3.9336C1.95465 4.61266 1.82656 5.37014 1.91167 6.1188C1.99677 6.86747 2.2916 7.57687 2.7622 8.16532C2.81954 8.23665 3.3002 8.73398 3.3742 8.81465C4.0382 9.53732 4.44687 10.1986 4.53487 11ZM4.55287 12.3333V13H7.21954V12.3333H4.55287ZM1.7222 8.99998C1.09433 8.21551 0.700836 7.26963 0.587047 6.2713C0.473258 5.27296 0.643804 4.26279 1.07904 3.35715C1.51428 2.4515 2.19649 1.68723 3.04711 1.15237C3.89772 0.617512 4.88213 0.333824 5.88692 0.333984C6.89172 0.334145 7.87604 0.61815 8.72648 1.15328C9.57692 1.68841 10.2589 2.4529 10.6938 3.35869C11.1288 4.26447 11.299 5.27469 11.1849 6.27299C11.0708 7.27129 10.677 8.21705 10.0489 9.00132C9.63554 9.51598 8.55287 10.3333 8.55287 11.3333V13C8.55287 13.3536 8.41239 13.6927 8.16235 13.9428C7.9123 14.1928 7.57316 14.3333 7.21954 14.3333H4.55287C4.19925 14.3333 3.86011 14.1928 3.61006 13.9428C3.36001 13.6927 3.21954 13.3536 3.21954 13V11.3333C3.21954 10.3333 2.1362 9.51598 1.7222 8.99998Z"
|
||||
fill="currentColor"
|
||||
|
||||
@@ -13,8 +13,7 @@ export const IconInstagram = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
width="1.33em"
|
||||
height="1.33em"
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
{...props}>
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path d="M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zm0-2a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm6.5-.25a1.25 1.25 0 0 1-2.5 0 1.25 1.25 0 0 1 2.5 0zM12 4c-2.474 0-2.878.007-4.029.058-.784.037-1.31.142-1.798.332-.434.168-.747.369-1.08.703a2.89 2.89 0 0 0-.704 1.08c-.19.49-.295 1.015-.331 1.798C4.006 9.075 4 9.461 4 12c0 2.474.007 2.878.058 4.029.037.783.142 1.31.331 1.797.17.435.37.748.702 1.08.337.336.65.537 1.08.703.494.191 1.02.297 1.8.333C9.075 19.994 9.461 20 12 20c2.474 0 2.878-.007 4.029-.058.782-.037 1.309-.142 1.797-.331.433-.169.748-.37 1.08-.702.337-.337.538-.65.704-1.08.19-.493.296-1.02.332-1.8.052-1.104.058-1.49.058-4.029 0-2.474-.007-2.878-.058-4.029-.037-.782-.142-1.31-.332-1.798a2.911 2.911 0 0 0-.703-1.08 2.884 2.884 0 0 0-1.08-.704c-.49-.19-1.016-.295-1.798-.331C14.925 4.006 14.539 4 12 4zm0-2c2.717 0 3.056.01 4.122.06 1.065.05 1.79.217 2.428.465.66.254 1.216.598 1.772 1.153a4.908 4.908 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428.047 1.066.06 1.405.06 4.122 0 2.717-.01 3.056-.06 4.122-.05 1.065-.218 1.79-.465 2.428a4.883 4.883 0 0 1-1.153 1.772 4.915 4.915 0 0 1-1.772 1.153c-.637.247-1.363.415-2.428.465-1.066.047-1.405.06-4.122.06-2.717 0-3.056-.01-4.122-.06-1.065-.05-1.79-.218-2.428-.465a4.89 4.89 0 0 1-1.772-1.153 4.904 4.904 0 0 1-1.153-1.772c-.248-.637-.415-1.363-.465-2.428C2.013 15.056 2 14.717 2 12c0-2.717.01-3.056.06-4.122.05-1.066.217-1.79.465-2.428a4.88 4.88 0 0 1 1.153-1.772A4.897 4.897 0 0 1 5.45 2.525c.638-.248 1.362-.415 2.428-.465C8.944 2.013 9.283 2 12 2z" />
|
||||
</svg>
|
||||
|
||||
@@ -27,8 +27,7 @@ export const IconNavArrow = React.memo<
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
className={classes}
|
||||
style={{minWidth: 20, minHeight: 20}}
|
||||
>
|
||||
style={{minWidth: 20, minHeight: 20}}>
|
||||
<g fill="none" fillRule="evenodd" transform="translate(-446 -398)">
|
||||
<path
|
||||
fill="currentColor"
|
||||
|
||||
@@ -12,8 +12,7 @@ export const IconNewPage = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
width="0.72em"
|
||||
height="0.72em"
|
||||
viewBox="0 0 13 13"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M4.72038 2.94824V4.28158H1.38704V11.6149H8.72038V8.28158H10.0537V12.2816C10.0537 12.4584 9.98347 12.628 9.85845 12.753C9.73343 12.878 9.56386 12.9482 9.38704 12.9482H0.720378C0.543567 12.9482 0.373997 12.878 0.248973 12.753C0.123949 12.628 0.0537109 12.4584 0.0537109 12.2816V3.61491C0.0537109 3.4381 0.123949 3.26853 0.248973 3.1435C0.373997 3.01848 0.543567 2.94824 0.720378 2.94824H4.72038ZM12.0537 0.948242V6.28158H10.7204V3.22358L5.52504 8.41958L4.58238 7.47691L9.77704 2.28158H6.72038V0.948242H12.0537Z"
|
||||
fill="currentColor"
|
||||
|
||||
@@ -13,8 +13,7 @@ export const IconNote = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
height="1.05em"
|
||||
viewBox="0 0 18 19"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M18 12.2632L12 18.2592L1.002 18.2632C0.737486 18.2642 0.483369 18.1603 0.295486 17.9741C0.107603 17.7879 0.00132309 17.5347 0 17.2702V1.25618C0 0.708184 0.445 0.263184 0.993 0.263184H17.007C17.555 0.263184 18 0.719183 18 1.26518V12.2632ZM16 2.26318H2V16.2632H10V11.2632C10 11.0183 10.09 10.7818 10.2527 10.5988C10.4155 10.4158 10.6397 10.2988 10.883 10.2702L11 10.2632L16 10.2622V2.26318ZM15.171 12.2622L12 12.2632V15.4322L15.171 12.2622Z"
|
||||
fill="currentColor"
|
||||
|
||||
@@ -12,8 +12,7 @@ export const IconRestart = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
width="0.78em"
|
||||
height="0.78em"
|
||||
viewBox="0 0 14 14"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M11.3567 11.9929C10.147 13.0412 8.59937 13.6172 6.9987 13.615C3.3167 13.615 0.332031 10.6303 0.332031 6.94828C0.332031 3.26628 3.3167 0.281616 6.9987 0.281616C10.6807 0.281616 13.6654 3.26628 13.6654 6.94828C13.6654 8.37228 13.2187 9.69228 12.4587 10.775L10.332 6.94828H12.332C12.3319 5.71909 11.9072 4.52766 11.1298 3.57554C10.3524 2.62343 9.26994 1.96908 8.06559 1.72319C6.86124 1.4773 5.60892 1.65496 4.52048 2.22613C3.43205 2.79729 2.57431 3.72689 2.09238 4.85767C1.61045 5.98845 1.5339 7.25099 1.87569 8.43171C2.21748 9.61243 2.95663 10.6388 3.96809 11.3373C4.97955 12.0358 6.20123 12.3635 7.42646 12.2649C8.6517 12.1663 9.80527 11.6475 10.692 10.7963L11.3567 11.9929Z"
|
||||
fill="currentColor"
|
||||
|
||||
@@ -17,8 +17,7 @@ export const IconRss = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
strokeWidth={2}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
{...props}
|
||||
>
|
||||
{...props}>
|
||||
<path d="M4 11a9 9 0 0 1 9 9" />
|
||||
<path d="M4 4a16 16 0 0 1 16 16" />
|
||||
<circle cx={5} cy={19} r={1} />
|
||||
|
||||
@@ -15,8 +15,7 @@ export const IconSearch = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
strokeWidth="2"
|
||||
fillRule="evenodd"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
></path>
|
||||
strokeLinejoin="round"></path>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13,8 +13,7 @@ export const IconSolution = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
width="0.75em"
|
||||
height="0.75em"
|
||||
viewBox="0 0 13 13"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M2.21908 8.74479V12.7448H0.885742V0.078125H7.14041C7.26418 0.0781911 7.3855 0.112714 7.49076 0.177827C7.59602 0.242939 7.68108 0.336071 7.73641 0.446792L8.21908 1.41146H12.2191C12.3959 1.41146 12.5655 1.4817 12.6905 1.60672C12.8155 1.73174 12.8857 1.90131 12.8857 2.07812V9.41146C12.8857 9.58827 12.8155 9.75784 12.6905 9.88286C12.5655 10.0079 12.3959 10.0781 12.2191 10.0781H7.96441C7.84063 10.0781 7.71932 10.0435 7.61406 9.97842C7.50879 9.91331 7.42374 9.82018 7.36841 9.70946L6.88574 8.74479H2.21908ZM2.21908 1.41146V7.41146H7.70974L8.37641 8.74479H11.5524V2.74479H7.39508L6.72841 1.41146H2.21908Z"
|
||||
fill="currentColor"
|
||||
|
||||
@@ -13,8 +13,7 @@ export const IconTerminal = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
height="1em"
|
||||
viewBox="0 0 18 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M2.40299 2.61279H14.403C14.5798 2.61279 14.7494 2.68303 14.8744 2.80806C14.9994 2.93308 15.0697 3.10265 15.0697 3.27946V13.9461C15.0697 14.1229 14.9994 14.2925 14.8744 14.4175C14.7494 14.5426 14.5798 14.6128 14.403 14.6128H2.40299C2.22618 14.6128 2.05661 14.5426 1.93159 14.4175C1.80657 14.2925 1.73633 14.1229 1.73633 13.9461V3.27946C1.73633 3.10265 1.80657 2.93308 1.93159 2.80806C2.05661 2.68303 2.22618 2.61279 2.40299 2.61279ZM8.403 10.6128V11.9461H12.403V10.6128H8.403ZM6.01233 8.61279L4.12699 10.4981L5.06966 11.4415L7.89833 8.61279L5.06966 5.78413L4.12699 6.72746L6.01233 8.61279Z"
|
||||
fill="currentColor"
|
||||
|
||||
@@ -13,8 +13,7 @@ export const IconTwitter = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
width="1.33em"
|
||||
height="1.33em"
|
||||
fill="currentColor"
|
||||
{...props}
|
||||
>
|
||||
{...props}>
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z" />
|
||||
</svg>
|
||||
|
||||
@@ -12,8 +12,7 @@ export const IconWarning = React.memo<JSX.IntrinsicElements['svg']>(
|
||||
width="1.33em"
|
||||
height="1.33em"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<g>
|
||||
<path fill="none" d="M0 0h24v24H0z" />
|
||||
<path
|
||||
|
||||
@@ -21,8 +21,7 @@ export function Footer() {
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-5 gap-x-12 gap-y-8 max-w-7xl mx-auto ">
|
||||
<ExternalLink
|
||||
href="https://opensource.fb.com/"
|
||||
className="col-span-2 sm:col-span-1 justify-items-start w-44 text-left"
|
||||
>
|
||||
className="col-span-2 sm:col-span-1 justify-items-start w-44 text-left">
|
||||
<div>
|
||||
<svg
|
||||
className="mt-4 mb-4"
|
||||
@@ -30,8 +29,7 @@ export function Footer() {
|
||||
height="13"
|
||||
viewBox="0 0 115 13"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M9.12655 0.414727V2.061C9.1323 2.15436 9.06215 2.23355 8.97245 2.23945C8.96555 2.23945 8.95865 2.23945 8.95175 2.23945H2.07259V5.60409H7.75002C7.84087 5.59818 7.91792 5.67027 7.92367 5.76364C7.92367 5.76955 7.92367 5.77664 7.92367 5.78255V7.43C7.92942 7.52336 7.85927 7.60254 7.76842 7.60845C7.76267 7.60845 7.75577 7.60845 7.75002 7.60845H2.07259V12.5827C2.07949 12.6761 2.01049 12.7565 1.92079 12.7635C1.91389 12.7635 1.90699 12.7635 1.90009 12.7635H0.175126C0.084278 12.7695 0.00607958 12.6974 0.000329697 12.6028C0.000329697 12.5969 0.000329697 12.5898 0.000329697 12.5839V0.411182C-0.00542019 0.317818 0.0647284 0.237454 0.156727 0.231545C0.162476 0.231545 0.169376 0.231545 0.175126 0.231545H8.9506C9.04145 0.225636 9.1208 0.296545 9.12655 0.389909C9.1277 0.398182 9.1277 0.406454 9.12655 0.414727Z"
|
||||
fill="currentColor"
|
||||
@@ -129,14 +127,12 @@ export function Footer() {
|
||||
<div className="flex flex-row mt-8 gap-x-2">
|
||||
<ExternalLink
|
||||
href="https://www.facebook.com/react"
|
||||
className={socialLinkClasses}
|
||||
>
|
||||
className={socialLinkClasses}>
|
||||
<IconFacebookCircle />
|
||||
</ExternalLink>
|
||||
<ExternalLink
|
||||
href="https://twitter.com/reactjs"
|
||||
className={socialLinkClasses}
|
||||
>
|
||||
className={socialLinkClasses}>
|
||||
<IconTwitter />
|
||||
</ExternalLink>
|
||||
</div>
|
||||
|
||||
@@ -77,8 +77,7 @@ function LayoutPost({meta, children}: LayoutPostProps) {
|
||||
{toCommaSeparatedList(meta.author, (author) => (
|
||||
<ExternalLink
|
||||
href={getAuthor(author).url}
|
||||
className="text-link dark:text-link-dark underline font-bold"
|
||||
>
|
||||
className="text-link dark:text-link-dark underline font-bold">
|
||||
{getAuthor(author).name}
|
||||
</ExternalLink>
|
||||
))}
|
||||
|
||||
@@ -43,20 +43,17 @@ export function MobileNav() {
|
||||
<div className="sticky top-0 px-5 mb-2 bg-wash dark:bg-wash-dark flex justify-end border-b border-border dark:border-border-dark items-center self-center w-full z-10">
|
||||
<TabButton
|
||||
isActive={section === 'home'}
|
||||
onClick={() => setSection('home')}
|
||||
>
|
||||
onClick={() => setSection('home')}>
|
||||
Home
|
||||
</TabButton>
|
||||
<TabButton
|
||||
isActive={section === 'learn'}
|
||||
onClick={() => setSection('learn')}
|
||||
>
|
||||
onClick={() => setSection('learn')}>
|
||||
Learn
|
||||
</TabButton>
|
||||
<TabButton
|
||||
isActive={section === 'reference'}
|
||||
onClick={() => setSection('reference')}
|
||||
>
|
||||
onClick={() => setSection('reference')}>
|
||||
API
|
||||
</TabButton>
|
||||
</div>
|
||||
|
||||
@@ -27,8 +27,7 @@ const feedbackIcon = (
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none" fillRule="evenodd" transform="translate(-444 -204)">
|
||||
<g fill="currentColor" transform="translate(354.5 205)">
|
||||
<path d="M102.75 14C102.75 14.6905 102.1905 15.25 101.5 15.25 100.8095 15.25 100.25 14.6905 100.25 14 100.25 13.3095 100.8095 12.75 101.5 12.75 102.1905 12.75 102.75 13.3095 102.75 14M101 5.25L101.5 11 102 5.25C102 5.25 102 4.75 101.5 4.75 101 4.75 101 5.25 101 5.25" />
|
||||
@@ -51,8 +50,7 @@ const darkIcon = (
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none" fillRule="evenodd" transform="translate(-444 -204)">
|
||||
<path
|
||||
fill="currentColor"
|
||||
@@ -70,8 +68,7 @@ const lightIcon = (
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none" fillRule="evenodd" transform="translate(-444 -204)">
|
||||
<g fill="currentColor" transform="translate(354 144)">
|
||||
<path
|
||||
@@ -125,8 +122,7 @@ export default function Nav() {
|
||||
onClick={toggleOpen}
|
||||
className={cn('flex lg:hidden items-center h-full px-4', {
|
||||
'text-link dark:text-link-dark mr-0': isOpen,
|
||||
})}
|
||||
>
|
||||
})}>
|
||||
{!isOpen ? <IconHamburger /> : <IconClose />}
|
||||
</button>
|
||||
<NextLink href="/">
|
||||
@@ -147,8 +143,7 @@ export default function Nav() {
|
||||
onClick={() => {
|
||||
window.__setPreferredTheme('dark');
|
||||
}}
|
||||
className="hidden lg:flex items-center h-full pr-2"
|
||||
>
|
||||
className="hidden lg:flex items-center h-full pr-2">
|
||||
{darkIcon}
|
||||
</button>
|
||||
</div>
|
||||
@@ -159,8 +154,7 @@ export default function Nav() {
|
||||
onClick={() => {
|
||||
window.__setPreferredTheme('light');
|
||||
}}
|
||||
className="hidden lg:flex items-center h-full pr-2"
|
||||
>
|
||||
className="hidden lg:flex items-center h-full pr-2">
|
||||
{lightIcon}
|
||||
</button>
|
||||
</div>
|
||||
@@ -181,8 +175,7 @@ export default function Nav() {
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex lg:hidden items-center p-1 ml-4 lg:ml-6 relative top-px"
|
||||
onClick={handleFeedback}
|
||||
>
|
||||
onClick={handleFeedback}>
|
||||
{feedbackIcon}
|
||||
</button>
|
||||
<div className="block dark:hidden">
|
||||
@@ -192,8 +185,7 @@ export default function Nav() {
|
||||
onClick={() => {
|
||||
window.__setPreferredTheme('dark');
|
||||
}}
|
||||
className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6"
|
||||
>
|
||||
className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6">
|
||||
{darkIcon}
|
||||
</button>
|
||||
</div>
|
||||
@@ -204,8 +196,7 @@ export default function Nav() {
|
||||
onClick={() => {
|
||||
window.__setPreferredTheme('light');
|
||||
}}
|
||||
className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6"
|
||||
>
|
||||
className="flex lg:hidden items-center p-1 h-full ml-4 lg:ml-6">
|
||||
{lightIcon}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -27,8 +27,7 @@ export function Page({routeTree, children}: PageProps) {
|
||||
<div className="w-full min-w-0">
|
||||
<main
|
||||
className="flex flex-1 self-stretch flex-col items-end"
|
||||
style={{justifyContent: 'space-around'}}
|
||||
>
|
||||
style={{justifyContent: 'space-around'}}>
|
||||
{children}
|
||||
<Footer />
|
||||
</main>
|
||||
|
||||
@@ -42,8 +42,7 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
|
||||
width="18"
|
||||
height="18"
|
||||
className="mr-2"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
viewBox="0 0 24 24">
|
||||
<g fill="none" fillRule="evenodd" transform="translate(-444 -204)">
|
||||
<g fill="currentColor" transform="translate(354.5 205)">
|
||||
<path d="M102.75 14C102.75 14.6905 102.1905 15.25 101.5 15.25 100.8095 15.25 100.25 14.6905 100.25 14 100.25 13.3095 100.8095 12.75 101.5 12.75 102.1905 12.75 102.75 13.3095 102.75 14M101 5.25L101.5 11 102 5.25C102 5.25 102 4.75 101.5 4.75 101 4.75 101 5.25 101 5.25" />
|
||||
@@ -70,8 +69,7 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
|
||||
style={{
|
||||
top: 0,
|
||||
visibility: isHidden ? 'hidden' : undefined,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<div className="px-5">
|
||||
<Search />
|
||||
</div>
|
||||
@@ -79,8 +77,7 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
|
||||
role="navigation"
|
||||
ref={menuRef}
|
||||
style={{'--bg-opacity': '.2'} as React.CSSProperties} // Need to cast here because CSS vars aren't considered valid in TS types (cuz they could be anything)
|
||||
className="w-full h-screen lg:h-auto flex-grow pr-0 lg:pr-5 pt-6 pb-44 lg:pb-0 lg:py-6 md:pt-4 lg:pt-4 overflow-y-scroll lg:overflow-y-auto scrolling-touch scrolling-gpu"
|
||||
>
|
||||
className="w-full h-screen lg:h-auto flex-grow pr-0 lg:pr-5 pt-6 pb-44 lg:pb-0 lg:py-6 md:pt-4 lg:pt-4 overflow-y-scroll lg:overflow-y-auto scrolling-touch scrolling-gpu">
|
||||
{isMobileSidebar ? (
|
||||
<MobileNav />
|
||||
) : (
|
||||
@@ -90,8 +87,7 @@ export function Sidebar({isMobileOnly}: {isMobileOnly?: boolean}) {
|
||||
<div className="px-5 py-3 sticky bottom-0 lg:px-5 w-full hidden lg:flex items-center bg-gradient-to-t from-wash dark:from-wash-dark">
|
||||
<Button
|
||||
className="w-full text-center justify-center"
|
||||
onClick={handleFeedback}
|
||||
>
|
||||
onClick={handleFeedback}>
|
||||
{feedbackIcon} Feedback
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -28,8 +28,7 @@ export function SidebarButton({
|
||||
className={cn({
|
||||
'my-1': heading || level === 1,
|
||||
'my-3': level > 1,
|
||||
})}
|
||||
>
|
||||
})}>
|
||||
<button
|
||||
className={cn(
|
||||
'p-2 pr-2 pl-5 w-full rounded-r-lg text-left hover:bg-gray-5 dark:hover:bg-gray-80 relative flex items-center justify-between',
|
||||
@@ -45,8 +44,7 @@ export function SidebarButton({
|
||||
!heading && isExpanded,
|
||||
}
|
||||
)}
|
||||
onClick={onClick}
|
||||
>
|
||||
onClick={onClick}>
|
||||
{title}
|
||||
{typeof isExpanded && !heading && (
|
||||
<span className="pr-2 text-gray-30">
|
||||
|
||||
@@ -68,16 +68,14 @@ export function SidebarLink({
|
||||
'text-base text-link dark:text-link-dark bg-highlight dark:bg-highlight-dark border-blue-40 hover:bg-highlight hover:text-link dark:hover:bg-highlight-dark dark:hover:text-link-dark':
|
||||
selected,
|
||||
}
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
{title}
|
||||
{isExpanded != null && !heading && !hideArrow && (
|
||||
<span
|
||||
className={cn('pr-1', {
|
||||
'text-link': isExpanded,
|
||||
'text-gray-30': !isExpanded,
|
||||
})}
|
||||
>
|
||||
})}>
|
||||
<IconNavArrow displayDirection={isExpanded ? 'down' : 'right'} />
|
||||
</span>
|
||||
)}
|
||||
|
||||
@@ -63,8 +63,7 @@ function CollapseWrapper({
|
||||
opacity: isExpanded ? 1 : 0.5,
|
||||
transition: `opacity ${duration}ms ease-in-out`,
|
||||
animation: `nav-fadein ${duration}ms ease-in-out`,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<div {...getCollapseProps()}>{children}</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -24,8 +24,7 @@ export function Toc({
|
||||
// This keeps the layout fixed width instead of adjusting for content.
|
||||
width: 'inherit',
|
||||
maxWidth: 'inherit',
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<h2 className="mb-3 lg:mb-3 uppercase tracking-wide font-bold text-sm text-secondary dark:text-secondary-dark px-4 w-full">
|
||||
On this page
|
||||
</h2>
|
||||
@@ -50,8 +49,7 @@ export function Toc({
|
||||
'pl-4': h?.depth === 3,
|
||||
hidden: h.depth && h.depth > 3,
|
||||
}
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
<a
|
||||
className={cx(
|
||||
selectedIndex === i
|
||||
@@ -59,8 +57,7 @@ export function Toc({
|
||||
: 'text-secondary dark:text-secondary-dark',
|
||||
'block hover:text-link dark:hover:text-link-dark'
|
||||
)}
|
||||
href={h.url}
|
||||
>
|
||||
href={h.url}>
|
||||
{h.text}
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -12,8 +12,7 @@ export function Logo(props: JSX.IntrinsicElements['svg']) {
|
||||
viewBox="0 0 410 369"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
{...props}
|
||||
>
|
||||
{...props}>
|
||||
<path
|
||||
d="M204.995 224.552C226.56 224.552 244.042 207.07 244.042 185.506C244.042 163.941 226.56 146.459 204.995 146.459C183.43 146.459 165.948 163.941 165.948 185.506C165.948 207.07 183.43 224.552 204.995 224.552Z"
|
||||
fill="currentColor"
|
||||
|
||||
@@ -108,15 +108,13 @@ export function AnatomyStep({
|
||||
'border-l-4 rounded-lg px-5 pt-8 pb-2 bg-opacity-5 shadow-inner',
|
||||
color.border,
|
||||
color.background
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
<div className="relative flex items-center justify-between">
|
||||
<div
|
||||
className={cn(
|
||||
'inline align-middle text-center rounded-full w-5 h-5 absolute font-bold text-white text-code font-mono leading-tight -left-8',
|
||||
color.background
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
{stepNumber}
|
||||
</div>
|
||||
<div className="text-primary dark:text-primary-dark leading-3 font-bold">
|
||||
|
||||
@@ -109,16 +109,14 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
|
||||
<div
|
||||
className={cn(
|
||||
'border-gray-10 bg-card dark:bg-card-dark shadow-inner rounded-none -mx-5 sm:mx-auto sm:rounded-lg'
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
<div ref={scrollAnchorRef} className="py-2 px-5 sm:px-8 pb-0 md:pb-0">
|
||||
<H2
|
||||
id={isRecipes ? 'recipes' : 'challenges'}
|
||||
className={cn(
|
||||
'text-3xl mb-2 leading-10 relative',
|
||||
isRecipes ? 'text-purple-50 dark:text-purple-30' : 'text-link'
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
{isRecipes ? 'Try out some recipes' : 'Try out some challenges'}
|
||||
</H2>
|
||||
{challenges.length > 1 && (
|
||||
@@ -152,8 +150,7 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
|
||||
<Button
|
||||
className="mr-2"
|
||||
onClick={toggleSolution}
|
||||
active={showSolution}
|
||||
>
|
||||
active={showSolution}>
|
||||
<IconSolution className="mr-1.5" />{' '}
|
||||
{showSolution ? 'Hide solution' : 'Show solution'}
|
||||
</Button>
|
||||
@@ -163,8 +160,7 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
|
||||
<Button
|
||||
className="mr-2"
|
||||
onClick={toggleSolution}
|
||||
active={showSolution}
|
||||
>
|
||||
active={showSolution}>
|
||||
<IconSolution className="mr-1.5" />{' '}
|
||||
{showSolution ? 'Hide solution' : 'Show solution'}
|
||||
</Button>
|
||||
@@ -182,8 +178,7 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
|
||||
setActiveChallenge(nextChallenge.id);
|
||||
setShowSolution(false);
|
||||
}}
|
||||
active
|
||||
>
|
||||
active>
|
||||
Next {isRecipes ? 'Recipe' : 'Challenge'}
|
||||
<IconArrowSmall
|
||||
displayDirection="right"
|
||||
@@ -219,8 +214,7 @@ export function Challenges({children, isRecipes}: ChallengesProps) {
|
||||
});
|
||||
}
|
||||
}}
|
||||
active
|
||||
>
|
||||
active>
|
||||
Next Challenge
|
||||
<IconArrowSmall
|
||||
displayDirection="right"
|
||||
|
||||
@@ -88,8 +88,7 @@ export function Navigation({
|
||||
<div className="overflow-hidden">
|
||||
<div
|
||||
ref={containerRef}
|
||||
className="flex relative transition-transform content-box overflow-x-auto"
|
||||
>
|
||||
className="flex relative transition-transform content-box overflow-x-auto">
|
||||
{challenges.map(({name, id, order}, index) => (
|
||||
<button
|
||||
className={cn(
|
||||
@@ -103,8 +102,7 @@ export function Navigation({
|
||||
)}
|
||||
onClick={() => handleSelectNav(id)}
|
||||
key={`button-${id}`}
|
||||
ref={challengesNavRef.current[index]}
|
||||
>
|
||||
ref={challengesNavRef.current[index]}>
|
||||
{order}. {name}
|
||||
</button>
|
||||
))}
|
||||
@@ -119,8 +117,7 @@ export function Navigation({
|
||||
'text-primary dark:text-primary-dark': canScrollLeft,
|
||||
'text-gray-30': !canScrollLeft,
|
||||
}
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
<IconChevron displayDirection="left" />
|
||||
</button>
|
||||
<button
|
||||
@@ -131,8 +128,7 @@ export function Navigation({
|
||||
'text-primary dark:text-primary-dark': canScrollRight,
|
||||
'text-gray-30': !canScrollRight,
|
||||
}
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
<IconChevron displayDirection="right" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -79,8 +79,7 @@ const CodeBlock = React.forwardRef(function CodeBlock(
|
||||
className={cn(
|
||||
'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
|
||||
!noMargin && 'my-8'
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
<SandpackProvider
|
||||
customSetup={{
|
||||
entry: filename,
|
||||
@@ -89,14 +88,12 @@ const CodeBlock = React.forwardRef(function CodeBlock(
|
||||
code: children.trimEnd(),
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<SandpackThemeProvider theme={CustomTheme}>
|
||||
<ClasserProvider
|
||||
classes={{
|
||||
'sp-cm': styles.codeViewer,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<SandpackCodeViewer
|
||||
ref={ref}
|
||||
showLineNumbers={false}
|
||||
|
||||
@@ -66,8 +66,7 @@ function ConsoleBlock({level = 'info', children}: ConsoleBlockProps) {
|
||||
'bg-gray-5 text-secondary dark:text-secondary-dark':
|
||||
level === 'info',
|
||||
}
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
{level === 'error' && <IconError className="self-start mt-1.5" />}
|
||||
{level === 'warning' && <IconWarning className="self-start mt-1" />}
|
||||
<div className="px-3">{message}</div>
|
||||
|
||||
@@ -43,8 +43,7 @@ function ExpandableCallout({children, type}: ExpandableCalloutProps) {
|
||||
className={cn(
|
||||
'pt-8 pb-4 px-5 sm:px-8 my-8 relative rounded-none shadow-inner -mx-5 sm:mx-auto sm:rounded-lg',
|
||||
variant.containerClasses
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
<h3 className={cn('mb-2 text-2xl font-bold', variant.textColor)}>
|
||||
<variant.Icon
|
||||
className={cn('inline mr-3 mb-1 text-lg', variant.textColor)}
|
||||
|
||||
@@ -31,15 +31,13 @@ function ExpandableExample({
|
||||
className={cn('my-12 rounded-lg shadow-inner relative', {
|
||||
'dark:bg-opacity-20 dark:bg-purple-60 bg-purple-5': isDeepDive,
|
||||
'dark:bg-opacity-20 dark:bg-yellow-60 bg-yellow-5': isExample,
|
||||
})}
|
||||
>
|
||||
})}>
|
||||
<div className="p-8">
|
||||
<h5
|
||||
className={cn('mb-4 uppercase font-bold flex items-center text-sm', {
|
||||
'dark:text-purple-30 text-purple-50': isDeepDive,
|
||||
'dark:text-yellow-30 text-yellow-60': isExample,
|
||||
})}
|
||||
>
|
||||
})}>
|
||||
{isDeepDive && (
|
||||
<>
|
||||
<IconDeepDive className="inline mr-2 dark:text-purple-30 text-purple-40" />
|
||||
@@ -67,8 +65,7 @@ function ExpandableExample({
|
||||
'bg-yellow-50 border-yellow-50 hover:bg-yellow-40 focus:bg-yellow-50 active:bg-yellow-50':
|
||||
isExample,
|
||||
})}
|
||||
onClick={() => setIsExpanded((current) => !current)}
|
||||
>
|
||||
onClick={() => setIsExpanded((current) => !current)}>
|
||||
<span className="mr-1">
|
||||
<IconChevron displayDirection={isExpanded ? 'up' : 'down'} />
|
||||
</span>
|
||||
@@ -80,8 +77,7 @@ function ExpandableExample({
|
||||
'dark:border-purple-60 border-purple-10 ': isDeepDive,
|
||||
'dark:border-yellow-60 border-yellow-50': isExample,
|
||||
hidden: !isExpanded,
|
||||
})}
|
||||
>
|
||||
})}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -31,15 +31,13 @@ const Heading = forwardRefWithAs<HeadingProps, 'div'>(function Heading(
|
||||
aria-hidden={true}
|
||||
style={{
|
||||
display: Comp === 'h1' ? 'none' : 'inline-block',
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<svg
|
||||
width="1em"
|
||||
height="1em"
|
||||
viewBox="0 0 13 13"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="text-gray-70 ml-2 h-5 w-5"
|
||||
>
|
||||
className="text-gray-70 ml-2 h-5 w-5">
|
||||
<g fill="currentColor" fillRule="evenodd">
|
||||
<path d="M7.778 7.975a2.5 2.5 0 0 0 .347-3.837L6.017 2.03a2.498 2.498 0 0 0-3.542-.007 2.5 2.5 0 0 0 .006 3.543l1.153 1.15c.07-.29.154-.563.25-.773.036-.077.084-.16.14-.25L3.18 4.85a1.496 1.496 0 0 1 .002-2.12 1.496 1.496 0 0 1 2.12 0l2.124 2.123a1.496 1.496 0 0 1-.333 2.37c.16.246.42.504.685.752z" />
|
||||
<path d="M5.657 4.557a2.5 2.5 0 0 0-.347 3.837l2.108 2.108a2.498 2.498 0 0 0 3.542.007 2.5 2.5 0 0 0-.006-3.543L9.802 5.815c-.07.29-.154.565-.25.774-.036.076-.084.16-.14.25l.842.84c.585.587.59 1.532 0 2.122-.587.585-1.532.59-2.12 0L6.008 7.68a1.496 1.496 0 0 1 .332-2.372c-.16-.245-.42-.503-.685-.75z" />
|
||||
|
||||
@@ -63,8 +63,7 @@ const Blockquote = ({
|
||||
<>
|
||||
<blockquote
|
||||
className="mdx-blockquote py-4 px-8 my-8 shadow-inner bg-highlight dark:bg-highlight-dark bg-opacity-50 rounded-lg leading-6 flex relative"
|
||||
{...props}
|
||||
>
|
||||
{...props}>
|
||||
<span className="block relative">{children}</span>
|
||||
</blockquote>
|
||||
<style jsx global>{`
|
||||
@@ -100,8 +99,7 @@ function LearnMore({
|
||||
className="mt-1"
|
||||
label="Read More"
|
||||
href={path}
|
||||
type="primary"
|
||||
>
|
||||
type="primary">
|
||||
Read More
|
||||
<IconNavArrow displayDirection="right" className="inline ml-1" />
|
||||
</ButtonLink>
|
||||
@@ -119,8 +117,7 @@ function Math({children}: {children: any}) {
|
||||
style={{
|
||||
fontFamily: 'STIXGeneral-Regular, Georgia, serif',
|
||||
fontSize: '1.2rem',
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
@@ -132,8 +129,7 @@ function MathI({children}: {children: any}) {
|
||||
style={{
|
||||
fontFamily: 'STIXGeneral-Italic, Georgia, serif',
|
||||
fontSize: '1.2rem',
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
|
||||
@@ -49,8 +49,7 @@ export function CustomPreset({
|
||||
<>
|
||||
<div
|
||||
className="shadow-lg dark:shadow-lg-dark rounded-lg"
|
||||
ref={containerRef}
|
||||
>
|
||||
ref={containerRef}>
|
||||
<NavigationBar showDownload={isSingleFile} onReset={onReset} />
|
||||
<SandpackThemeProvider theme={CustomTheme}>
|
||||
<div
|
||||
@@ -60,8 +59,7 @@ export function CustomPreset({
|
||||
// Prevent it from collapsing below the initial (non-loaded) height.
|
||||
// There has to be some better way to do this...
|
||||
minHeight: 216,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<SandpackCodeEditor
|
||||
customStyle={{
|
||||
height: getHeight(),
|
||||
@@ -95,8 +93,7 @@ export function CustomPreset({
|
||||
inline: 'nearest',
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
|
||||
<IconChevron
|
||||
className="inline mr-1.5 text-xl"
|
||||
|
||||
@@ -75,8 +75,7 @@ ${css}
|
||||
className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
|
||||
onClick={downloadHTML}
|
||||
title="Refresh Sandpack"
|
||||
type="button"
|
||||
>
|
||||
type="button">
|
||||
<IconArrowSmall
|
||||
displayDirection="down"
|
||||
className="inline mb-0.5 mr-1 mt-1"
|
||||
|
||||
@@ -24,8 +24,7 @@ export function FilesDropdown() {
|
||||
className={cn(
|
||||
'h-full py-2 px-1 mt-px -mb-px flex border-b-2 text-link dark:text-link-dark border-link dark:border-link-dark items-center text-md leading-tight truncate'
|
||||
)}
|
||||
style={{maxWidth: '160px'}}
|
||||
>
|
||||
style={{maxWidth: '160px'}}>
|
||||
{getFileName(activePath)}
|
||||
<span className="ml-2">
|
||||
<IconChevron displayDirection={open ? 'up' : 'down'} />
|
||||
@@ -41,8 +40,7 @@ export function FilesDropdown() {
|
||||
className={cn(
|
||||
'text-md mx-2 my-4 cursor-pointer',
|
||||
filePath === activePath && 'text-link dark:text-link-dark'
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
{getFileName(filePath)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
|
||||
@@ -48,8 +48,7 @@ export function NavigationBar({
|
||||
</div>
|
||||
<div
|
||||
className="px-3 flex items-center justify-end flex-grow text-right"
|
||||
translate="yes"
|
||||
>
|
||||
translate="yes">
|
||||
{showDownload && <DownloadButton />}
|
||||
<ResetButton onReset={onReset} />
|
||||
<OpenInCodeSandboxButton className="ml-2 md:ml-4" />
|
||||
|
||||
@@ -19,8 +19,7 @@ export const OpenInCodeSandboxButton = ({className}: {className?: string}) => {
|
||||
href={url}
|
||||
rel="noreferrer noopener"
|
||||
target="_blank"
|
||||
title="Open in CodeSandbox"
|
||||
>
|
||||
title="Open in CodeSandbox">
|
||||
<span className="hidden md:inline">
|
||||
<IconNewPage className="inline mb-0.5 text-base" /> Fork
|
||||
</span>
|
||||
|
||||
@@ -133,14 +133,12 @@ export function Preview({
|
||||
...customStyle,
|
||||
...viewportStyle,
|
||||
...overrideStyle,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<div
|
||||
className={cn(
|
||||
'p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative rounded-b-lg lg:rounded-b-none'
|
||||
)}
|
||||
style={{overflow}}
|
||||
>
|
||||
style={{overflow}}>
|
||||
<div
|
||||
style={{
|
||||
padding: 'initial',
|
||||
@@ -150,8 +148,7 @@ export function Preview({
|
||||
? 'sticky'
|
||||
: undefined,
|
||||
top: isExpanded ? '2rem' : undefined,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
className="rounded-t-none bg-white shadow-md sm:rounded-lg w-full max-w-full"
|
||||
@@ -178,8 +175,7 @@ export function Preview({
|
||||
// the errors can also expand the parent height.
|
||||
position: isExpanded ? 'sticky' : undefined,
|
||||
top: isExpanded ? '2rem' : '',
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<Error error={error} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -18,8 +18,7 @@ export const ResetButton: React.FC<ResetButtonProps> = ({
|
||||
className="text-sm text-primary dark:text-primary-dark inline-flex items-center hover:text-link duration-100 ease-in transition mx-1"
|
||||
onClick={onReset}
|
||||
title="Reset Sandbox"
|
||||
type="button"
|
||||
>
|
||||
type="button">
|
||||
<IconRestart className="inline mb-0.5 ml-1 mr-1 relative top-0.5" /> Reset
|
||||
</button>
|
||||
);
|
||||
|
||||
@@ -138,8 +138,7 @@ function Sandpack(props: SandpackProps) {
|
||||
key={key}
|
||||
template="react"
|
||||
customSetup={{...setup, files: files}}
|
||||
autorun={autorun}
|
||||
>
|
||||
autorun={autorun}>
|
||||
<CustomPreset
|
||||
isSingleFile={isSingleFile}
|
||||
onReset={() => {
|
||||
|
||||
@@ -17,12 +17,10 @@ function SimpleCallout({title, children, className}: SimpleCalloutProps) {
|
||||
className={cn(
|
||||
'p-6 xl:p-8 pb-4 xl:pb-6 bg-card dark:bg-card-dark rounded-lg shadow-inner text-base text-secondary dark:text-secondary-dark my-8',
|
||||
className
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
<H3
|
||||
className="text-primary dark:text-primary-dark mt-0 mb-3 leading-tight"
|
||||
isPageAnchor={false}
|
||||
>
|
||||
isPageAnchor={false}>
|
||||
{title}
|
||||
</H3>
|
||||
{children}
|
||||
|
||||
@@ -37,8 +37,7 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
|
||||
return (
|
||||
<div
|
||||
className="rounded-lg bg-secondary dark:bg-gray-50 h-full"
|
||||
translate="no"
|
||||
>
|
||||
translate="no">
|
||||
<div className="bg-gray-90 dark:bg-gray-60 w-full rounded-t-lg">
|
||||
<div className="text-primary-dark dark:text-primary-dark flex text-sm px-4 py-0.5 relative">
|
||||
<IconTerminal className="inline-flex mr-2 self-center" /> Terminal
|
||||
|
||||
@@ -27,8 +27,7 @@ function YouWillLearnCard({title, path, children}: YouWillLearnCardProps) {
|
||||
className="mt-1"
|
||||
type="primary"
|
||||
size="md"
|
||||
label={title}
|
||||
>
|
||||
label={title}>
|
||||
Read More
|
||||
<IconNavArrow displayDirection="right" className="inline ml-1" />
|
||||
</ButtonLink>
|
||||
|
||||
@@ -98,16 +98,14 @@ export const Search: React.FC<SearchProps> = ({
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex md:hidden items-center text-lg p-1 ml-4 lg:ml-6"
|
||||
onClick={onOpen}
|
||||
>
|
||||
onClick={onOpen}>
|
||||
<IconSearch className="align-middle" />
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="hidden md:flex relative pl-4 pr-0.5 py-1 h-10 bg-secondary-button dark:bg-gray-80 outline-none focus:ring focus:outline-none betterhover:hover:bg-opacity-80 pointer items-center shadow-inner text-left w-full text-gray-30 rounded-lg align-middle text-sm"
|
||||
onClick={onOpen}
|
||||
>
|
||||
onClick={onOpen}>
|
||||
<IconSearch className="mr-3 align-middle text-gray-30 flex-shrink-0 group-betterhover:hover:text-gray-70" />
|
||||
Search
|
||||
<span className="ml-auto hidden sm:flex item-center">
|
||||
|
||||
@@ -43,8 +43,7 @@ function Tag({text, variant, className}: TagProps) {
|
||||
className={cn(
|
||||
'inline font-bold text-sm uppercase py-1 px-2 rounded',
|
||||
classes
|
||||
)}
|
||||
>
|
||||
)}>
|
||||
{text || name}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
@@ -19,8 +19,7 @@ export default function Archive() {
|
||||
<h1 className="text-5xl font-bold">Blog Archive</h1>
|
||||
<a
|
||||
href="/feed.xml"
|
||||
className="p-2 betterhover:hover:bg-gray-20 transition duration-150 ease-in-out rounded-lg inline-flex items-center"
|
||||
>
|
||||
className="p-2 betterhover:hover:bg-gray-20 transition duration-150 ease-in-out rounded-lg inline-flex items-center">
|
||||
<IconRss className="w-5 h-5 mr-2" />
|
||||
RSS
|
||||
</a>
|
||||
@@ -44,8 +43,7 @@ export default function Archive() {
|
||||
{toCommaSeparatedList(post.author, (author) => (
|
||||
<ExternalLink
|
||||
href={getAuthor(author).url}
|
||||
className="font-bold betterhover:hover:underline"
|
||||
>
|
||||
className="font-bold betterhover:hover:underline">
|
||||
<span>{getAuthor(author).name}</span>
|
||||
</ExternalLink>
|
||||
))}
|
||||
|
||||
@@ -28,8 +28,7 @@ export default function RecentPosts() {
|
||||
</h1>
|
||||
<a
|
||||
href="/feed.xml"
|
||||
className="p-2 betterhover:hover:bg-gray-20 transition duration-150 ease-in-out rounded-lg inline-flex items-center"
|
||||
>
|
||||
className="p-2 betterhover:hover:bg-gray-20 transition duration-150 ease-in-out rounded-lg inline-flex items-center">
|
||||
<IconRss className="w-5 h-5 mr-2" />
|
||||
RSS
|
||||
</a>
|
||||
@@ -57,8 +56,7 @@ export default function RecentPosts() {
|
||||
{toCommaSeparatedList(post.author, (author) => (
|
||||
<ExternalLink
|
||||
href={getAuthor(author).url}
|
||||
className="font-bold betterhover:hover:underline"
|
||||
>
|
||||
className="font-bold betterhover:hover:underline">
|
||||
<span>{getAuthor(author).name}</span>
|
||||
</ExternalLink>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user