feat(flat-components): add home page hero button (#418)

packages/flat-components/src/components/HomePageHeroButton/HomePageHeroButton.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, Story } from "@storybook/react";
+import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
+import React from "react";
+import { HomePageHeroButtons, HomePageHeroButtonsProps } from ".";
+
+const storyMeta: Meta = {
+    title: "Components/HomePageHeroButtons",
+    component: HomePageHeroButtons,
+    parameters: {
+        backgrounds: {
+            default: "flat",
+            values: [
+                {
+                    name: "flat",
+                    value: "#F3F6F9",
+                },
+            ],
+        },
+        viewport: {
+            viewports: {
+                ...MINIMAL_VIEWPORTS,
+                tablet2: {
+                    name: "Large Tablet",
+                    styles: { width: "659px", height: "1000px" },
+                },
+            },
+        },
+    },
+};
+
+export default storyMeta;
+
+export const Overview: Story<HomePageHeroButtonsProps> = args => (
+    <HomePageHeroButtons {...args} />
+);
+
+export const TabletScreen: Story<HomePageHeroButtonsProps> = args => (
+    <HomePageHeroButtons {...args} />
+);
+TabletScreen.parameters = {
+    viewport: {
+        defaultViewport: "tablet2",
+    },
+};
+
+export const SmallScreen: Story<HomePageHeroButtonsProps> = args => (
+    <HomePageHeroButtons {...args} />
+);
+SmallScreen.parameters = {
+    viewport: {
+        defaultViewport: "mobile1",
+    },
+};

packages/flat-components/src/components/HomePageHeroButton/index.tsx

@@ -0,0 +1,77 @@
+import "./style.less";
+import React from "react";
+import classNames from "classnames";
+import { Button } from "antd";
+
+type HomePageHeroButtonType = "join" | "create" | "schedule";
+
+interface HomePageHeroButtonBaseProps {
+    type: HomePageHeroButtonType;
+    longText: string;
+    shortText: string;
+    onClick?: () => void;
+}
+
+const HomePageHeroButtonBase: React.FC<HomePageHeroButtonBaseProps> = ({
+    type,
+    longText,
+    shortText,
+    onClick,
+}) => {
+    return (
+        <Button
+            className="home-page-hero-button"
+            onClick={onClick}>
+            <span className={classNames("icon", type)}></span>
+            <span className="text long">{longText}</span>
+            <span className="text short">{shortText}</span>
+        </Button>
+    );
+};
+
+export interface HomePageHeroButtonProps {
+    type: HomePageHeroButtonType;
+    onClick?: () => void;
+}
+
+const Presets: Record<
+    HomePageHeroButtonType,
+    Pick<HomePageHeroButtonBaseProps, "longText" | "shortText">
+> = {
+    join: {
+        longText: "加入房间",
+        shortText: "加入",
+    },
+    create: {
+        longText: "创建房间",
+        shortText: "创建",
+    },
+    schedule: {
+        longText: "预定房间",
+        shortText: "预定",
+    },
+};
+
+export const HomePageHeroButton: React.FC<HomePageHeroButtonProps> = ({ type, onClick }) => {
+    return <HomePageHeroButtonBase type={type} {...Presets[type]} onClick={onClick} />;
+};
+
+export interface HomePageHeroButtonsProps {
+    onJoin?: () => void;
+    onCreate?: () => void;
+    onSchedule?: () => void;
+}
+
+export const HomePageHeroButtons: React.FC<HomePageHeroButtonsProps> = ({
+    onJoin,
+    onCreate,
+    onSchedule,
+}) => {
+    return (
+        <div className="home-page-hero-buttons">
+            <HomePageHeroButton type="join" onClick={onJoin} />
+            <HomePageHeroButton type="create" onClick={onCreate} />
+            <HomePageHeroButton type="schedule" onClick={onSchedule} />
+        </div>
+    );
+};

packages/flat-components/src/components/HomePageHeroButton/style.less

@@ -0,0 +1,80 @@
+.home-page-hero-buttons {
+    display: flex;
+    align-items: center;
+}
+
+.home-page-hero-button {
+    height: 72px !important;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    background-color: white;
+    font-size: 16px;
+    border-color: white;
+    margin-right: 16px;
+
+    &:last-child {
+        margin-right: 0;
+    }
+
+    .icon {
+        display: inline-block;
+        width: 44px;
+        height: 44px;
+        &.join {
+            background-image: url(../../assets/buttons/join.svg);
+        }
+        &.create {
+            background-image: url(../../assets/buttons/create.svg);
+        }
+        &.schedule {
+            background-image: url(../../assets/buttons/schedule.svg);
+        }
+        @media screen and (max-width: 660px) {
+            width: 24px;
+            height: 24px;
+            &.join {
+                background-image: url(../../assets/buttons/join-small.svg);
+            }
+            &.create {
+                background-image: url(../../assets/buttons/create-small.svg);
+            }
+            &.schedule {
+                background-image: url(../../assets/buttons/schedule-small.svg);
+            }
+        }
+    }
+
+    .text {
+        font-size: 16px;
+        font-weight: 400;
+        color: #444e60;
+        padding-left: 14px;
+        padding-right: 25px;
+
+        &.short {
+            display: none;
+        }
+
+        @media screen and (max-width: 660px) {
+            font-size: 14px;
+            padding-left: 6px;
+            padding-right: 8px;
+
+            &.long {
+                display: none;
+            }
+            &.short {
+                display: inline;
+            }
+        }
+    }
+
+    @media screen and (max-width: 660px) {
+        flex: 1;
+        height: 44px !important;
+        border-radius: 9999px;
+        margin-right: 8px;
+    }
+}