diff --git a/.vscode/settings.json b/.vscode/settings.json index 39d46a6..c0b9fa3 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -15,4 +15,7 @@ "[scss]": { "editor.defaultFormatter": "vscode.css-language-features" }, + "[json]": { + "editor.defaultFormatter": "vscode.json-language-features" + }, } \ No newline at end of file diff --git a/next.config.js b/next.config.js new file mode 100644 index 0000000..271bad6 --- /dev/null +++ b/next.config.js @@ -0,0 +1,5 @@ +module.exports = { + images: { + domains: ['cdn.discordapp.com'] + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 8c387d8..0d3db4a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@emotion/react": "^11.10.4", "@reduxjs/toolkit": "^1.8.5", "next": "^12.3.1", + "next-auth": "^4.12.2", "react": "^18.0.0", "react-dom": "^18.0.0", "react-polymorphic-types": "^2.0.0", @@ -2329,6 +2330,14 @@ "node": ">= 8" } }, + "node_modules/@panva/hkdf": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.0.2.tgz", + "integrity": "sha512-MSAs9t3Go7GUkMhpKC44T58DJ5KGk2vBo+h1cqQeqlMfdGkxaVB78ZWpv9gYi/g2fa4sopag9gJsNvS8XGgWJA==", + "funding": { + "url": "https://github.com/sponsors/panva" + } + }, "node_modules/@parcel/fs": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-1.11.0.tgz", @@ -3973,6 +3982,14 @@ "safe-buffer": "~5.1.1" } }, + "node_modules/cookie": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", + "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==", + "engines": { + "node": ">= 0.6" + } + }, "node_modules/copy-descriptor": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz", @@ -7287,6 +7304,14 @@ "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==", "dev": true }, + "node_modules/jose": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/jose/-/jose-4.10.0.tgz", + "integrity": "sha512-KEhB/eLGLomWGPTb+/RNbYsTjIyx03JmbqAyIyiXBuNSa7CmNrJd5ysFhblayzs/e/vbOPMUaLnjHUMhGp4yLw==", + "funding": { + "url": "https://github.com/sponsors/panva" + } + }, "node_modules/js-sdsl": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz", @@ -7597,7 +7622,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, "dependencies": { "yallist": "^4.0.0" }, @@ -8002,6 +8026,44 @@ } } }, + "node_modules/next-auth": { + "version": "4.12.2", + "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.12.2.tgz", + "integrity": "sha512-B25iFUIKYa2pRMWRFPIQWv84WJydqIsv6EbriNuzqNSZnxnlmpsrmJrTeMMLf+9a3qf9FG8enxDmDntmwnBkDQ==", + "dependencies": { + "@babel/runtime": "^7.16.3", + "@panva/hkdf": "^1.0.1", + "cookie": "^0.5.0", + "jose": "^4.9.3", + "oauth": "^0.9.15", + "openid-client": "^5.1.0", + "preact": "^10.6.3", + "preact-render-to-string": "^5.1.19", + "uuid": "^8.3.2" + }, + "engines": { + "node": "^12.19.0 || ^14.15.0 || ^16.13.0" + }, + "peerDependencies": { + "next": "^12.2.5", + "nodemailer": "^6.6.5", + "react": "^17.0.2 || ^18", + "react-dom": "^17.0.2 || ^18" + }, + "peerDependenciesMeta": { + "nodemailer": { + "optional": true + } + } + }, + "node_modules/next-auth/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/next/node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", @@ -8120,6 +8182,11 @@ "integrity": "sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==", "dev": true }, + "node_modules/oauth": { + "version": "0.9.15", + "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz", + "integrity": "sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==" + }, "node_modules/oauth-sign": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz", @@ -8211,6 +8278,14 @@ "node": ">=0.10.0" } }, + "node_modules/object-hash": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz", + "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==", + "engines": { + "node": ">= 6" + } + }, "node_modules/object-inspect": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.4.1.tgz", @@ -8347,6 +8422,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/oidc-token-hash": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.0.1.tgz", + "integrity": "sha512-EvoOtz6FIEBzE+9q253HsLCVRiK/0doEJ2HCvvqMQb3dHZrP3WlJKYtJ55CRTw4jmYomzH4wkPuCj/I3ZvpKxQ==", + "engines": { + "node": "^10.13.0 || >=12.0.0" + } + }, "node_modules/on-finished": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", @@ -8380,6 +8463,20 @@ "node": ">=4" } }, + "node_modules/openid-client": { + "version": "5.1.10", + "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.1.10.tgz", + "integrity": "sha512-KYAtkxTuUwTvjAmH0QMFFP3i9l0+XhP2/blct6Q9kn+DUJ/lu8/g/bI8ghSgxz9dJLm/9cpB/1uLVGTcGGY0hw==", + "dependencies": { + "jose": "^4.1.4", + "lru-cache": "^6.0.0", + "object-hash": "^2.0.1", + "oidc-token-hash": "^5.0.1" + }, + "funding": { + "url": "https://github.com/sponsors/panva" + } + }, "node_modules/opn": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz", @@ -9299,6 +9396,26 @@ "node": ">=10" } }, + "node_modules/preact": { + "version": "10.11.0", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.11.0.tgz", + "integrity": "sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/preact" + } + }, + "node_modules/preact-render-to-string": { + "version": "5.2.4", + "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.4.tgz", + "integrity": "sha512-iIPHb3BXUQ3Za6KNhkjN/waq11Oh+QWWtAgN3id3LrL+cszH3DYh8TxJPNQ6Aogsbu4JsqdJLBZltwPFpG6N6w==", + "dependencies": { + "pretty-format": "^3.8.0" + }, + "peerDependencies": { + "preact": ">=10" + } + }, "node_modules/prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", @@ -9308,6 +9425,11 @@ "node": ">= 0.8.0" } }, + "node_modules/pretty-format": { + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz", + "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==" + }, "node_modules/process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -11905,8 +12027,7 @@ "node_modules/yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, "node_modules/yaml": { "version": "1.10.2", @@ -13499,6 +13620,11 @@ "fastq": "^1.6.0" } }, + "@panva/hkdf": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@panva/hkdf/-/hkdf-1.0.2.tgz", + "integrity": "sha512-MSAs9t3Go7GUkMhpKC44T58DJ5KGk2vBo+h1cqQeqlMfdGkxaVB78ZWpv9gYi/g2fa4sopag9gJsNvS8XGgWJA==" + }, "@parcel/fs": { "version": "1.11.0", "resolved": "https://registry.npmjs.org/@parcel/fs/-/fs-1.11.0.tgz", @@ -14791,6 +14917,11 @@ "safe-buffer": "~5.1.1" } }, + "cookie": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz", + "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==" + }, "copy-descriptor": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz", @@ -17363,6 +17494,11 @@ "integrity": "sha512-Yljz7ffyPbrLpLngrMtZ7NduUgVvi6wG9RJ9IUcyCd59YQ911PBJphODUcbOVbqYfxe1wuYf/LJ8PauMRwsM/g==", "dev": true }, + "jose": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/jose/-/jose-4.10.0.tgz", + "integrity": "sha512-KEhB/eLGLomWGPTb+/RNbYsTjIyx03JmbqAyIyiXBuNSa7CmNrJd5ysFhblayzs/e/vbOPMUaLnjHUMhGp4yLw==" + }, "js-sdsl": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz", @@ -17621,7 +17757,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", - "dev": true, "requires": { "yallist": "^4.0.0" } @@ -17952,6 +18087,29 @@ } } }, + "next-auth": { + "version": "4.12.2", + "resolved": "https://registry.npmjs.org/next-auth/-/next-auth-4.12.2.tgz", + "integrity": "sha512-B25iFUIKYa2pRMWRFPIQWv84WJydqIsv6EbriNuzqNSZnxnlmpsrmJrTeMMLf+9a3qf9FG8enxDmDntmwnBkDQ==", + "requires": { + "@babel/runtime": "^7.16.3", + "@panva/hkdf": "^1.0.1", + "cookie": "^0.5.0", + "jose": "^4.9.3", + "oauth": "^0.9.15", + "openid-client": "^5.1.0", + "preact": "^10.6.3", + "preact-render-to-string": "^5.1.19", + "uuid": "^8.3.2" + }, + "dependencies": { + "uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==" + } + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -18033,6 +18191,11 @@ "integrity": "sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw==", "dev": true }, + "oauth": { + "version": "0.9.15", + "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz", + "integrity": "sha512-a5ERWK1kh38ExDEfoO6qUHJb32rd7aYmPHuyCu3Fta/cnICvYmgd2uhuKXvPD+PXB+gCEYYEaQdIRAjCOwAKNA==" + }, "oauth-sign": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.9.0.tgz", @@ -18104,6 +18267,11 @@ } } }, + "object-hash": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-2.2.0.tgz", + "integrity": "sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==" + }, "object-inspect": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.4.1.tgz", @@ -18201,6 +18369,11 @@ "es-abstract": "^1.19.1" } }, + "oidc-token-hash": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/oidc-token-hash/-/oidc-token-hash-5.0.1.tgz", + "integrity": "sha512-EvoOtz6FIEBzE+9q253HsLCVRiK/0doEJ2HCvvqMQb3dHZrP3WlJKYtJ55CRTw4jmYomzH4wkPuCj/I3ZvpKxQ==" + }, "on-finished": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", @@ -18228,6 +18401,17 @@ "mimic-fn": "^1.0.0" } }, + "openid-client": { + "version": "5.1.10", + "resolved": "https://registry.npmjs.org/openid-client/-/openid-client-5.1.10.tgz", + "integrity": "sha512-KYAtkxTuUwTvjAmH0QMFFP3i9l0+XhP2/blct6Q9kn+DUJ/lu8/g/bI8ghSgxz9dJLm/9cpB/1uLVGTcGGY0hw==", + "requires": { + "jose": "^4.1.4", + "lru-cache": "^6.0.0", + "object-hash": "^2.0.1", + "oidc-token-hash": "^5.0.1" + } + }, "opn": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz", @@ -18983,12 +19167,30 @@ "integrity": "sha512-W1779iVHGfq0Fvh2PROhCe2QhB8mEErgqzo1wpIt36tCgChafP+hbXIhLDOM8ePJrZcFs0vkNEtdibEWVqChqw==", "dev": true }, + "preact": { + "version": "10.11.0", + "resolved": "https://registry.npmjs.org/preact/-/preact-10.11.0.tgz", + "integrity": "sha512-Fk6+vB2kb6mSJfDgODq0YDhMfl0HNtK5+Uc9QqECO4nlyPAQwCI+BKyWO//idA7ikV7o+0Fm6LQmNuQi1wXI1w==" + }, + "preact-render-to-string": { + "version": "5.2.4", + "resolved": "https://registry.npmjs.org/preact-render-to-string/-/preact-render-to-string-5.2.4.tgz", + "integrity": "sha512-iIPHb3BXUQ3Za6KNhkjN/waq11Oh+QWWtAgN3id3LrL+cszH3DYh8TxJPNQ6Aogsbu4JsqdJLBZltwPFpG6N6w==", + "requires": { + "pretty-format": "^3.8.0" + } + }, "prelude-ls": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==", "dev": true }, + "pretty-format": { + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-3.8.0.tgz", + "integrity": "sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==" + }, "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -21045,8 +21247,7 @@ "yallist": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", - "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", - "dev": true + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, "yaml": { "version": "1.10.2", diff --git a/package.json b/package.json index dd5edba..11bfcf9 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@emotion/react": "^11.10.4", "@reduxjs/toolkit": "^1.8.5", "next": "^12.3.1", + "next-auth": "^4.12.2", "react": "^18.0.0", "react-dom": "^18.0.0", "react-polymorphic-types": "^2.0.0", diff --git a/src/components/Avatar.module.scss b/src/components/Avatar.module.scss new file mode 100644 index 0000000..211d31c --- /dev/null +++ b/src/components/Avatar.module.scss @@ -0,0 +1,3 @@ +.avatar { + border-radius: 50%; +} \ No newline at end of file diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx new file mode 100644 index 0000000..1409a82 --- /dev/null +++ b/src/components/Avatar.tsx @@ -0,0 +1,19 @@ +import styles from './Avatar.module.scss'; +import Image from 'next/image'; + +type AvatarProps = { + src: string; +} + +export default function Avatar({ + src +}: AvatarProps) { + return ( + + ) +} \ No newline at end of file diff --git a/src/components/Button.module.scss b/src/components/Button.module.scss index c57187b..78fc804 100644 --- a/src/components/Button.module.scss +++ b/src/components/Button.module.scss @@ -1,5 +1,6 @@ .button { display: inline-flex; + gap: 10px; align-items: center; border-radius: 5px; border: none; diff --git a/src/components/Card.module.scss b/src/components/Card.module.scss new file mode 100644 index 0000000..542fa03 --- /dev/null +++ b/src/components/Card.module.scss @@ -0,0 +1,10 @@ +.card { + --card-background-color: var(--silvy-tertiary-color); + --card-color: var(--silvy-secondary-color); + + background: var(--card-background-color); + color: var(--card-color); + + padding: 10px; + border-radius: 5px; +} \ No newline at end of file diff --git a/src/components/Card.tsx b/src/components/Card.tsx new file mode 100644 index 0000000..f1830bb --- /dev/null +++ b/src/components/Card.tsx @@ -0,0 +1,29 @@ +import { Direction } from '../constants/components'; +import { classnames } from '../utils/classnames'; +import { Content } from './Content'; +import styles from './Card.module.scss'; + +interface CardProps { + children: React.ReactNode; + className?: string; + direction?: Direction +} + +export function Card({ + children, + className, + direction = Direction.VERTICAL, + ...extraProps +}: CardProps) { + return ( + + {children} + + ); +} \ No newline at end of file diff --git a/src/components/Content.module.scss b/src/components/Content.module.scss index a80a12b..d1bb75b 100644 --- a/src/components/Content.module.scss +++ b/src/components/Content.module.scss @@ -1,14 +1,17 @@ .content { display: flex; gap: 10px; - margin: auto; - max-width: 1480px; - height: 100%; - width: 100%; - background-color: rgba(0, 0, 0, 0.25); - border: 1px solid rgba(0, 0, 0, 0.25); - border-top: none; - border-bottom: none; + + &.main { + margin: auto; + max-width: 1480px; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, 0.25); + border: 1px solid rgba(0, 0, 0, 0.25); + border-top: none; + border-bottom: none; + } &.dir-horizontal { flex-direction: row; diff --git a/src/components/Content.tsx b/src/components/Content.tsx index 9a606bb..cfa097d 100644 --- a/src/components/Content.tsx +++ b/src/components/Content.tsx @@ -6,17 +6,20 @@ interface ContentProps { children: React.ReactNode; className?: string; direction?: Direction + main?: boolean; } export function Content({ children, className, - direction = Direction.VERTICAL + direction = Direction.VERTICAL, + main = false }: ContentProps) { return (
{children} diff --git a/src/components/Footer.module.scss b/src/components/Footer.module.scss index dc68b1a..be9b5df 100644 --- a/src/components/Footer.module.scss +++ b/src/components/Footer.module.scss @@ -1,5 +1,6 @@ .footer { height: 60px; + padding-bottom: 20px; img { margin-left: 0.5rem; diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx index 54c691b..8c5ddfd 100644 --- a/src/components/Footer.tsx +++ b/src/components/Footer.tsx @@ -5,7 +5,7 @@ import { Direction } from '../constants/components'; export function Footer() { return ( - + - +
- + ); diff --git a/src/components/Layout.module.scss b/src/components/Layout.module.scss index 5638b22..9ca0114 100644 --- a/src/components/Layout.module.scss +++ b/src/components/Layout.module.scss @@ -7,4 +7,9 @@ .content { flex: 1; padding: 20px 40px; +} + +.sticky { + position: sticky; + top: 0; } \ No newline at end of file diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 3c15ab2..105cb3b 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -2,12 +2,16 @@ import styles from './Layout.module.scss'; import {Header} from './Header'; import {Footer} from './Footer'; import { Content } from './Content'; +import { Pride } from './Pride'; export default function Layout({children}) { return (
-
- +
+ +
+
+ {children}