, + // Form + control: <Control />, + input: <Input />, + file: <File />, + // Grid + columns: <Columns />, + grid: <Grid />, + // Layout + footer: <Footer />, + hero: <Hero />, + media: <Media />, + section: <Section />, }; const PAGE_IDS = [ "colors", @@ -63,6 +85,15 @@ const PAGE_IDS = [ "table", "tag", "title", + "control", + "input", + "file", + "columns", + "grid", + "footer", + "hero", + "media", + "section", ]; export const CustomizerContext = createContext({ @@ -74,6 +105,7 @@ export const CustomizerContext = createContext({ }); function App() { + const styleRef = useRef(); const initialContext = { cssvars: {}, currentPage: "delete", @@ -90,15 +122,15 @@ function App() { }, updateVar: (id, newValue) => { setContext((context) => { - const { start, unit, scope } = context.cssvars[id]; - const computedValue = `${newValue}${unit}`; - const el = document.querySelector(scope); + // const { start, unit, scope } = context.cssvars[id]; + // const computedValue = `${newValue}${unit}`; + // const el = document.querySelector(`#scope ${scope}`); - if (start === newValue) { - el.style.removeProperty(`--bulma-${id}`); - } else { - el.style.setProperty(`--bulma-${id}`, computedValue); - } + // if (start === newValue) { + // el.style.removeProperty(`--bulma-${id}`); + // } else { + // el.style.setProperty(`--bulma-${id}`, computedValue); + // } return { ...context, @@ -134,6 +166,14 @@ function App() { table: window.getComputedStyle(document.querySelector(".table")), tag: window.getComputedStyle(document.querySelector(".tag")), title: window.getComputedStyle(document.querySelector(".title")), + file: window.getComputedStyle(document.querySelector(".file")), + input: window.getComputedStyle(document.querySelector(".input")), + columns: window.getComputedStyle(document.querySelector(".columns")), + grid: window.getComputedStyle(document.querySelector(".grid")), + footer: window.getComputedStyle(document.querySelector(".footer")), + hero: window.getComputedStyle(document.querySelector(".hero")), + media: window.getComputedStyle(document.querySelector(".media")), + section: window.getComputedStyle(document.querySelector(".section")), }; const cssvars = {}; @@ -171,6 +211,30 @@ function App() { } else if (key.startsWith("title")) { scope = ".title"; original = styles.title.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("file")) { + scope = ".file"; + original = styles.file.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("input")) { + scope = ".input"; + original = styles.input.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("columns")) { + scope = ".columns"; + original = styles.columns.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("grid")) { + scope = ".grid"; + original = styles.grid.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("footer")) { + scope = ".footer"; + original = styles.footer.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("hero")) { + scope = ".hero"; + original = styles.hero.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("media")) { + scope = ".media"; + original = styles.media.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("section")) { + scope = ".section"; + original = styles.section.getPropertyValue(`--bulma-${key}`); } else { original = styles.root.getPropertyValue(`--bulma-${key}`); } @@ -203,8 +267,42 @@ function App() { }); }, []); + useEffect(() => { + const rules = {}; + + Object.values(context.cssvars).forEach((cssvar) => { + const { id, current, start, scope, unit } = cssvar; + + if (current == start) { + return; + } + + const computedValue = `${current}${unit}`; + const declaration = `--bulma-${id}: ${computedValue};`; + + if (scope in rules) { + rules[scope].push(declaration); + } else { + rules[scope] = [declaration]; + } + }); + + let content = ""; + + for (const [key, arr] of Object.entries(rules)) { + content += `${key} {`; + arr.forEach((item) => (content += item)); + content += `}`; + } + + if (styleRef) { + styleRef.current.innerHTML = content; + } + }, [context.cssvars]); + return ( <CustomizerContext.Provider value={context}> + <style ref={styleRef} /> <section className="section"> <div className="buttons"> {PAGE_IDS.map((pageId) => { diff --git a/docs/_react/bulma-customizer/src/components/Slider.module.css b/docs/_react/bulma-customizer/src/components/Slider.module.css index 828d1cfda..84f9414b5 100644 --- a/docs/_react/bulma-customizer/src/components/Slider.module.css +++ b/docs/_react/bulma-customizer/src/components/Slider.module.css @@ -32,7 +32,7 @@ .background { border-radius: 0.25rem; - background-color: var(--bulma-background); + background-color: var(--bulma-border); height: 0.5rem; } diff --git a/docs/_react/bulma-customizer/src/constants.js b/docs/_react/bulma-customizer/src/constants.js index 92a67424a..5917c16fa 100644 --- a/docs/_react/bulma-customizer/src/constants.js +++ b/docs/_react/bulma-customizer/src/constants.js @@ -522,6 +522,35 @@ export const CSSVAR_KEYS = { description: "The subtitle strong elements font weight", }, ], + control: [ + { id: "control-radius", description: "The control elements border radius" }, + { + id: "control-radius-small", + description: "The control elements small border radius", + }, + { + id: "control-border-width", + description: "The control elements border width", + }, + { id: "control-height", description: "The control elements height" }, + { + id: "control-line-height", + description: "The control elements line height", + }, + { + id: "control-padding-vertical", + description: "The control elements vertical padding", + }, + { + id: "control-padding-horizontal", + description: "The control elements horizontal padding", + }, + { id: "control-size", description: "The control elements font size" }, + { + id: "control-focus-shadow-l", + description: "The control elements shadow Lightness when focused", + }, + ], file: [ { id: "file-radius", description: "The file element border radius" }, { @@ -594,10 +623,6 @@ export const CSSVAR_KEYS = { id: "input-border-style", description: "The input element main border style", }, - { - id: "input-border-width", - description: "The input element main border width", - }, { id: "input-border-l", description: "The input element main border Lightness", diff --git a/docs/_react/bulma-customizer/src/pages/form/Control.jsx b/docs/_react/bulma-customizer/src/pages/form/Control.jsx new file mode 100644 index 000000000..ab2f163f2 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/form/Control.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Control() { + const ids = CSSVAR_KEYS.control.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Control; diff --git a/docs/_react/bulma-customizer/src/pages/form/File.jsx b/docs/_react/bulma-customizer/src/pages/form/File.jsx new file mode 100644 index 000000000..98fc6601d --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/form/File.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function File() { + const ids = CSSVAR_KEYS.file.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default File; diff --git a/docs/_react/bulma-customizer/src/pages/form/Input.jsx b/docs/_react/bulma-customizer/src/pages/form/Input.jsx new file mode 100644 index 000000000..d34b0a922 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/form/Input.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Input() { + const ids = CSSVAR_KEYS.input.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Input; diff --git a/docs/_react/bulma-customizer/src/pages/grid/Columns.jsx b/docs/_react/bulma-customizer/src/pages/grid/Columns.jsx new file mode 100644 index 000000000..d913fc001 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/grid/Columns.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Columns() { + const ids = CSSVAR_KEYS.columns.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Columns; diff --git a/docs/_react/bulma-customizer/src/pages/grid/Grid.jsx b/docs/_react/bulma-customizer/src/pages/grid/Grid.jsx new file mode 100644 index 000000000..9e466a9b5 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/grid/Grid.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Grid() { + const ids = CSSVAR_KEYS.grid.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Grid; diff --git a/docs/_react/bulma-customizer/src/pages/layout/Footer.jsx b/docs/_react/bulma-customizer/src/pages/layout/Footer.jsx new file mode 100644 index 000000000..c95afe2c6 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/layout/Footer.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Footer() { + const ids = CSSVAR_KEYS.footer.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Footer; diff --git a/docs/_react/bulma-customizer/src/pages/layout/Hero.jsx b/docs/_react/bulma-customizer/src/pages/layout/Hero.jsx new file mode 100644 index 000000000..76324fb30 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/layout/Hero.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Hero() { + const ids = CSSVAR_KEYS.hero.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Hero; diff --git a/docs/_react/bulma-customizer/src/pages/layout/Media.jsx b/docs/_react/bulma-customizer/src/pages/layout/Media.jsx new file mode 100644 index 000000000..bda13a845 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/layout/Media.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Media() { + const ids = CSSVAR_KEYS.media.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Media; diff --git a/docs/_react/bulma-customizer/src/pages/layout/Section.jsx b/docs/_react/bulma-customizer/src/pages/layout/Section.jsx new file mode 100644 index 000000000..1797cc6bf --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/layout/Section.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Section() { + const ids = CSSVAR_KEYS.section.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Section; -- 2.47.2

