Merge pull request #123 from deinsoftware/mrredu/feat/events-page

feat(app): working in events page

.vscode/settings.json

@@ -153,7 +153,7 @@
   "explorer.fileNesting.patterns": {
     "*.ts": "$(capture).*.ts, $(capture).d.ts.map, $(capture).*.ts, $(capture)_*.js, $(capture)_*.ts, $(capture)*.snap",
     "*.tsx": "$(capture).ts, $(capture).*.ts, $(capture).*.css, $(capture).*.tsx, $(capture)_*.ts, $(capture)_*.tsx, $(capture)*.snap",
-    "next.config.*": "*.env, .env.*, .envrc, .postcssrc*, env.d.ts, next-env.d.ts, postcss.config.*, tsconfig.*, vitest.config.*",
+    "next.config.*": "*.env, .env.*, .envrc, .postcssrc*, env.d.ts, next-env.d.ts, postcss.config.*, tsconfig.*, vitest.config.*, i18n.ts",
     "package.json": ".eslint*, .prettier*, .stylelint*, package-lock.json"
   },
   "html.autoClosingTags": true,

package.json

@@ -29,7 +29,7 @@
   "dependencies": {
     "@prisma/client": "5.5.2",
     "@types/node": "20.8.10",
-    "@types/react": "18.2.33",
+    "@types/react": "18.2.34",
     "@types/react-dom": "18.2.14",
     "eslint": "8.52.0",
     "eslint-config-next": "14.0.1",
@@ -47,8 +47,8 @@
   },
   "swpm": "pnpm",
   "volta": {
-    "node": "18.17.0",
-    "pnpm": "8.7.4"
+    "node": "20.9.0",
+    "pnpm": "8.10.2"
   },
   "devDependencies": {
     "@commitlint/cli": "18.2.0",

src/app/[locale]/components/atoms/auth/LoginButton.tsx

@@ -12,8 +12,6 @@ import {
   resetCookieConsentValue,
 } from 'react-cookie-consent'
 
-import { useEffect, useState } from 'react'
-
 import Button from '@/components/atoms/ui/Button'
 import { sizeAvatar } from '@/libs/constants'
 

src/app/[locale]/components/molecules/user-events/UserEvents.module.css

@@ -0,0 +1,160 @@
+.container {
+    display: flex;
+
+    border: 1.5px solid var(--color-darkgray-800);
+    border-radius: 10px;
+
+
+    & .aside {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        justify-content: center;
+        align-items: center;
+        min-width: 110px;
+        padding: 16px;
+
+        border-right: 1.5px solid var(--color-darkgray-800);
+
+        & .date {
+            font-size: 14px;
+            text-align: center;
+            text-wrap: balance;
+        }
+
+        & .icons {
+            display: none;
+            grid-template-columns: repeat(2, 1fr);
+            grid-template-rows: repeat(2, auto);
+            gap: 8px;
+
+            &.is-open {
+                display: grid;
+            }
+
+            & .icon {
+                display: grid;
+                place-items: center;
+                padding: 4px;
+                border-radius: 8px;
+                cursor: pointer;
+                background-color: var(--color-darkgray-800);
+
+                &:hover {
+                    background-color: var(--color-darkgray-900);
+                }
+            }
+        }
+    }
+
+
+    & .body {
+        display: flex;
+        justify-content: space-between;
+        padding: 16px 32px;
+        width: 100%;
+
+        overflow: hidden;
+
+        & .content {
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+
+            & .title-link {
+                text-decoration: none;
+
+                & .title {
+                    font-size: 18px;
+                    font-weight: bold;
+                    color: var(--color-purple-500);
+
+                    &:hover {
+                        color: var(--color-purple-700);
+                    }
+                }
+            }
+
+            & .location {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+
+                color: var(--color-gray-500);
+
+                & .location-text {
+                    font-size: 14px;
+                }
+            }
+
+            & .description-container {
+                display: none;
+
+                &.is-open {
+                    display: block;
+                }
+
+                & .description {
+                    font-size: var(--font-size-sm);
+                }
+            }
+
+            & .link-container {
+                display: flex;
+                gap: 4px;
+
+                & .link {
+                    font-size: 14px;
+                    color: var(--color-purple-500);
+                    text-decoration: none;
+
+                    &:hover {
+                        text-decoration: underline;
+                    }
+                }
+            }
+        }
+
+        & .button-is-open {
+            display: flex;
+            align-items: flex-start;
+            padding: 0 8px;
+
+            &.is-open {
+                transform: rotate(180deg);
+                align-items: flex-end;
+            }
+        }
+
+    }
+}
+
+@media (width < 520px) {
+    .container {
+        display: grid;
+        grid-template-rows: auto, 1fr;
+
+        & .aside {
+            max-width: 100%;
+            padding: 8px;
+            border-right: none;
+            border-bottom: 1.5px solid var(--color-darkgray-800);
+
+            & .icons {
+                display: none;
+                grid-template-columns: repeat(4, 1fr);
+                grid-template-rows: none;
+                gap: 12px;
+
+                &.is-open {
+                    display: grid;
+                }
+            }
+
+        }
+
+        & .body {
+            padding: 16px;
+        }
+    }
+}