user and post models

src/app/feed/feed.component.html

@@ -1,10 +1,5 @@
 <app-top-menu></app-top-menu>
 <app-side-menu></app-side-menu>
 <div id="main">
-    <app-post></app-post>
-    <app-post></app-post>
-    <app-post></app-post>
-    <app-post></app-post>
-    <app-post></app-post>
-    <app-post></app-post>
+    <app-post *ngFor="let post of posts" [post]="post"></app-post>
 </div>

src/app/feed/feed.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { Post } from '../../model/Post';
 
 @Component({
   selector: 'app-feed',
@@ -6,5 +7,50 @@ import { Component } from '@angular/core';
   styleUrl: './feed.component.scss'
 })
 export class FeedComponent {
-
+  posts: Array<Post> = new Array<Post>(
+    {
+      user: {
+        username: "Zámbó Jimmy",
+        picture: "assets/placeholder-profile-picture.png",
+        followed: true
+      },
+      content: "Bukott diák vagyok én, nem bírom el a szenvedést.",
+      image: "assets/placeholder-profile-picture.png",
+      likes: 1,
+      liked: true
+    },
+    {
+      user: {
+        username: "Zámbó Jimmy",
+        picture: "assets/placeholder-profile-picture.png",
+        followed: true
+      },
+      content: "Bukott diák vagyok én, nem bírom el a szenvedést.",
+      image: "assets/placeholder-profile-picture.png",
+      likes: 1,
+      liked: true
+    },
+    {
+      user: {
+        username: "Zámbó Jimmy",
+        picture: "assets/placeholder-profile-picture.png",
+        followed: true
+      },
+      content: "Bukott diák vagyok én, nem bírom el a szenvedést.",
+      image: "assets/placeholder-profile-picture.png",
+      likes: 1,
+      liked: true
+    },
+    {
+      user: {
+        username: "Zámbó Jimmy",
+        picture: "assets/placeholder-profile-picture.png",
+        followed: true
+      },
+      content: "Bukott diák vagyok én, nem bírom el a szenvedést.",
+      image: "assets/placeholder-profile-picture.png",
+      likes: 1,
+      liked: true
+    },
+  );
 }

src/app/feed/feed.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
+import { CommonModule, NgFor } from '@angular/common';
 
 import { FeedRoutingModule } from './feed-routing.module';
 import { FeedComponent } from './feed.component';
@@ -16,7 +16,8 @@ import { PostComponent } from '../shared/views/post/post.component';
     FeedRoutingModule,
     TopMenuComponent,
     SideMenuComponent,
-    PostComponent
+    PostComponent,
+    NgFor
   ]
 })
 export class FeedModule { }

src/app/shared/side-menu/side-menu.component.scss

@@ -1,6 +1,7 @@
 .side-menu {
     display: block;
     position: fixed;
+    transform: translateY(45px);
     width: 100px;
     height: 100vh;
     margin: 0;

src/app/shared/top-menu/top-menu.component.scss

@@ -8,6 +8,12 @@ menu {
     display: flex;
     align-items: center;
 
+    position: fixed;
+    z-index: 100;
+    width: 100%;
+
+    // transform: translateY(-10px);
+
     background: var(--highlight-color);
 }
 

src/app/shared/views/large-user/large-user.component.html

@@ -0,0 +1,6 @@
+<div class="user-container outline">
+    <div [routerLink]="'/user/'+user?.username">
+        <img [src]="user?.picture" class="outline"> <span>{{user?.username}}</span>
+    </div>
+    <span [classList]="user?.followed ? 'follow followed' : 'follow'"></span>
+</div>

src/app/shared/views/large-user/large-user.component.scss

@@ -0,0 +1,44 @@
+.user-container {
+    width: max(50%, 250px);
+    margin: 10px auto;
+
+
+
+    div {
+        padding: 0 10px;
+
+        img {
+            display: block;
+            margin: 20px auto;
+            width: max(200px, 70%);
+            border-radius: 50%;
+            aspect-ratio: 1;
+        }
+        
+        span {
+            display: block;
+            width: 100%;
+            text-align: center;
+        }
+
+        span::before {
+            content: '@';
+        }
+    }
+    
+    .follow {
+        display: block;
+        margin: 10px auto;
+        width: 10px;
+        aspect-ratio: 1;
+    }
+
+    .follow::before {
+        content: "👨‍👦";
+        filter: saturate(0);
+    }
+
+    .follow.followed::before {
+        filter: saturate(1) !important;
+    }
+}

src/app/shared/views/large-user/large-user.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LargeUserComponent } from './large-user.component';
+
+describe('LargeUserComponent', () => {
+  let component: LargeUserComponent;
+  let fixture: ComponentFixture<LargeUserComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LargeUserComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(LargeUserComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/views/large-user/large-user.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { User } from '../../../../model/User';
+import { RouterModule } from '@angular/router';
+
+@Component({
+    selector: 'app-large-user',
+    standalone: true,
+    templateUrl: './large-user.component.html',
+    styleUrl: './large-user.component.scss',
+    imports: [RouterModule]
+})
+export class LargeUserComponent {
+  @Input() user: User | undefined;
+}

src/app/shared/views/post/post.component.html

@@ -1,5 +1,6 @@
 <div class="post-container outline">
-    <app-small-user></app-small-user>
-    <div>Post content blblblblblblbllblb</div>
-    <img src="assets/placeholder-profile-picture.png" alt="">
+    <app-small-user [user]="post?.user"></app-small-user>
+    <div>{{post?.content}}</div>
+    <img *ngIf="post?.image" [src]="post?.image" alt="">
+    <span [classList]="post?.liked ?  'liked likes' : 'likes'">{{post?.likes}}</span>
 </div>

src/app/shared/views/post/post.component.scss

@@ -12,5 +12,21 @@
         display: block;
         border-radius: 4px;
     }
+
+    .likes {
+        display: block;
+        margin: 10px auto;
+        width: 10px;
+        aspect-ratio: 1;
+    }
+
+    .likes::before {
+        content: "❤️";
+        filter: saturate(0);
+    }
+
+    .likes.liked::before {
+        filter: saturate(1) !important;
+    }
 }
 

src/app/shared/views/post/post.component.ts

@@ -1,14 +1,16 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 import { SmallUserComponent } from '../small-user/small-user.component';
+import { Post } from '../../../../model/Post';
+import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-post',
   standalone: true,
-  imports: [SmallUserComponent],
+  imports: [SmallUserComponent, NgIf],
   templateUrl: './post.component.html',
   styleUrl: './post.component.scss'
 })
 export class PostComponent {
-
+  @Input() post: Post | undefined;
 }