@@ -18,6 +18,14 @@

+ +

diff --git a/docs/_react/bulma-customizer/src/App.jsx b/docs/_react/bulma-customizer/src/App.jsx index 31859dcc0..8d20f0d56 100644 --- a/docs/_react/bulma-customizer/src/App.jsx +++ b/docs/_react/bulma-customizer/src/App.jsx @@ -1,4 +1,4 @@ -import { createContext, useEffect, useState } from "react"; +import { createContext, useEffect, useRef, useState } from "react"; import classNames from "classnames"; import "../../../../css/bulma.css"; @@ -21,6 +21,15 @@ import Progress from "./pages/elements/Progress"; import Table from "./pages/elements/Table"; import Tag from "./pages/elements/Tag"; import Title from "./pages/elements/Title"; +import Control from "./pages/form/Control"; +import Input from "./pages/form/Input"; +import File from "./pages/form/File"; +import Columns from "./pages/grid/Columns"; +import Grid from "./pages/grid/Grid"; +import Footer from "./pages/layout/Footer"; +import Hero from "./pages/layout/Hero"; +import Media from "./pages/layout/Media"; +import Section from "./pages/layout/Section"; const SUFFIX_TO_KIND = { "-h": "hue", @@ -37,6 +46,7 @@ const PAGE_TO_COMPONENT = { other: , generic: , skeleton: , + // Elements box: , content: , delete: , @@ -46,6 +56,18 @@ const PAGE_TO_COMPONENT = { table: , tag: , title: , + // Form + control: <Control />, + input: <Input />, + file: <File />, + // Grid + columns: <Columns />, + grid: <Grid />, + // Layout + footer: <Footer />, + hero: <Hero />, + media: <Media />, + section: <Section />, }; const PAGE_IDS = [ "colors", @@ -63,6 +85,15 @@ const PAGE_IDS = [ "table", "tag", "title", + "control", + "input", + "file", + "columns", + "grid", + "footer", + "hero", + "media", + "section", ]; export const CustomizerContext = createContext({ @@ -74,6 +105,7 @@ export const CustomizerContext = createContext({ }); function App() { + const styleRef = useRef(); const initialContext = { cssvars: {}, currentPage: "delete", @@ -90,15 +122,15 @@ function App() { }, updateVar: (id, newValue) => { setContext((context) => { - const { start, unit, scope } = context.cssvars[id]; - const computedValue = `${newValue}${unit}`; - const el = document.querySelector(scope); + // const { start, unit, scope } = context.cssvars[id]; + // const computedValue = `${newValue}${unit}`; + // const el = document.querySelector(`#scope ${scope}`); - if (start === newValue) { - el.style.removeProperty(`--bulma-${id}`); - } else { - el.style.setProperty(`--bulma-${id}`, computedValue); - } + // if (start === newValue) { + // el.style.removeProperty(`--bulma-${id}`); + // } else { + // el.style.setProperty(`--bulma-${id}`, computedValue); + // } return { ...context, @@ -134,6 +166,14 @@ function App() { table: window.getComputedStyle(document.querySelector(".table")), tag: window.getComputedStyle(document.querySelector(".tag")), title: window.getComputedStyle(document.querySelector(".title")), + file: window.getComputedStyle(document.querySelector(".file")), + input: window.getComputedStyle(document.querySelector(".input")), + columns: window.getComputedStyle(document.querySelector(".columns")), + grid: window.getComputedStyle(document.querySelector(".grid")), + footer: window.getComputedStyle(document.querySelector(".footer")), + hero: window.getComputedStyle(document.querySelector(".hero")), + media: window.getComputedStyle(document.querySelector(".media")), + section: window.getComputedStyle(document.querySelector(".section")), }; const cssvars = {}; @@ -171,6 +211,30 @@ function App() { } else if (key.startsWith("title")) { scope = ".title"; original = styles.title.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("file")) { + scope = ".file"; + original = styles.file.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("input")) { + scope = ".input"; + original = styles.input.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("columns")) { + scope = ".columns"; + original = styles.columns.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("grid")) { + scope = ".grid"; + original = styles.grid.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("footer")) { + scope = ".footer"; + original = styles.footer.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("hero")) { + scope = ".hero"; + original = styles.hero.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("media")) { + scope = ".media"; + original = styles.media.getPropertyValue(`--bulma-${key}`); + } else if (key.startsWith("section")) { + scope = ".section"; + original = styles.section.getPropertyValue(`--bulma-${key}`); } else { original = styles.root.getPropertyValue(`--bulma-${key}`); } @@ -203,8 +267,42 @@ function App() { }); }, []); + useEffect(() => { + const rules = {}; + + Object.values(context.cssvars).forEach((cssvar) => { + const { id, current, start, scope, unit } = cssvar; + + if (current == start) { + return; + } + + const computedValue = `${current}${unit}`; + const declaration = `--bulma-${id}: ${computedValue};`; + + if (scope in rules) { + rules[scope].push(declaration); + } else { + rules[scope] = [declaration]; + } + }); + + let content = ""; + + for (const [key, arr] of Object.entries(rules)) { + content += `${key} {`; + arr.forEach((item) => (content += item)); + content += `}`; + } + + if (styleRef) { + styleRef.current.innerHTML = content; + } + }, [context.cssvars]); + return ( <CustomizerContext.Provider value={context}> + <style ref={styleRef} /> <section className="section"> <div className="buttons"> {PAGE_IDS.map((pageId) => { diff --git a/docs/_react/bulma-customizer/src/components/Slider.module.css b/docs/_react/bulma-customizer/src/components/Slider.module.css index 828d1cfda..84f9414b5 100644 --- a/docs/_react/bulma-customizer/src/components/Slider.module.css +++ b/docs/_react/bulma-customizer/src/components/Slider.module.css @@ -32,7 +32,7 @@ .background { border-radius: 0.25rem; - background-color: var(--bulma-background); + background-color: var(--bulma-border); height: 0.5rem; } diff --git a/docs/_react/bulma-customizer/src/constants.js b/docs/_react/bulma-customizer/src/constants.js index 92a67424a..5917c16fa 100644 --- a/docs/_react/bulma-customizer/src/constants.js +++ b/docs/_react/bulma-customizer/src/constants.js @@ -522,6 +522,35 @@ export const CSSVAR_KEYS = { description: "The subtitle strong elements font weight", }, ], + control: [ + { id: "control-radius", description: "The control elements border radius" }, + { + id: "control-radius-small", + description: "The control elements small border radius", + }, + { + id: "control-border-width", + description: "The control elements border width", + }, + { id: "control-height", description: "The control elements height" }, + { + id: "control-line-height", + description: "The control elements line height", + }, + { + id: "control-padding-vertical", + description: "The control elements vertical padding", + }, + { + id: "control-padding-horizontal", + description: "The control elements horizontal padding", + }, + { id: "control-size", description: "The control elements font size" }, + { + id: "control-focus-shadow-l", + description: "The control elements shadow Lightness when focused", + }, + ], file: [ { id: "file-radius", description: "The file element border radius" }, { @@ -594,10 +623,6 @@ export const CSSVAR_KEYS = { id: "input-border-style", description: "The input element main border style", }, - { - id: "input-border-width", - description: "The input element main border width", - }, { id: "input-border-l", description: "The input element main border Lightness", diff --git a/docs/_react/bulma-customizer/src/pages/form/Control.jsx b/docs/_react/bulma-customizer/src/pages/form/Control.jsx new file mode 100644 index 000000000..ab2f163f2 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/form/Control.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Control() { + const ids = CSSVAR_KEYS.control.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Control; diff --git a/docs/_react/bulma-customizer/src/pages/form/File.jsx b/docs/_react/bulma-customizer/src/pages/form/File.jsx new file mode 100644 index 000000000..98fc6601d --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/form/File.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function File() { + const ids = CSSVAR_KEYS.file.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default File; diff --git a/docs/_react/bulma-customizer/src/pages/form/Input.jsx b/docs/_react/bulma-customizer/src/pages/form/Input.jsx new file mode 100644 index 000000000..d34b0a922 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/form/Input.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Input() { + const ids = CSSVAR_KEYS.input.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Input; diff --git a/docs/_react/bulma-customizer/src/pages/grid/Columns.jsx b/docs/_react/bulma-customizer/src/pages/grid/Columns.jsx new file mode 100644 index 000000000..d913fc001 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/grid/Columns.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Columns() { + const ids = CSSVAR_KEYS.columns.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Columns; diff --git a/docs/_react/bulma-customizer/src/pages/grid/Grid.jsx b/docs/_react/bulma-customizer/src/pages/grid/Grid.jsx new file mode 100644 index 000000000..9e466a9b5 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/grid/Grid.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Grid() { + const ids = CSSVAR_KEYS.grid.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Grid; diff --git a/docs/_react/bulma-customizer/src/pages/layout/Footer.jsx b/docs/_react/bulma-customizer/src/pages/layout/Footer.jsx new file mode 100644 index 000000000..c95afe2c6 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/layout/Footer.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Footer() { + const ids = CSSVAR_KEYS.footer.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Footer; diff --git a/docs/_react/bulma-customizer/src/pages/layout/Hero.jsx b/docs/_react/bulma-customizer/src/pages/layout/Hero.jsx new file mode 100644 index 000000000..76324fb30 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/layout/Hero.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Hero() { + const ids = CSSVAR_KEYS.hero.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Hero; diff --git a/docs/_react/bulma-customizer/src/pages/layout/Media.jsx b/docs/_react/bulma-customizer/src/pages/layout/Media.jsx new file mode 100644 index 000000000..bda13a845 --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/layout/Media.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Media() { + const ids = CSSVAR_KEYS.media.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Media; diff --git a/docs/_react/bulma-customizer/src/pages/layout/Section.jsx b/docs/_react/bulma-customizer/src/pages/layout/Section.jsx new file mode 100644 index 000000000..1797cc6bf --- /dev/null +++ b/docs/_react/bulma-customizer/src/pages/layout/Section.jsx @@ -0,0 +1,16 @@ +import VarItem from "components/VarItem"; +import { CSSVAR_KEYS } from "root/constants"; + +function Section() { + const ids = CSSVAR_KEYS.section.map((i) => i.id); + + return ( + <div> + {ids.map((id) => { + return <VarItem key={id} id={id} />; + })} + </div> + ); +} + +export default Section; -- 2.47.2