feat: add section for templates

gravity-ui · Dec 13, 2023 · 29855b3 · 29855b3
1 parent 8ccf7c0
commit 29855b3
Show file tree

Hide file tree

Showing 13 changed files with 240 additions and 9 deletions.
diff --git a/src/assets/icons/cra-logo.svg b/src/assets/icons/cra-logo.svg
diff --git a/src/assets/icons/next-logo.svg b/src/assets/icons/next-logo.svg
diff --git a/src/assets/icons/vite-logo.svg b/src/assets/icons/vite-logo.svg
diff --git a/src/blocks/TemplatesBlock/TemplatesBlock.scss b/src/blocks/TemplatesBlock/TemplatesBlock.scss
@@ -0,0 +1,14 @@
+@use '~@gravity-ui/page-constructor/styles/styles.scss' as pcStyles;
+@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '../../variables.scss';
+
+$block: '.#{variables.$ns}templates-block';
+
+#{$block} {
+    @include pcStyles.animate();
+
+    &__title {
+        @include pcStyles.heading2();
+        margin-bottom: pcVariables.$indentM;
+    }
+}
diff --git a/src/blocks/TemplatesBlock/TemplatesBlock.tsx b/src/blocks/TemplatesBlock/TemplatesBlock.tsx
@@ -0,0 +1,33 @@
+import {Animatable, AnimateBlock, HTML} from '@gravity-ui/page-constructor';
+import React from 'react';
+
+import {Templates} from '../../components/Templates';
+import type {Tab} from '../../components/Templates';
+import {block} from '../../utils';
+import {CustomBlock} from '../constants';
+
+import './TemplatesBlock.scss';
+
+const b = block('templates-block');
+
+export type TemplatesProps = Animatable & {
+    title: string;
+    tabs: Tab[];
+};
+
+export type TemplatesModel = TemplatesProps & {
+    type: CustomBlock.Templates;
+};
+
+export const TemplatesBlock: React.FC<TemplatesProps> = ({animated, title, tabs}) => {
+    return (
+        <AnimateBlock className={b()} animate={animated}>
+            <h2 className={b('title')} data-section="templates">
+                <HTML>{title}</HTML>
+            </h2>
+            <Templates tabs={tabs} />
+        </AnimateBlock>
+    );
+};
+
+export default TemplatesBlock;
diff --git a/src/blocks/constants.ts b/src/blocks/constants.ts
@@ -4,4 +4,5 @@ export enum CustomBlock {
     CustomBanner = 'custom-banner',
     Examples = 'examples',
     Roadmap = 'roadmap',
+    Templates = 'templates',
 }
diff --git a/src/blocks/types.ts b/src/blocks/types.ts
@@ -3,10 +3,12 @@ import {CustomExtendedFeaturesModel} from './CustomExtendedFeatures/CustomExtend
 import {CustomHeaderModel} from './CustomHeader/CustomHeader';
 import {ExamplesModel} from './Examples/Examples';
 import {RoadmapModel} from './RoadmapBlock/RoadmapBlock';
+import {TemplatesModel} from './TemplatesBlock/TemplatesBlock';
 
 export type CustomBlockModel =
     | CustomHeaderModel
     | CustomExtendedFeaturesModel
     | CustomBannerModel
     | ExamplesModel
-    | RoadmapModel;
+    | RoadmapModel
+    | TemplatesModel;
diff --git a/src/components/Landing/Landing.tsx b/src/components/Landing/Landing.tsx
@@ -6,6 +6,7 @@ import {CustomExtendedFeatures} from '../../blocks/CustomExtendedFeatures/Custom
 import {CustomHeader} from '../../blocks/CustomHeader/CustomHeader';
 import {Examples} from '../../blocks/Examples/Examples';
 import {RoadmapBlock} from '../../blocks/RoadmapBlock/RoadmapBlock';
+import TemplatesBlock from '../../blocks/TemplatesBlock/TemplatesBlock';
 import {CustomBlock} from '../../blocks/constants';
 import {landing} from '../../content/landing';
 import {useSectionScroll} from '../../hooks/useSectionScroll';
