diff --git a/app/my-loves/page.jsx b/app/my-loves/page.jsx new file mode 100644 index 0000000..f525711 --- /dev/null +++ b/app/my-loves/page.jsx @@ -0,0 +1,35 @@ +// --------------------------------------------------------------------------------------------------------------------- +//! Imports +// --------------------------------------------------------------------------------------------------------------------- + +// ------------------------------------------------- Assets & Styles --------------------------------------------------- +import './styles.scss'; +// --------------------------------------------------------------------------------------------------------------------- + +const MyLoves = () => { + const data = []; + + return ( +
+

Mes loves

+ +
+ {data.map((love, index) => ( +
+

+ Le: {love.createdAt || '20/09/2024'} +

+

+ {love.description || 'Description'} +

+
+ ))} +
+
+ ); +}; + +export default MyLoves; diff --git a/app/my-loves/styles.scss b/app/my-loves/styles.scss new file mode 100644 index 0000000..138f0ba --- /dev/null +++ b/app/my-loves/styles.scss @@ -0,0 +1,40 @@ +.myLovesContainer { + flex-grow: 1; + display: flex; + flex-direction: column; + gap: 10px; + padding: 10px; + + & > .title { + font-size: 1.5rem; + font-weight: normal; + color: #ffffff; + } + + & > .myLovesList { + display: flex; + flex-direction: column; + + & > .loveItem { + display: flex; + flex-direction: column; + gap: 5px; + padding: 10px; + background-color: #d94253; + + &:not(:last-child) { + border-bottom: 2px solid #d80135; + } + + & > .date { + font-size: 1.1rem; + color: #ffffff; + } + + & > .description { + font-weight: 300; + color: #ffffff; + } + } + } +}