crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement client fetch

Browse Source
This commit is contained in:
Henrik Larsson
2023-07-03 14:05:31 +02:00
parent eecef825c5
commit 37e2ef06fc
3 changed files with 76 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
components/ui/text/text.tsx
View File

@@ -1,19 +1,15 @@
'use client'
'use client';
import { cn } from 'lib/utils'
import React, {
CSSProperties,
FunctionComponent,
JSXElementConstructor,
} from 'react'
import { cn } from 'lib/utils';
import React, { CSSProperties, FunctionComponent, JSXElementConstructor } from 'react';
interface TextProps {
variant?: Variant
className?: string
style?: CSSProperties
children?: React.ReactNode | any
html?: string
onClick?: () => any
variant?: Variant;
className?: string;
style?: CSSProperties;
children?: React.ReactNode | any;
html?: string;
onClick?: () => any;
}
type Variant =
@@ -24,7 +20,7 @@ type Variant =
| 'sectionHeading'
| 'label'
| 'paragraph'
| 'listChildHeading'
| 'listChildHeading';
const Text: FunctionComponent<TextProps> = ({
style,
@@ -32,10 +28,10 @@ const Text: FunctionComponent<TextProps> = ({
variant = 'body',
children,
html,
onClick,
onClick
}) => {
const componentsMap: {
[P in Variant]: React.ComponentType<any> | string
[P in Variant]: React.ComponentType<any> | string;
} = {
body: 'div',
heading: 'h1',
@@ -44,39 +40,38 @@ const Text: FunctionComponent<TextProps> = ({
sectionHeading: 'h2',
listChildHeading: 'h3',
label: 'div',
paragraph: 'p',
}
paragraph: 'p'
};
const Component:
| JSXElementConstructor<any>
| React.ReactElement<any>
| React.ComponentType<any>
| string = componentsMap![variant!]
| string = componentsMap![variant!];
const htmlContentProps = html
? {
dangerouslySetInnerHTML: { __html: html },
dangerouslySetInnerHTML: { __html: html }
}
: {}
: {};
return (
<Component
className={cn(
'',
{
['text-base max-w-prose']: variant === 'body',
['max-w-prose text-4xl font-display font-bold leading-none md:text-5xl md:leading-none lg:leading-none lg:text-6xl']:
['max-w-prose text-base']: variant === 'body',
['max-w-prose font-display text-4xl font-extrabold leading-none md:text-5xl md:leading-none lg:text-6xl lg:leading-none']:
variant === 'heading',
['max-w-prose text-3xl font-display font-bold leading-none md:text-4xl md:leading-none lg:leading-none lg:text-5xl']:
['extrabold max-w-prose font-display text-3xl leading-none md:text-4xl md:leading-none lg:text-5xl lg:leading-none']:
variant === 'pageHeading',
['max-w-prose text-2xl font-display leading-none md:text-3xl md:leading-none lg:leading-none lg:text-4xl']:
variant === 'productHeading',
['max-w-prose text-2xl font-display font-bold leading-none md:text-3xl md:leading-none lg:leading-none lg:text-4xl']:
variant === 'sectionHeading',
['text-sm font-medium leading-tight lg:text-base']:
variant === 'listChildHeading',
['text-sm max-w-prose lg:text-base 2xl:text-lg']: variant === 'label',
['max-w-prose lg:text-lg 2xl:text-xl']: variant === 'paragraph',
['max-w-prose font-display text-2xl leading-none md:text-3xl md:leading-none lg:text-4xl lg:leading-none']:
variant === 'productHeading',
['max-w-prose font-display text-2xl font-extrabold leading-none md:text-3xl md:leading-none lg:text-4xl lg:leading-none']:
variant === 'sectionHeading',
['text-sm font-medium leading-tight lg:text-base']: variant === 'listChildHeading',
['max-w-prose text-sm lg:text-base 2xl:text-lg']: variant === 'label',
['max-w-prose lg:text-lg 2xl:text-xl']: variant === 'paragraph'
},
className
)}
@@ -86,7 +81,7 @@ const Text: FunctionComponent<TextProps> = ({
>
{children}
</Component>
)
}
);
};
export default Text
export default Text;