3 files changed, 120 insertions, 0 deletions
diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css
new file mode 100644
index 0000000..572cc99
--- /dev/null
+++ b/src/app/components/post-attachment/post-attachment.component.css
@@ -0,0 +1,75 @@
+/* Attachment */
+
+.attachment {
+  border: 2px solid black;
+  border-top: 0;
+  border-radius: 0 0 .6em .6em;
+  padding: .4em;
+  padding-top: 1em;
+  margin-top: calc(-0.8em - 2px);
+}
+
+.clickable {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+.clickable:hover {
+  cursor: pointer;
+}
+
+.attachment-name {
+  flex: 1;
+}
+
+.attachment-type {
+  margin-left: .2em;
+}
+
+/* Full attachment */
+
+.show-full-attachment {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: #000000AF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+}
+
+.show-full-attachment > * {
+  max-height: 100vh;
+  max-width: 100vw;
+}
+
+.attachment-download {
+  max-width: 420px !important;
+  margin: 0 .4em;
+  text-decoration: none;
+  color: white;
+  border-color: white;
+  background-color: black;
+}
+
+.attachment-download:hover {
+  background-color: white;
+  color: var(--focus-color);
+}
+
+.close {
+  position: fixed;
+  top: .2em;
+  right: .2em;
+  font-size: 2em;
+  color: whitesmoke;
+}
+
+.close:hover {
+  color: var(--failure);
+  cursor: pointer;
+}
diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html
new file mode 100644
index 0000000..4d381d1
--- /dev/null
+++ b/src/app/components/post-attachment/post-attachment.component.html
@@ -0,0 +1,18 @@
+<div class="attachment">
+	<div class="clickable" (click)="toggleShowFull()">
+		<div class="attachment-name">
+			{{ fileName }}
+		</div>
+		<div class="attachment-type">
+			{{ fileType }}
+		</div>
+	</div>
+</div>
+
+<div class="show-full-attachment" *ngIf="showFull" (click)="toggleShowFull()">
+	<img class="attachment-img" *ngIf="isImage" src="{{paramURL}}">
+	<a class="attachment-download submit-btn" *ngIf="!isImage" href="{{paramURL}}">Download attachment</a>
+	<div class="close">
+		☒
+	</div>
+</div>
diff --git a/src/app/components/post-attachment/post-attachment.component.ts b/src/app/components/post-attachment/post-attachment.component.ts
new file mode 100644
index 0000000..1d00def
--- /dev/null
+++ b/src/app/components/post-attachment/post-attachment.component.ts
@@ -0,0 +1,27 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-post-attachment',
+  templateUrl: './post-attachment.component.html',
+  styleUrls: ['./post-attachment.component.css']
+})
+export class PostAttachmentComponent implements OnInit {
+  @Input() paramURL: string;
+  public isImage = false;
+  public showFull = false;
+  public fileName: string;
+  public fileType: string;
+
+  constructor()
+  { }
+
+  ngOnInit(): void {
+    this.isImage = this.paramURL.includes('image') && !this.paramURL.endsWith('pdf');
+    this.fileType = this.isImage ? 'img' : 'raw';
+    this.fileName = this.paramURL.match('(?<=\/)(?:.(?!\/))+$')?.pop() ?? 'Attachment';
+  }
+
+  toggleShowFull(): void {
+    this.showFull = !this.showFull;
+  }
+}