src/app/shared/views/small-user/small-user.component.html

@@ -1,3 +1,3 @@
-<div>
-    <img src="assets/placeholder-profile-picture.png" class="outline"> <span>Username</span>
+<div [routerLink]="'/user/'+user?.username">
+    <img [src]="user?.picture" class="outline"> <span>{{user?.username}}</span>
 </div>

src/app/shared/views/small-user/small-user.component.ts

@@ -1,12 +1,14 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
+import { User } from '../../../../model/User';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-small-user',
   standalone: true,
-  imports: [],
+  imports: [RouterModule],
   templateUrl: './small-user.component.html',
   styleUrl: './small-user.component.scss'
 })
 export class SmallUserComponent {
-
+  @Input() user: User | undefined;
 }

src/app/user/user.component.html

@@ -1 +1,6 @@
-<p>user works!</p>
+<app-top-menu></app-top-menu>
+<app-side-menu></app-side-menu>
+<div id="main">
+    <app-large-user [user]="exampleUser"></app-large-user>
+    <app-post *ngFor="let post of posts" [post]="post"></app-post>
+</div>

src/app/user/user.component.ts

@@ -1,4 +1,6 @@
 import { Component } from '@angular/core';
+import { Post } from '../../model/Post';
+import { User } from '../../model/User';
 
 @Component({
   selector: 'app-user',
@@ -6,5 +8,40 @@ import { Component } from '@angular/core';
   styleUrl: './user.component.scss'
 })
 export class UserComponent {
-
+  exampleUser: User = {
+    username: "Zámbó Jimmy",
+    picture: "assets/placeholder-profile-picture.png",
+    followed: true
+  }
+
+  posts: Array<Post> = new Array<Post>(
+    {
+      user: this.exampleUser,
+      content: "Bukott diák vagyok én, nem bírom el a szenvedést.",
+      image: "assets/placeholder-profile-picture.png",
+      likes: 1,
+      liked: true
+    },
+    {
+      user: this.exampleUser,
+      content: "Bukott diák vagyok én, nem bírom el a szenvedést.",
+      image: "assets/placeholder-profile-picture.png",
+      likes: 1,
+      liked: true
+    },
+    {
+      user: this.exampleUser,
+      content: "Bukott diák vagyok én, nem bírom el a szenvedést.",
+      image: "assets/placeholder-profile-picture.png",
+      likes: 1,
+      liked: true
+    },
+    {
+      user: this.exampleUser,
+      content: "Bukott diák vagyok én, nem bírom el a szenvedést.",
+      image: "assets/placeholder-profile-picture.png",
+      likes: 1,
+      liked: true
+    },
+  );
 }

src/app/user/user.module.ts

@@ -3,7 +3,10 @@ import { CommonModule } from '@angular/common';
 
 import { UserRoutingModule } from './user-routing.module';
 import { UserComponent } from './user.component';
-
+import { TopMenuComponent } from '../shared/top-menu/top-menu.component';
+import { SideMenuComponent } from '../shared/side-menu/side-menu.component';
+import { PostComponent } from '../shared/views/post/post.component';
+import { LargeUserComponent } from '../shared/views/large-user/large-user.component';
 
 @NgModule({
   declarations: [
@@ -11,7 +14,11 @@ import { UserComponent } from './user.component';
   ],
   imports: [
     CommonModule,
-    UserRoutingModule
+    UserRoutingModule,
+    TopMenuComponent,
+    SideMenuComponent,
+    PostComponent,
+    LargeUserComponent
   ]
 })
 export class UserModule { }

src/model/Post.ts

@@ -0,0 +1,9 @@
+import { User } from "./User";
+
+export interface Post {
+    user: User;
+    content: String;
+    image: String;
+    likes: Number;
+    liked: Boolean;
+}

src/model/User.ts

@@ -0,0 +1,5 @@
+export interface User {
+    username: String;
+    picture: String;
+    followed: Boolean;
+}

src/styles.scss

@@ -27,5 +27,6 @@ body {
 
 #main {
     transform: translateX(100px);
+    padding-top: 50px;
     width: calc(100vw - 100px);
 }