@@ -23,6 +24,7 @@ export const Landing: React.FC = () => {
                     [CustomBlock.CustomBanner]: CustomBanner,
                     [CustomBlock.Examples]: Examples,
                     [CustomBlock.Roadmap]: RoadmapBlock,
+                    [CustomBlock.Templates]: TemplatesBlock,
                 },
             }}
         />

diff --git a/src/components/Templates/Templates.scss b/src/components/Templates/Templates.scss
@@ -0,0 +1,37 @@
+@use '~@gravity-ui/page-constructor/styles/styles.scss' as pcStyles;
+@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
+@use '../../variables.scss';
+
+$block: '.#{variables.$ns}templates';
+
+#{$block} {
+    background: #251b25;
+    border-radius: pcVariables.$borderRadius;
+    padding: 12px 32px 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    &__commands-wrapper {
+        width: 100%;
+        padding: 16px;
+        background: #160d1b;
+        border-radius: 16px;
+
+        @media (max-width: map-get(pcVariables.$gridBreakpoints, 'lg') - 1) {
+            width: inherit;
+        }
+    }
+
+    &__commands {
+        overflow-x: auto;
+        white-space: nowrap;
+        position: relative;
+    }
+
+    &__copy {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
+}
diff --git a/src/components/Templates/Templates.tsx b/src/components/Templates/Templates.tsx
@@ -0,0 +1,74 @@
+import {Button, ClipboardButton, Icon, Tabs, Text} from '@gravity-ui/uikit';
+import React from 'react';
+
+import {block} from '../../utils';
+
+import './Templates.scss';
+import type {Tab} from './types';
+
+const b = block('templates');
+
+interface CommandsProps {
+    commands: string[];
+}
+
+const Commands: React.FC<CommandsProps> = ({commands}) => {
+    return (
+        <div className={b('commands-wrapper')}>
+            <div className={b('commands')}>
+                {commands.map((item, index) => {
+                    return (
+                        <Text as="div" key={index} variant="body-3">
+                            {item}
+                        </Text>
+                    );
+                })}
+                <ClipboardButton text={commands.join(' && ')} className={b('copy')} size={16} />
+            </div>
+        </div>
+    );
+};
+
+interface TabContentProps {
+    data?: Pick<Tab, 'button' | 'commands'>;
+}
+
+const TabContent: React.FC<TabContentProps> = ({data}) => {
+    if (!data) {
+        return null;
+    }
+
+    return (
+        <>
+            {data.commands && <Commands commands={data.commands} />}
+            {data.button?.href && (
+                <div>
+                    <Button {...data.button} pin="circle-circle" view="outlined-action" size="xl">
+                        {data.button.title}
+                    </Button>
+                </div>
+            )}
+        </>
+    );
+};
+
+interface TemplatesProps {
+    tabs: Tab[];
+}
+
+export const Templates: React.FC<TemplatesProps> = ({tabs}) => {
+    const [activeTab, setActiveTab] = React.useState(() => tabs[0]?.title);
+    const tabsItems = tabs.map(({title, icon}) => ({
+        id: title,
+        title,
+        icon: icon ? <Icon data={icon} size={24} /> : undefined,
+    }));
+    const activeTabData = tabs.find((el) => el.title === activeTab);
+
+    return (
+        <section className={b()}>
+            <Tabs size="xl" items={tabsItems} activeTab={activeTab} onSelectTab={setActiveTab} />
+            <TabContent data={activeTabData} />
+        </section>
+    );
+};
diff --git a/src/components/Templates/index.ts b/src/components/Templates/index.ts
@@ -0,0 +1,3 @@
+export type {Tab} from './types';
+
+export {Templates} from './Templates';
diff --git a/src/components/Templates/types.ts b/src/components/Templates/types.ts
@@ -0,0 +1,12 @@
+import {SVGIconData} from '@gravity-ui/uikit/build/esm/components/Icon/types';
+
+export interface Tab {
+    title: string;
+    icon?: SVGIconData;
+    commands?: string[];
+    button?: {
+        title: string;
+        href?: string;
+        target?: string;
+    };
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		export type {Tab} from './types';

		export {Templates} from './Templates';