add user section component

Author: sirctseb

new/src/components/CrosswordPreview/crossword-preview.scss

@@ -1,11 +1,6 @@
-$block-class: 'crossword-preview';
+@use '../../styles/_variables' as *;
 
-$base-preview-box-size: 8px;
-// the base size of a box times the base number of boxes
-// plus one for the extra margin
-$preview-size: $base-preview-box-size * 15 + 1;
-$preview-margin: 20px;
-$preview-space: $preview-size + $preview-margin * 2;
+$block-class: 'crossword-preview';
 
 @at-root {
     .#{$block-class} {

new/src/components/Header/index.tsx

@@ -98,7 +98,7 @@ export const Header = () => {
 
   const handleLogout = useCallback(() => {
     auth.signOut();
-  }, []);
+  }, [auth]);
 
   return (
     <HeaderPresentation

new/src/components/User/UserSection/UserSection.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { UserSection } from ".";
+
+const meta = {
+  title: "Example/User/UserSection",
+  component: UserSection,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof UserSection>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Basic: Story = {
+  args: {
+    children: "section content",
+  },
+};

new/src/components/User/UserSection/index.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+import { block } from "../../../styles";
+
+import "./user-section.scss";
+
+const bem = block("user-section");
+
+export const UserSection: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => <div className={bem()}>{children}</div>;

new/src/components/User/UserSection/user-section.scss

@@ -0,0 +1,14 @@
+@use '../../../styles/_variables' as *;
+
+$block-class: 'user-section';
+
+$number-of-previews: 4;
+
+@at-root {
+    .#{$block-class} {
+        max-width: $preview-space * $number-of-previews;
+        margin-left: auto;
+        margin-right: auto;
+        margin-bottom: 20px;
+    }
+}

new/src/styles/_variables.scss

@@ -0,0 +1,6 @@
+$base-preview-box-size: 8px;
+// the base size of a box times the base number of boxes
+// plus one for the extra margin
+$preview-size: $base-preview-box-size * 15 + 1;
+$preview-margin: 20px;
+$preview-space: $preview-size + $preview-margin * 2;