Merge pull request #14 from planetscale/repo-sync

planetscale · Jun 30, 2021 · 7f8b0a6 · 7f8b0a6
2 parents ee532a9 + 794788c
commit 7f8b0a6
Show file tree

Hide file tree

Showing 8 changed files with 284 additions and 46 deletions.
diff --git a/components/Footer.js b/components/Footer.js
@@ -1,7 +1,8 @@
 import React, { useContext } from 'react'
 import { styled } from '../stitches.config'
 import { ThemeContext } from './themeContext'
-import Select from './Select'
+import * as RadioGroup from '@radix-ui/react-radio-group'
+import { Settings, Moon, Sun } from '@styled-icons/remix-line'
 
 const FooterWrapper = styled('div', {
   position: 'relative',
@@ -33,14 +34,17 @@ const FooterWrapper = styled('div', {
 })
 
 const FooterConstrain = styled('div', {
-  position: 'sticky',
-  top: '0',
   maxWidth: '80rem',
   width: '100%',
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
+
+  '@phone': {
+    flexDirection: 'column',
+    alignItems: 'flex-end',
+  },
 })
 
 const LeftContainer = styled('div', {
@@ -51,6 +55,10 @@ const LeftContainer = styled('div', {
   '> a': {
     marginRight: '8px',
   },
+
+  '@phone': {
+    marginBottom: '1em',
+  },
 })
 
 const LinkBlock = styled('a', {
@@ -70,9 +78,72 @@ const Copyright = styled('div', {
   color: '$textSecondary',
 })
 
+const StyledRadioGroupRoot = styled(RadioGroup.Root, {
+  border: '1px solid $borderPrimary',
+  borderRadius: '6px',
+
+  '*:first-child': {
+    borderTopLeftRadius: '6px',
+    borderBottomLeftRadius: '6px',
+  },
+
+  '*:last-child': {
+    borderTopRightRadius: '6px',
+    borderBottomRightRadius: '6px',
+  },
+})
+
+const StyledRadioItem = styled(RadioGroup.Item, {
+  appearance: 'none',
+  backgroundColor: 'unset',
+  border: 'none',
+  padding: '8px',
+  margin: '0',
+  position: 'relative',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  verticalAlign: 'middle',
+  outline: '0',
+  color: '$textPrimary',
+
+  svg: {
+    width: '1em',
+    height: '1em',
+    transition: 'transform 250ms ease',
+  },
+
+  '& ~ &': {
+    borderLeft: '1px solid $borderPrimary',
+  },
+
+  '&:hover': {
+    backgroundColor: '$bgSecondary',
+
+    svg: {
+      transform: 'translateY(-5%)',
+    },
+  },
+})
+
+const StyledIndicator = styled(RadioGroup.Indicator, {
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+
+  '& + svg': {
+    color: '$textBlue',
+  },
+})
+
 export default function Footer() {
   const themeContext = useContext(ThemeContext)
 
+  const handleRadioItem = (event) => {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
   return (
     <FooterWrapper>
       <FooterConstrain>
@@ -85,11 +156,23 @@ export default function Footer() {
           </LinkBlock>
           <Copyright>© 2021 PlanetScale Inc.</Copyright>
         </LeftContainer>
-        <Select
-          options={themeContext.availableThemes}
-          defaultSelected={themeContext.getSelectedMode().name}
-          callback={themeContext.switchTheme}
-        ></Select>
+        <StyledRadioGroupRoot
+          value={themeContext.getSelectedMode().name}
+          onValueChange={themeContext.switchTheme}
+        >
+          <StyledRadioItem value="system" onCheckedChange={handleRadioItem}>
+            <StyledIndicator />
+            <Settings />
+          </StyledRadioItem>
+          <StyledRadioItem value="light" onCheckedChange={handleRadioItem}>
+            <StyledIndicator />
+            <Sun />
+          </StyledRadioItem>
+          <StyledRadioItem value="dark" onCheckedChange={handleRadioItem}>
+            <StyledIndicator />
+            <Moon />
+          </StyledRadioItem>
+        </StyledRadioGroupRoot>
       </FooterConstrain>
     </FooterWrapper>
   )

diff --git a/components/MDX.AnchorLink.js b/components/MDX.AnchorLink.js
@@ -40,6 +40,13 @@ const AnchorHeading = styled('div', {
       visibility: 'visible',
     },
   },
+
+  '@tablet': {
+    [`& ${AnchorIcon}`]: {
+      visibility: 'unset',
+      height: '1.563em',
+    },
+  },
 })
 
 class AnchorLink extends React.Component {

diff --git a/components/MDX.CodeBlock.js b/components/MDX.CodeBlock.js
@@ -13,7 +13,7 @@ const CodeBlockContainer = styled('div', {
   border: '1px solid $borderPrimary',
   borderRadius: '6px',
   margin: '3em 0',
-  backgroundColor: '$bgPrimary',
+  backgroundColor: '$bgSecondary',
 
   '> code:not(:last-of-type)': {
     borderBottom: '1px solid $borderPrimary',
@@ -23,6 +23,11 @@ const CodeBlockContainer = styled('div', {
 const CopyButton = styled(ButtonSecondary, {
   fontSize: '12px',
   padding: '0.75em 1em',
+  backgroundColor: '$bgSecondary',
+
+  '&:hover': {
+    backgroundColor: '$bgPrimary',
+  },
 })
 
 const CopyButtonText = styled('span', {})
@@ -55,6 +60,7 @@ const CodeBlockContent = styled('code', {
   fontSize: '14px',
   borderBottomLeftRadius: '6px',
   borderBottomRightRadius: '6px',
+  backgroundColor: 'unset !important',
 
   variants: {
     command: {

diff --git a/components/MDX.InlineCodeBlock.js b/components/MDX.InlineCodeBlock.js
@@ -1,5 +1,4 @@
-import React, { useState } from 'react'
-import { Check } from '@styled-icons/remix-line'
+import React from 'react'
 import { styled } from '../stitches.config'
 
 const InlineCodeBlockContainer = styled('code', {
@@ -8,38 +7,8 @@ const InlineCodeBlockContainer = styled('code', {
   margin: '0 4px',
   borderRadius: '4px',
   lineHeight: '28px',
-
-  '&:hover': {
-    cursor: 'pointer',
-    color: '$bgPrimary',
-    background: '$textBlue',
-  },
-})
-
-const CopiedState = styled('code', {
-  '> svg': {
-    width: '12px',
-  },
 })
 
 export default function InlineCodeBlock({ children }) {
-  const [content, setContent] = useState(children)
-
-  const copyToClipboard = (e) => {
-    navigator.clipboard.writeText(children)
-    setContent(
-      <CopiedState>
-        <Check /> Copied!
-      </CopiedState>
-    )
-    setTimeout(() => {
-      setContent(children)
-    }, 1000)
-  }
-
-  return (
-    <InlineCodeBlockContainer onClick={copyToClipboard}>
-      {content}
-    </InlineCodeBlockContainer>
-  )
+  return <InlineCodeBlockContainer>{children}</InlineCodeBlockContainer>
 }
diff --git a/components/Navigation.js b/components/Navigation.js
@@ -257,7 +257,7 @@ export default function Navigation({ version }) {
                 categoryID={category.id}
                 category={category.name}
                 pages={category.pages}
-                onClick={mobileTOCState ? toggleMobileTOC : () => {}}
+                clickHandler={mobileTOCState ? toggleMobileTOC : () => {}}
               ></SidenavGroup>
             )
           })}
@@ -273,7 +273,7 @@ export default function Navigation({ version }) {
   )
 }
 
-function SidenavGroup({ version, categoryID, category, pages, onClick }) {
+function SidenavGroup({ version, categoryID, category, pages, clickHandler }) {
   return (
     <_GroupContainer defaultOpen={true}>
       <_GroupHeading>
@@ -288,13 +288,12 @@ function SidenavGroup({ version, categoryID, category, pages, onClick }) {
 
           return (
             <CustomLink
-              onClick={onClick}
               version={version}
               href={href}
               activeClassName="active"
               key={index}
             >
-              <PageLink>{page['display']}</PageLink>
+              <PageLink onClick={clickHandler}>{page['display']}</PageLink>
             </CustomLink>
           )
         })}