From ef5aaf67bd07c826ab4fac41196f56f79c83845e Mon Sep 17 00:00:00 2001 From: sanchezvem Date: Thu, 13 Nov 2025 23:00:17 +0100 Subject: [PATCH] added profil section --- .postcssrc.json | 5 +++++ package-lock.json | 27 +++++++++++++++++++++++++++ package.json | 2 ++ src/app/app.html | 12 +++++++----- src/app/app.ts | 3 ++- src/app/components/profil/profil.css | 13 +++++++++++++ src/app/components/profil/profil.html | 10 ++++++++++ src/app/components/profil/profil.ts | 25 +++++++++++++++++++++++++ src/app/interfaces/user.interface.ts | 5 +++++ 9 files changed, 96 insertions(+), 6 deletions(-) create mode 100644 .postcssrc.json create mode 100644 src/app/components/profil/profil.css create mode 100644 src/app/components/profil/profil.html create mode 100644 src/app/components/profil/profil.ts create mode 100644 src/app/interfaces/user.interface.ts diff --git a/.postcssrc.json b/.postcssrc.json new file mode 100644 index 0000000..72f908d --- /dev/null +++ b/.postcssrc.json @@ -0,0 +1,5 @@ +{ + "plugins": { + "@tailwindcss/postcss": {} + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 8f157ec..eb02be1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,8 +14,10 @@ "@angular/forms": "^20.3.0", "@angular/platform-browser": "^20.3.0", "@angular/router": "^20.3.0", + "@tailwindcss/postcss": "^4.1.17", "@tailwindcss/vite": "^4.1.17", "ng-zorro-antd": "^20.4.0", + "postcss": "^8.5.6", "rxjs": "~7.8.0", "tailwindcss": "^4.1.17", "tslib": "^2.3.0", @@ -238,6 +240,18 @@ "node": ">= 14.0.0" } }, + "node_modules/@alloc/quick-lru": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/@ampproject/remapping": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz", @@ -3680,6 +3694,19 @@ "node": ">= 10" } }, + "node_modules/@tailwindcss/postcss": { + "version": "4.1.17", + "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.17.tgz", + "integrity": "sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==", + "license": "MIT", + "dependencies": { + "@alloc/quick-lru": "^5.2.0", + "@tailwindcss/node": "4.1.17", + "@tailwindcss/oxide": "4.1.17", + "postcss": "^8.4.41", + "tailwindcss": "4.1.17" + } + }, "node_modules/@tailwindcss/vite": { "version": "4.1.17", "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.17.tgz", diff --git a/package.json b/package.json index 4ec4df3..e5a9ff1 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,10 @@ "@angular/forms": "^20.3.0", "@angular/platform-browser": "^20.3.0", "@angular/router": "^20.3.0", + "@tailwindcss/postcss": "^4.1.17", "@tailwindcss/vite": "^4.1.17", "ng-zorro-antd": "^20.4.0", + "postcss": "^8.5.6", "rxjs": "~7.8.0", "tailwindcss": "^4.1.17", "tslib": "^2.3.0", diff --git a/src/app/app.html b/src/app/app.html index 2136269..bb87337 100644 --- a/src/app/app.html +++ b/src/app/app.html @@ -5,11 +5,11 @@ @@ -70,7 +70,9 @@
- + + +
diff --git a/src/app/app.ts b/src/app/app.ts index a71301c..311370e 100644 --- a/src/app/app.ts +++ b/src/app/app.ts @@ -4,10 +4,11 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout'; import { NzMenuModule } from 'ng-zorro-antd/menu'; import {NzIconDirective} from "ng-zorro-antd/icon"; import {ModalNav} from "./components/modal-nav/modal-nav"; +import {Profil} from "./components/profil/profil"; @Component({ selector: 'app-root', - imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzIconDirective, RouterLinkActive, RouterLink, ModalNav], + imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzIconDirective, RouterLinkActive, RouterLink, ModalNav, Profil], templateUrl: './app.html', styleUrl: './app.css' }) diff --git a/src/app/components/profil/profil.css b/src/app/components/profil/profil.css new file mode 100644 index 0000000..a9e8416 --- /dev/null +++ b/src/app/components/profil/profil.css @@ -0,0 +1,13 @@ +.festive { + font-family: "Comic Sans MS", cursive; + text-shadow: 2px 2px #8C731A, -2px -2px #8C731A; + color: #fff; + font-weight: bold; +} + +.festive2 { + font-family: "Comic Sans MS", cursive; + color: #001529; + font-weight: bold; +} + diff --git a/src/app/components/profil/profil.html b/src/app/components/profil/profil.html new file mode 100644 index 0000000..1528c91 --- /dev/null +++ b/src/app/components/profil/profil.html @@ -0,0 +1,10 @@ +
+ {{ getInitial(data.name) }} +
+ +
+

{{data.name}}

+

{{data.email}}

+

{{data.fonction}}

+ +
diff --git a/src/app/components/profil/profil.ts b/src/app/components/profil/profil.ts new file mode 100644 index 0000000..3bf6e62 --- /dev/null +++ b/src/app/components/profil/profil.ts @@ -0,0 +1,25 @@ +import { Component } from '@angular/core'; +import {UserInfo} from "../../interfaces/user.interface"; +import {NzButtonComponent} from "ng-zorro-antd/button"; + +@Component({ + selector: 'app-profil', + imports: [ + NzButtonComponent + ], + templateUrl: './profil.html', + styleUrl: './profil.css', +}) +export class Profil { + data: UserInfo = + { + name: 'Mathys Sanchez Vendé', + email: 'mathys.sanchez@vende.fr', + fonction: 'admin', + }; + + getInitial(name: string): string { + if (!name || name.trim() === '') return '?'; + return name[0].toUpperCase(); + } +} diff --git a/src/app/interfaces/user.interface.ts b/src/app/interfaces/user.interface.ts new file mode 100644 index 0000000..b7feffe --- /dev/null +++ b/src/app/interfaces/user.interface.ts @@ -0,0 +1,5 @@ +export interface UserInfo { + name: string; + email: string; + fonction: string; +} \ No newline at end of file