diff --git a/components/blocks/autofunction.js b/components/blocks/autofunction.js index 05062a554..264c95863 100644 --- a/components/blocks/autofunction.js +++ b/components/blocks/autofunction.js @@ -84,17 +84,34 @@ const Autofunction = ({ blockRef.current.getElementsByTagName("pre"), ); + // Important: keep this in sync with components/block/code.js pres.forEach((ele) => { + // Detect language based on pre element class + const isLiteralBlock = ele.classList.contains("literal-block"); + const language = isLiteralBlock ? "bash" : "python"; + const displayLanguage = isLiteralBlock ? "BASH" : "PYTHON"; + const codeText = ele.innerHTML; const preTag = ele.cloneNode(true); const codeWrap = document.createElement("div"); codeWrap.setAttribute("class", styles.CodeBlockContainer); + + // Create language header + const header = document.createElement("div"); + header.setAttribute("class", `${styles.Header} code-block-header`); + const langSpan = document.createElement("span"); + langSpan.setAttribute("class", styles.Language); + langSpan.textContent = displayLanguage; + header.appendChild(langSpan); + const codeTag = document.createElement("code"); - codeTag.setAttribute("class", "language-python"); + codeTag.setAttribute("class", `language-${language}`); preTag.classList.add("line-numbers"); codeTag.innerHTML = codeText; preTag.textContent = null; preTag.appendChild(codeTag); + + codeWrap.appendChild(header); codeWrap.appendChild(preTag); ele.replaceWith(codeWrap); }); @@ -536,7 +553,12 @@ const Autofunction = ({ ); return ( -
+
{header} {body}
diff --git a/components/blocks/autofunction.module.css b/components/blocks/autofunction.module.css index f7b407c36..c3517e741 100644 --- a/components/blocks/autofunction.module.css +++ b/components/blocks/autofunction.module.css @@ -2,6 +2,10 @@ @apply mt-6; } +.Container h4 { + @apply mb-4; +} + .HeaderContainer { @apply mb-6; } @@ -55,92 +59,99 @@ } .CodeBlockContainer { - @apply mb-7 relative; + @apply mb-7 relative bg-gray-90 rounded-xl; } -.CodeBlockContainer pre, -.CodeBlockContainer code { - @apply overflow-auto max-w-full whitespace-pre; +/* Keep in sync with components/blocks/code.module.css */ +.Header { + @apply flex items-center + min-h-10 px-3 + border-b border-gray-80 + text-gray-50 text-xs font-medium tracking-wide; } +/* Keep in sync with components/blocks/code.module.css */ +.Language { + @apply uppercase tracking-wider leading-none; +} + +/* Keep in sync with components/blocks/code.module.css */ .CodeBlockContainer pre { - @apply p-4 bg-gray-90 text-white font-medium rounded-xl relative py-6 px-8 leading-relaxed; + @apply p-6 text-white font-medium relative leading-relaxed; } +/* Keep in sync with components/blocks/code.module.css */ +.CodeBlockContainer pre, +.CodeBlockContainer code { + @apply overflow-auto max-w-full whitespace-pre; +} + +/* Keep in sync with components/blocks/autofunction.module.css */ .CodeBlockContainer pre code { @apply z-10 relative; } +/* Keep in sync with components/blocks/code.module.css */ .LineHighlight { @apply bg-gray-80 opacity-30 z-0; } -.CodeBlockContainer button { - @apply absolute top-2 right-2 cursor-pointer h-8 w-8 mb-0 flex items-center; -} - -.CodeBlockContainer button::before { - @apply absolute top-2 right-2 z-10 transition-all duration-75 hover:opacity-40; - content: url("/clipboard.svg"); +/* Keep in sync with components/blocks/code.module.css */ +.Container :global(.toolbar) { + @apply absolute top-0 right-0 + flex items-center justify-end + px-3 h-10 + text-gray-80 text-xs font-medium tracking-wide; } -.CodeBlockContainer button span { - @apply absolute right-10 text-white font-mono text-sm tracking-tight font-normal opacity-0; +/* Keep in sync with components/blocks/code.module.css */ +.Container :global(.toolbar-item) { + @apply flex items-center justify-end; } -.CodeBlockContainer button:hover span { - @apply opacity-100; -} - -/* Code block adjustments */ -.CodeBlockContainer pre code :global(.decorator.annotation.punctuation) { - @apply text-red-50; -} - -.CodeBlockContainer pre code :global(.operator) { - @apply text-yellow-50; -} - -.CodeBlockContainer pre code :global(.decorator) { - @apply text-yellow-80; -} - -.CodeBlockContainer pre code :global(.keyword) { - @apply text-darkBlue-50; -} - -.CodeBlockContainer pre code :global(.builtin) { - @apply text-lightBlue-40; -} - -.CodeBlockContainer pre code :global(.string) { - @apply text-green-80; +/* Keep in sync with components/blocks/code.module.css */ +.CodeBlockContainer button { + @apply flex flex-row gap-1 + h-full + text-xs leading-none + text-gray-50 hover:text-white; } -.CodeBlockContainer pre code :global(.number), -.CodeBlockContainer pre code :global(.boolean) { - @apply text-green-40; +/* Keep in sync with components/blocks/code.module.css */ +.CodeBlockContainer button span { + @apply flex items-center justify-start + tracking-wide font-medium; } -.CodeBlockContainer pre code :global(.function) { - @apply text-red-50; -} +/* Keep in sync with components/blocks/code.module.css */ +.CodeBlockContainer :global(.copy-to-clipboard-button) { + &::after { + @apply block text-gray-50 hover:text-white h-3 w-3 cursor-pointer; + content: ""; + background-color: currentColor; + -webkit-mask-image: url("/clipboard.svg"); + mask-image: url("/clipboard.svg"); + mask-size: contain; + -webkit-mask-size: contain; + mask-repeat: no-repeat; + } -.CodeBlockContainer pre code :global(.punctuation) { - @apply text-gray-60; -} + & span { + @apply text-white + opacity-0 translate-x-2 transition-transform + pointer-events-none; + } -.CodeBlockContainer pre code :global(.comment) { - @apply text-gray-60 italic font-normal; + &:hover span { + @apply opacity-100 translate-x-0; + } } -.CodeBlockContainer pre code :global(.string) { - @apply text-darkBlue-30; +.NoCopyButton :global(.copy-to-clipboard-button) { + @apply hidden; } -.CodeBlockContainer pre code :global(.table) { - @apply inline; -} +/* Syntax highlighting is now handled globally via styles/syntax-highlighting.scss */ /* Styles for deprecation notice in param */ .DeprecatedContent { diff --git a/components/blocks/code.js b/components/blocks/code.js index a1b2780bf..39540dd01 100644 --- a/components/blocks/code.js +++ b/components/blocks/code.js @@ -1,4 +1,4 @@ -import React, { useEffect, useRef } from "react"; +import React, { useCallback, useEffect, useRef, useState } from "react"; import classNames from "classnames"; import Prism from "prismjs"; import "prismjs/plugins/line-numbers/prism-line-numbers"; @@ -12,17 +12,126 @@ import Image from "./image"; import styles from "./code.module.css"; +// Compress code with gzip and encode as base64 for Streamlit Playground +async function compressCodeForPlayground(code) { + const encoder = new TextEncoder(); + const data = encoder.encode(code); + + const cs = new CompressionStream("gzip"); + const writer = cs.writable.getWriter(); + writer.write(data); + writer.close(); + + const compressedChunks = []; + const reader = cs.readable.getReader(); + + while (true) { + const { done, value } = await reader.read(); + if (done) break; + compressedChunks.push(value); + } + + // Combine all chunks into a single Uint8Array + const totalLength = compressedChunks.reduce( + (acc, chunk) => acc + chunk.length, + 0, + ); + const compressed = new Uint8Array(totalLength); + let offset = 0; + for (const chunk of compressedChunks) { + compressed.set(chunk, offset); + offset += chunk.length; + } + + // Convert to URL-safe base64 (uses - and _ instead of + and /) + let binary = ""; + for (let i = 0; i < compressed.length; i++) { + binary += String.fromCharCode(compressed[i]); + } + return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_"); +} + +const TryMeButton = ({ code }) => { + const onClick = useCallback(async () => { + const encoded = await compressCodeForPlayground(code.trim()); + const url = `https://streamlit.io/playground?example=blank&code=${encoded}`; + window.open(url, "_blank", "noopener,noreferrer"); + }, [code]); + + return ( + + ); +}; + // Initialize the cache for imported languages. const languageImports = new Map(); -const Code = ({ code, children, language, img, lines }) => { +// Map language identifiers to display-friendly names +const languageDisplayNames = { + python: "Python", + javascript: "JavaScript", + js: "JavaScript", + typescript: "TypeScript", + ts: "TypeScript", + // Rename Bash to Terminal since Windows doesn't use Bash, and most of the commands we + // mark as Bash here would actually work in any terminal. + bash: "Terminal", + sh: "Sh", + shell: "Shell", + json: "JSON", + yaml: "YAML", + yml: "YAML", + html: "HTML", + css: "CSS", + sql: "SQL", + toml: "TOML", + markdown: "Markdown", + md: "Markdown", + jsx: "JSX", + tsx: "TSX", + go: "Go", + rust: "Rust", + ruby: "Ruby", + java: "Java", + c: "C", + cpp: "C++", + csharp: "C#", + php: "PHP", + swift: "Swift", + kotlin: "Kotlin", + scala: "Scala", + r: "R", + docker: "Docker", + dockerfile: "Dockerfile", + none: "", +}; + +const Code = ({ + code, + children, + language, + img, + // Lines to highlight. For example: "1, 5-7, 9" + lines, + hideCopyButton = false, + hideHeader = false, + filename, + showAll = false, + try: tryIt = false, +}) => { // Create a ref for the code element. const codeRef = useRef(null); + hideCopyButton |= hideHeader; useEffect(() => { // Get the language from the className, if it exists. // Classname usually is `language-python`, `language-javascript`, `language-bash`, etc. - let importLanguage = children.props.className?.substring(9); + let importLanguage = children?.props?.className?.substring(9); // If no language, default to Phython if (importLanguage === undefined || importLanguage === "undefined") { @@ -35,31 +144,14 @@ const Code = ({ code, children, language, img, lines }) => { importLanguage = "javascript"; } - // After we have the values, let's import just the necessary languages - async function highlight() { - if (typeof window !== "undefined") { - // Only import the language if it hasn't been imported before. - if (!languageImports.has(importLanguage)) { - try { - await import(`prismjs/components/prism-${importLanguage}`); - languageImports.set(importLanguage, true); - } catch (error) { - console.error( - `Prism doesn't support this language: ${importLanguage}`, - ); - } - } - // Only highlight the current code block. - if (codeRef.current) { - Prism.highlightElement(codeRef.current); - } - } - } - - highlight(); + highlightElement( + importLanguage, + languageImports, + codeRef.current, + hideCopyButton, + ); }, [children]); - let ConditionalRendering; let customCode = code !== undefined ? code : children; let languageClass = `language-${language}`; @@ -68,40 +160,84 @@ const Code = ({ code, children, language, img, lines }) => { languageClass = children.props.className; } - if (img) { - ConditionalRendering = ( -
- -
- - {customCode} - -
-
- ); - } else if (lines) { - ConditionalRendering = ( -
-
- - {customCode} - -
-
- ); - } else { - ConditionalRendering = ( -
-
- - {customCode} - + // Extract language identifier for display + const langId = languageClass?.substring(9) || language || "python"; + const displayLanguage = languageDisplayNames[langId] || langId; + const showLanguage = + langId.toLowerCase() !== "none" && (showAll || !filename); + + // Important: keep this in sync with components/block/autofunction.js + return ( +
+ {!hideHeader && ( +
+ {showLanguage && ( + {displayLanguage} + )} + {filename && {filename}} + {tryIt && }
-
- ); - } + )} + + {img && } - return ConditionalRendering; + {/* + The copy-to-clipboard feature requires 
, but this leads to
+      hydration errors because sometimes there's already a 
 around this
+      entire component.
+      */}
+      
+        
+          {customCode}
+        
+      

+
+ ); }; +async function highlightElement( + importLanguage, + languageImports, + codeElement, + hideCopyButton, +) { + if (typeof window !== "undefined") { + // Only import the language if it hasn't been imported before. + if (!languageImports.has(importLanguage)) { + try { + await import(`prismjs/components/prism-${importLanguage}`); + languageImports.set(importLanguage, true); + } catch (error) { + console.error(`Prism doesn't support this language: ${importLanguage}`); + } + } + + // Highlight the code block and conditionally enable toolbar plugins (including copy button) + if (codeElement) { + // First highlight the element + Prism.highlightElement(codeElement); + + // Then activate toolbar plugins on the parent container if copy button is not hidden + if (!hideCopyButton) { + const container = codeElement.closest(`.${styles.Container}`); + if (container) { + Prism.highlightAllUnder(container); + } + } + } + } +} + export default Code; diff --git a/components/blocks/code.module.css b/components/blocks/code.module.css index af0220755..acb68926b 100644 --- a/components/blocks/code.module.css +++ b/components/blocks/code.module.css @@ -1,310 +1,133 @@ .Container { - @apply w-full my-7 mx-auto overflow-x-auto; - @apply relative !important; -} - -.Pre, -.Container code { - @apply overflow-auto max-w-full whitespace-pre; -} - -.Pre { - @apply p-4 bg-gray-90 text-white font-medium rounded-md relative py-6 px-8 leading-relaxed; -} - -.Pre code { - @apply z-10 relative; -} - -.LineHighlight { - @apply bg-gray-80 opacity-30 z-0; -} - -.Container button { - @apply absolute top-2 right-2 cursor-pointer h-8 w-8 mb-0 flex items-center; -} - -.Container button::before { - @apply absolute top-2 right-2 z-10 transition-all duration-75 hover:opacity-40; - content: url("/clipboard.svg"); -} - -.Container button span { - @apply absolute right-10 text-white font-mono text-sm tracking-tight font-normal opacity-0; -} - -.Container button:hover span { - @apply opacity-100; -} - -/* Code block adjustments */ -.Pre code :global(.operator) { - @apply text-yellow-50; -} - -.Pre code :global(.decorator.annotation.punctuation) { - @apply text-red-60; -} - -.Pre code :global(.string) { - @apply text-darkBlue-30; -} - -.Pre code :global(.keyword) { - @apply text-darkBlue-50; -} - -.Pre code :global(.builtin) { - @apply text-lightBlue-40; -} - -.Pre code :global(.number), -.Pre code :global(.boolean) { - @apply text-green-40; -} - -.Pre code :global(.punctuation) { - @apply text-gray-60; -} - -.Pre code :global(.comment) { - @apply text-gray-60 italic font-normal; -} - -.Pre code :global(.table) { - @apply inline; -} - -.Pre code :global(.deleted) { - @apply text-red-70 bg-red-70 bg-opacity-20; -} -.Pre code :global(.inserted) { - @apply text-green-70 bg-green-70 bg-opacity-20; -} - -/* Additional token types for HTML/markup, CSS, and other languages */ -.Pre code :global(.tag) { - @apply text-red-60; -} - -.Pre code :global(.attr-name) { - @apply text-lightBlue-40; -} - -.Pre code :global(.attr-value) { - @apply text-darkBlue-30; -} - -.Pre code :global(.entity) { - @apply text-green-40; -} - -.Pre code :global(.property) { - @apply text-lightBlue-40; -} - -.Pre code :global(.selector) { - @apply text-red-60; -} + @apply w-full my-7 mx-auto overflow-x-auto bg-gray-90 rounded-xl; -.Pre code :global(.rule) { - @apply text-darkBlue-50; -} - -.Pre code :global(.function) { - @apply text-red-60 font-semibold; -} - -.Pre code :global(.variable) { - @apply text-yellow-50; -} - -.Pre code :global(.class-name) { - @apply text-lightBlue-40; -} - -.Pre code :global(.constant) { - @apply text-green-40; -} - -.Pre code :global(.symbol) { - @apply text-yellow-50; -} - -.Pre code :global(.important) { - @apply text-red-60 font-bold; -} - -.Pre code :global(.atrule) { - @apply text-darkBlue-50; -} - -.Pre code :global(.url) { - @apply text-darkBlue-30; -} - -.Pre code :global(.regex) { - @apply text-green-40; -} - -.Pre code :global(.prolog), -.Pre code :global(.doctype), -.Pre code :global(.cdata) { - @apply text-gray-60 italic; -} - -/* Additional common token types */ -.Pre code :global(.namespace) { - @apply text-lightBlue-40; -} - -.Pre code :global(.char) { - @apply text-darkBlue-30; -} - -.Pre code :global(.interpolation) { - @apply text-yellow-50; -} - -.Pre code :global(.annotation) { - @apply text-red-60; -} - -.Pre code :global(.generic) { - @apply text-gray-60; -} - -.Pre code :global(.script) { - @apply text-gray-60; -} - -.Pre code :global(.plain-text) { - @apply text-white; -} - -/* Dark mode adjustments */ -:global(.dark) .Pre code :global(.operator), -:global(.dark) .Pre code :global(.decorator) { - @apply text-yellow-80; -} - -:global(.dark) .Pre code :global(.keyword) { - @apply text-darkBlue-50; -} - -:global(.dark) .Pre code :global(.builtin) { - @apply text-lightBlue-60; -} - -:global(.dark) .Pre code :global(.number), -:global(.dark) .Pre code :global(.boolean) { - @apply text-green-40; -} - -:global(.dark) .Pre code :global(.function) { - @apply text-red-60 font-semibold; -} - -:global(.dark) .Pre code :global(.comment) { - @apply text-gray-60; + @apply relative !important; } -:global(.dark) .Pre code :global(.string) { - @apply text-darkBlue-30; +/* Keep in sync with components/blocks/autofunction.module.css */ +.Header { + @apply flex items-center gap-2 + min-h-10 px-3 + border-b border-gray-80 + text-gray-50 text-xs font-medium tracking-wide; } -/* Dark mode styles for additional token types */ -:global(.dark) .Pre code :global(.tag) { - @apply text-red-60; +/* Keep in sync with components/blocks/autofunction.module.css */ +.Language { + @apply uppercase tracking-wider; } -:global(.dark) .Pre code :global(.attr-name) { - @apply text-lightBlue-60; +.Filename { + @apply font-mono tracking-wider; } -:global(.dark) .Pre code :global(.attr-value) { - @apply text-darkBlue-30; +/* Keep in sync with components/blocks/autofunction.module.css */ +.Pre { + @apply p-6 text-white font-medium relative leading-relaxed; } -:global(.dark) .Pre code :global(.entity) { - @apply text-green-40; +/* Keep in sync with components/blocks/autofunction.module.css */ +.Pre, +.Container code { + @apply overflow-auto max-w-full whitespace-pre; } -:global(.dark) .Pre code :global(.property) { - @apply text-lightBlue-60; +/* Keep in sync with components/blocks/autofunction.module.css */ +.Pre code { + @apply z-10 relative; } -:global(.dark) .Pre code :global(.selector) { - @apply text-red-60; +/* Keep in sync with components/blocks/autofunction.module.css */ +.LineHighlight { + @apply bg-gray-80 opacity-30 z-0; } -:global(.dark) .Pre code :global(.rule) { - @apply text-darkBlue-50; +/* Keep in sync with components/blocks/autofunction.module.css */ +.Container :global(.toolbar) { + @apply absolute top-0 right-0 + flex items-center justify-end + px-3 h-10 + text-gray-80 text-xs font-medium tracking-wide; } -:global(.dark) .Pre code :global(.variable) { - @apply text-yellow-80; +/* Keep in sync with components/blocks/autofunction.module.css */ +.Container :global(.toolbar-item) { + @apply flex items-center justify-end; } -:global(.dark) .Pre code :global(.class-name) { - @apply text-lightBlue-60; +/* Keep in sync with components/blocks/autofunction.module.css */ +.Container button { + @apply flex flex-row gap-1 + h-full + text-xs leading-none + text-gray-50 hover:text-white; } -:global(.dark) .Pre code :global(.constant) { - @apply text-green-40; +/* Keep in sync with components/blocks/autofunction.module.css */ +.Container button span { + @apply flex items-center justify-start + tracking-wide font-medium; } -:global(.dark) .Pre code :global(.symbol) { - @apply text-yellow-80; +.Container button i { + @apply flex text-xs leading-none; } -:global(.dark) .Pre code :global(.important) { - @apply text-red-60 font-bold; +.TryMeButton { + @apply px-2 py-1 rounded-md + border border-gray-80 hover:border-white; } -:global(.dark) .Pre code :global(.atrule) { - @apply text-darkBlue-50; -} +/* Keep in sync with components/blocks/autofunction.module.css */ +.Container :global(.copy-to-clipboard-button) { + &::after { + @apply block text-gray-50 hover:text-white h-3 w-3 cursor-pointer; + content: ""; + background-color: currentColor; + -webkit-mask-image: url("/clipboard.svg"); + mask-image: url("/clipboard.svg"); + mask-size: contain; + -webkit-mask-size: contain; + mask-repeat: no-repeat; + } -:global(.dark) .Pre code :global(.url) { - @apply text-darkBlue-30; -} + & span { + @apply text-white + opacity-0 translate-x-2 transition-transform + pointer-events-none; + } -:global(.dark) .Pre code :global(.regex) { - @apply text-green-40; + &:hover span { + @apply opacity-100 translate-x-0; + } } -:global(.dark) .Pre code :global(.prolog), -:global(.dark) .Pre code :global(.doctype), -:global(.dark) .Pre code :global(.cdata) { - @apply text-gray-60 italic; +.NoCopyButton :global(.copy-to-clipboard-button) { + @apply hidden; } -/* Dark mode for additional common token types */ -:global(.dark) .Pre code :global(.namespace) { - @apply text-lightBlue-60; +.TryMeButton { + @apply h-3 flex flex-row gap-1; } -:global(.dark) .Pre code :global(.char) { - @apply text-darkBlue-30; +:global(.refcard) .Container { + @apply rounded-none bg-transparent; } -:global(.dark) .Pre code :global(.interpolation) { - @apply text-yellow-80; -} +:global(.refcard) .Container .Pre { + @apply p-0 text-gray-80 h-full; -:global(.dark) .Pre code :global(.annotation) { - @apply text-red-60; + html:global(.dark) & { + @apply text-white; + } } -:global(.dark) .Pre code :global(.generic) { - @apply text-gray-60; +:global(.refcard) .Container code { + @apply block p-4 h-full; } -:global(.dark) .Pre code :global(.script) { - @apply text-gray-60; +:global(.refcard) .Container :global(.code-toolbar) { + @apply px-0 py-0; } -:global(.dark) .Pre code :global(.plain-text) { - @apply text-white; -} +/* Syntax highlighting is now handled globally via styles/syntax-highlighting.scss */ diff --git a/components/blocks/codeTile.module.css b/components/blocks/codeTile.module.css index e387ce5b9..299ac7cc0 100644 --- a/components/blocks/codeTile.module.css +++ b/components/blocks/codeTile.module.css @@ -56,34 +56,4 @@ @apply col-span-full md:col-span-3 lg:col-span-2; } -/* Code block adjustments */ -/* Code block adjustments */ -.Container pre code :global(.operator), -.Container pre code :global(.decorator) { - @apply text-yellow-80; -} - -.Container pre code :global(.keyword) { - @apply text-darkBlue-60; -} - -.Container pre code :global(.builtin) { - @apply text-lightBlue-70; -} - -.Container pre code :global(.string) { - @apply text-green-80; -} - -.Container pre code :global(.number), -.Container pre code :global(.boolean) { - @apply text-green-60; -} - -.Container pre code :global(.function) { - @apply text-red-60; -} - -.Container pre code :global(.punctuation) { - @apply text-gray-60; -} +/* Syntax highlighting is now handled globally via styles/syntax-highlighting.scss */ diff --git a/components/blocks/componentCard.js b/components/blocks/componentCard.js index e84254273..cf1e9e95f 100644 --- a/components/blocks/componentCard.js +++ b/components/blocks/componentCard.js @@ -2,17 +2,25 @@ import classNames from "classnames"; import genericStyles from "./refCard.module.css"; import customStyles from "./componentCard.module.css"; +import { useCallback } from "react"; const ComponentCard = ({ children, href }) => { + const onClick = useCallback(() => { + window.open(href, "_blank", "noopener,noreferrer"); + }, [href]); + return ( - {children} - + ); }; diff --git a/components/blocks/componentSlider.js b/components/blocks/componentSlider.js index 371935529..ea536e784 100644 --- a/components/blocks/componentSlider.js +++ b/components/blocks/componentSlider.js @@ -10,7 +10,7 @@ import styles from "./componentSlider.module.css"; const Arrow = ({ onClick, type }) => { return ( ); }; diff --git a/components/blocks/componentSlider.module.css b/components/blocks/componentSlider.module.css index e37e7a5a4..62376fe9b 100644 --- a/components/blocks/componentSlider.module.css +++ b/components/blocks/componentSlider.module.css @@ -1,5 +1,5 @@ .SectionContainer { - @apply relative; + @apply relative mt-8; } /* Styles to align the slider with the API reference grid above and below */ @@ -79,15 +79,19 @@ /* Slider arrow styles */ .ArrowsContainer { - @apply flex list-none m-0; + @apply flex list-none m-0 gap-2; } .ArrowsContainer li { - @apply m-0 ml-2; + @apply flex p-0 m-0; } .ArrowsContainer li button { - @apply transition ease-in-out duration-100 hover:text-gray-50 text-gray-60; + @apply transition ease-in-out duration-100 hover:text-gray-50 text-gray-60 flex; +} + +.ArrowsContainer li button i { + @apply w-4 text-base; } /* Hide the default arrows */ diff --git a/components/blocks/refCard.js b/components/blocks/refCard.js index a34e0a715..4f601c1cb 100644 --- a/components/blocks/refCard.js +++ b/components/blocks/refCard.js @@ -16,7 +16,10 @@ const RefCard = ({ children, size, href, deprecated }) => { : styles.Third; return ( - + {deprecated === true ? (