WIP: v2.x

.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

.tool-versions

@@ -0,0 +1 @@
+nodejs 20.12.2

eslint.config.mjs

@@ -0,0 +1,12 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+
+
+export default [
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReactConfig,
+];

lib/components/Footer/Footer.tsx

@@ -0,0 +1,8 @@
+export const Footer = () => {
+  return (
+    <footer>
+      <p>build with <a href="https://github.com/roll-social-network" target="_blank">roll social network</a></p>
+    </footer>
+  )
+}
+export default Footer

lib/components/Footer/index.tsx

@@ -0,0 +1 @@
+export { Footer } from './Footer'

lib/components/Header/Header.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faBars } from '@fortawesome/free-solid-svg-icons/faBars'
+import { faUser } from '@fortawesome/free-solid-svg-icons/faUser'
+
+interface HeaderProps {
+  title?: String
+}
+
+export const Header = ({ title = 'roll' }: HeaderProps) => {
+  return (
+    <header>
+      <ul>
+        <li><a href="#"><FontAwesomeIcon icon={faBars} /></a></li>
+      </ul>
+      <h1>{title}</h1>
+      <ul>
+        <li><a href="#"><FontAwesomeIcon icon={faUser} /></a></li>
+      </ul>
+    </header>
+  )
+}
+export default Header

lib/components/Header/index.ts

@@ -0,0 +1,4 @@
+import Header from './Header'
+
+export { Header } from './Header'
+export default Header

lib/components/index.ts

@@ -0,0 +1,2 @@
+export { Header } from './Header'
+export { Footer } from './Footer'

lib/index.ts

@@ -0,0 +1,2 @@
+export * from './components'
+import './sass/main.scss'

lib/sass/_variables.scss

@@ -0,0 +1,15 @@
+$margin: .25rem;
+$border-radius: .25rem;
+$font-size: 1rem;
+$max-width: 600px;
+
+// Colors
+// color palette: https://flatuicolors.com/palette/gb
+
+$bg-color: #f5f6fa;
+$font-color: #2f3640;
+
+// Header
+$header-bg-color: $font-color;
+$header-font-color: $bg-color;
+

lib/sass/components/_footer.scss

@@ -0,0 +1,5 @@
+footer {
+  padding: $margin * 4;
+  text-align: center;
+  font-size: $font-size * .75;
+}

lib/sass/components/_header.scss

@@ -0,0 +1,48 @@
+header {
+  position: fixed;
+  left: 50%;
+  top: $margin;
+  width: calc(100% - ($margin * 2));
+  transform: translateX(-50%);
+  display: flex;
+  justify-content: space-between;
+  color: $header-font-color;
+  background-color: $header-bg-color;
+  border-radius: $border-radius;
+  max-width: $max-width;
+
+  $header-item-margin: $margin * 3;
+
+  > h1 {
+    display: block;
+    flex-grow: 1;
+    font-size: $font-size * 1.25;
+    padding: $header-item-margin;
+    margin: 0;
+  }
+
+  > ul {
+    display: flex;
+    flex-grow: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      display: flex;
+      padding: 0;
+      margin: 0;
+
+      a {
+        display: block;
+        padding: $header-item-margin;
+        color: $header-font-color;
+
+        svg {
+          min-height: $font-size;
+          vertical-align: middle;
+        }
+      }
+    }
+  }
+}

lib/sass/components/all.scss

@@ -0,0 +1,2 @@
+@import './header';
+@import './footer';

lib/sass/main.scss

@@ -0,0 +1,32 @@
+@import './variables';
+
+$header-margin-saver: ($font-size * 1.5 + $margin * 8);
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  font-size: $font-size;
+  color: $font-color;
+  background-color: $bg-color;
+  margin: $header-margin-saver 0;
+}
+
+p {
+  margin: $margin 0;
+}
+
+section {
+  $section-margin: ($margin * 4);
+
+  margin: $section-margin auto;
+  max-width: $max-width;
+
+  &:first-of-type {
+    margin: ($header-margin-saver + $section-margin) auto $section-margin;
+  }
+}
+
+@import './components/all.scss'