✨ Add ProductPage template

Author: Frontendland

README.md

@@ -292,3 +292,7 @@ import { Accordion } from 'webcoreui/react'
 - [SocialProof](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SocialProof)
 - [Tiles](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Tiles)
 - [User](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/User)
+
+## Templates
+
+- [ProductPage](https://github.com/Frontendland/webcoreui/tree/main/src/templates/ProductPage)

eslint.config.js

@@ -96,7 +96,7 @@ export default [
                 allowExpressions: true
             }],
             'react/jsx-tag-spacing': ['error'],
-            'react/no-unused-prop-types': 'error',
+            'react/prop-types': 'off',
             'radix': 'error',
             'semi': ['error', 'never'],
             'simple-import-sort/imports': ['error', {

src/blocks/Button/Button.astro

@@ -0,0 +1,36 @@
+---
+import { classNames } from 'webcoreui'
+import {
+    Badge,
+    Button as WebcoreButton,
+    Icon,
+    type IconProps
+} from 'webcoreui/astro'
+
+import type { ButtonProps } from './button'
+import styles from './button.module.scss'
+
+interface Props extends ButtonProps {}
+
+const {
+    icon,
+    text,
+    badge,
+    className,
+    ...rest
+} = Astro.props
+
+const Component = badge ? Badge : WebcoreButton
+---
+
+<Component {...rest} className={classNames([styles.button, className])}>
+    {icon && (
+        <Fragment>
+            {icon.startsWith('<svg')
+                ? <Fragment set:html={icon} />
+                : <Icon type={icon as IconProps['type']} />
+            }
+        </Fragment>
+    )}
+    {text}
+</Component>

src/blocks/Button/Button.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { classNames } from 'webcoreui'
+    import {
+        Badge,
+        Button as WebcoreButton
+    } from 'webcoreui/svelte'
+
+    import type { ButtonProps } from './button'
+    import styles from './button.module.scss'
+
+    const {
+        icon,
+        text,
+        badge,
+        className,
+        ...rest
+    }: ButtonProps = $props()
+
+    const SvelteComponent = $derived(badge ? Badge : WebcoreButton)
+</script>
+
+<SvelteComponent
+    {...rest}
+    className={classNames([styles.button, className])}
+>
+    {#if icon}
+        {@html icon}
+    {/if}
+    {text}
+</SvelteComponent>

src/blocks/Button/Button.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { classNames } from 'webcoreui'
+import {
+    Badge,
+    Button as WebcoreButton
+} from 'webcoreui/react'
+
+import type { ReactButtonProps } from './button'
+import styles from './button.module.scss'
+
+const Button = ({
+    icon,
+    text,
+    badge,
+    className,
+    ...rest
+}: ReactButtonProps) => {
+    const Component = badge ? Badge : WebcoreButton
+
+    return (
+        <Component
+            {...rest}
+            className={classNames([styles.button, className])}
+            dangerouslySetInnerHTML={{ __html: icon
+                ? `${icon} ${text}`
+                : text
+            }}
+        />
+    )
+}
+
+export default Button

src/blocks/Button/button.module.scss

@@ -0,0 +1,5 @@
+@use 'webcoreui/config' as *;
+
+.button svg {
+    @include size(18px);
+}

src/blocks/Button/button.ts

@@ -0,0 +1,16 @@
+import type {
+    BadgeProps,
+    ButtonProps as WebcoreButtonProps,
+    IconProps
+} from 'webcoreui/astro'
+
+export type ButtonProps = {
+    icon?: IconProps['type'] | string
+    text?: string
+    badge?: boolean
+    className?: string
+} & WebcoreButtonProps & BadgeProps
+
+export type ReactButtonProps = {
+    children?: React.ReactNode
+} & ButtonProps

src/blocks/Layout/Layout.astro

@@ -12,6 +12,7 @@ const {
     seo,
     menu,
     footer,
+    className,
     ...rest
 } = Astro.props
 
@@ -40,7 +41,7 @@ const containerClasses = [
         <main class:list={containerClasses}>
             <slot name="left-sidebar" />
             <ConditionalWrapper condition={hasSidebar}>
-                <div slot="wrapper">children</div>
+                <div slot="wrapper" class:list={className}>children</div>
                 <slot />
             </ConditionalWrapper>
             <slot name="right-sidebar" />

src/blocks/Layout/Layout.svelte

@@ -11,6 +11,7 @@
         seo,
         menu,
         footer,
+        className,
         insideMenu,
         atf,
         leftSidebar,
@@ -43,7 +44,7 @@
         {@render atf?.()}
         <main class={containerClasses}>
             {@render leftSidebar?.()}
-            <ConditionalWrapper condition={!!hasSidebar}>
+            <ConditionalWrapper condition={!!hasSidebar} class={className}>
                 {@render children?.()}
             </ConditionalWrapper>
             {@render rightSidebar?.()}

src/blocks/Layout/Layout.tsx

@@ -11,6 +11,7 @@ const Layout = ({
     seo,
     menu,
     footer,
+    className,
     insideMenu,
     atf,
     leftSidebar,
@@ -44,7 +45,7 @@ const Layout = ({
                     {leftSidebar}
                     <ConditionalWrapper
                         condition={!!hasSidebar}
-                        wrapper={children => <div>{children}</div>}
+                        wrapper={children => <div className={className}>{children}</div>}
                     >
                         {children}
                     </ConditionalWrapper>