diff --git a/packages/website/src/app/tools/embed/[embed]/host/page.tsx b/packages/website/src/app/tools/embed/[embed]/host/page.tsx index 9df674003..792b628db 100644 --- a/packages/website/src/app/tools/embed/[embed]/host/page.tsx +++ b/packages/website/src/app/tools/embed/[embed]/host/page.tsx @@ -4,9 +4,11 @@ import { Code, Heading } from '@radix-ui/themes'; import { useSearchParams } from 'next/navigation'; import { useMemo } from 'react'; import { PageWrapper } from '../../../../../components/PageWrapper'; -import { configurations } from '../../../../../constants/embeds'; +import { + configurations, + extractEmbedConfigDefaults, +} from '../../../../../constants/embeds'; import * as EmbedState from '../../../../../stores/embedState'; -import { extractEmbedConfigDefaults } from '../../utilities'; export interface EmbedPreviewControllerProps { configKey: string; diff --git a/packages/website/src/app/tools/embed/[embed]/layout.tsx b/packages/website/src/app/tools/embed/[embed]/layout.tsx index 8816d1ffe..35bf1c583 100644 --- a/packages/website/src/app/tools/embed/[embed]/layout.tsx +++ b/packages/website/src/app/tools/embed/[embed]/layout.tsx @@ -1,7 +1,9 @@ import { useMemo } from 'react'; -import { configurations } from '../../../../constants/embeds'; +import { + configurations, + extractEmbedConfigDefaults, +} from '../../../../constants/embeds'; import * as EmbedState from '../../../../stores/embedState'; -import { extractEmbedConfigDefaults } from '../utilities'; export function generateStaticParams() { return Object.keys(configurations).map((embed) => ({ embed })); diff --git a/packages/website/src/app/tools/embed/utilities.ts b/packages/website/src/app/tools/embed/utilities.ts deleted file mode 100644 index 2e8be1e58..000000000 --- a/packages/website/src/app/tools/embed/utilities.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { - EmbedConfig, - ExtractEmbedConfigTypes, - RadixColorCompound, - RadixRadius, -} from '../../../stores/embedState'; - -export function extractEmbedConfigDefaults( - config: Config, -) { - return Object.fromEntries( - Object.entries(config).map(([key, value]) => [key, value.default]), - ) as ExtractEmbedConfigTypes; -} - -export function toWidthVar(state: number) { - return `${state}px`; -} - -export function toRadiusVar(state: RadixRadius) { - return `var(--radius-${state})`; -} - -export function toColorVar(state: RadixColorCompound) { - return `var(--${state.base}-${state.variant})`; -} diff --git a/packages/website/src/components/TanksEmbed.tsx b/packages/website/src/components/TanksEmbed.tsx index d14935381..12ae5b44c 100644 --- a/packages/website/src/components/TanksEmbed.tsx +++ b/packages/website/src/components/TanksEmbed.tsx @@ -8,8 +8,8 @@ import { amberDark, blueDark } from '@radix-ui/colors'; import { Flex, Text } from '@radix-ui/themes'; import { times } from 'lodash'; import { ReactNode } from 'react'; -import { toRadiusVar } from '../app/tools/embed/utilities'; import { breakdownConfig } from '../constants/embeds'; +import { toRadiusVar } from '../core/radix/utils'; import { useEmbedStateCurry } from '../stores/embedState/utilities'; import { ClassHeavy } from './ClassIcon/components/ClassHeavy'; import { ClassLight } from './ClassIcon/components/ClassLight'; diff --git a/packages/website/src/constants/embeds.ts b/packages/website/src/constants/embeds.ts index 600529b71..ecb7a62ce 100644 --- a/packages/website/src/constants/embeds.ts +++ b/packages/website/src/constants/embeds.ts @@ -5,7 +5,7 @@ import { BreakdownPreview, compositeStatsKeysOptions, } from '../app/tools/embed/configurations/breakdown'; -import { EmbedConfig } from '../stores/embedState'; +import { EmbedConfig, ExtractEmbedConfigTypes } from '../stores/embedState'; import { EmbedItemType } from '../stores/embedState/constants'; export const breakdownConfig = { @@ -89,3 +89,10 @@ export const configurations = { export const previews = { breakdown: BreakdownPreview, } satisfies Record ReactNode>; +export function extractEmbedConfigDefaults( + config: Config, +) { + return Object.fromEntries( + Object.entries(config).map(([key, value]) => [key, value.default]), + ) as ExtractEmbedConfigTypes; +} diff --git a/packages/website/src/core/radix/utils.ts b/packages/website/src/core/radix/utils.ts new file mode 100644 index 000000000..298964b0b --- /dev/null +++ b/packages/website/src/core/radix/utils.ts @@ -0,0 +1,11 @@ +import { RadixColorCompound, RadixRadius } from '../../stores/embedState'; + +export function toWidthVar(state: number) { + return `${state}px`; +} +export function toRadiusVar(state: RadixRadius) { + return `var(--radius-${state})`; +} +export function toColorVar(state: RadixColorCompound) { + return `var(--${state.base}-${state.variant})`; +}