Skip to content

Commit

Permalink
feat: archive
Browse files Browse the repository at this point in the history
  • Loading branch information
mussida committed Oct 21, 2024
1 parent 074d750 commit 0d3cbed
Show file tree
Hide file tree
Showing 10 changed files with 187 additions and 38 deletions.
Binary file added public/assets/1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/app/app.routes.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,13 @@
import { Routes } from "@angular/router";
import { HomeComponent } from "./pages/home/home.component";
import { ArchiveComponent } from "./pages/archive/archive.component";
import { ArchiveDetailComponent } from "./pages/archive-detail/archive-detail.component";

export const routes: Routes = [
{ path: "", component: HomeComponent },
{ path: "archive", component: ArchiveComponent },
{
path: "archive/:id",
component: ArchiveDetailComponent,
},
];
70 changes: 35 additions & 35 deletions src/app/components/archive-carousel/archive-carousel.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,177 +20,177 @@
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full scursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/4.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/volpe.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/3.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/2.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/1.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/volpe.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/4.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/volpe.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/3.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/2.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/1.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/volpe.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/4.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/volpe.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/3.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/2.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/1.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/volpe.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/4.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/volpe.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/3.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/2.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/1.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/volpe.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/4.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/volpe.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/3.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/2.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/1.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/volpe.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/4.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/volpe.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/3.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/2.jpg" alt="" />
</div>
</splide-slide>
<splide-slide>
<div class="w-full h-full">
<div class="w-full h-full cursor-pointer" [routerLink]="['/archive', '1867']">
<img class="object-cover h-full w-full" src="assets/1.jpg" alt="" />
</div>
</splide-slide>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import { Component } from "@angular/core";
import { RouterLink, RouterLinkActive } from "@angular/router";
import { NgxSplideComponent, NgxSplideModule } from "ngx-splide";

@Component({
selector: "app-archive-carousel",
standalone: true,
imports: [NgxSplideModule],
imports: [NgxSplideModule, RouterLink, RouterLinkActive],
templateUrl: "./archive-carousel.component.html",
styleUrl: "./archive-carousel.component.css",
})
export class ArchiveCarouselComponent {
items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
}
Empty file.
105 changes: 105 additions & 0 deletions src/app/pages/archive-detail/archive-detail.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<div
class="background-archive-detail absolute top-0 w-screen min-h-full font-mono_lite text-2xs"
>
<div class="mt-20 relative flex flex-col text-gray-300 w-full text-xs">
<div class="w-full md:block hidden">
<div class="bg-green-700 h-4 w-full"></div>
<div class="w-full flex justify-between">
<div class="min-w-44"></div>
<div class="flex gap-4">
<button
class="bg-green-700 p-1 px-2 flex justify-between items-center min-w-64"
>
<div>BEAR</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
/>
</svg>
</div>
</button>
<button
class="bg-green-700 p-1 px-2 gap-2 flex justify-between items-center"
>
<div>2021-08</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
/>
</svg>
</div>
</button>
</div>
<div class="flex gap-4">
<button
class="bg-green-700 p-1 px-2 flex justify-between items-center min-w-24"
>
<div>14°C</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
/>
</svg>
</div>
</button>
<button
class="bg-green-700 p-1 px-2 flex justify-between items-center min-w-24"
>
<div>O</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m19.5 8.25-7.5 7.5-7.5-7.5"
/>
</svg>
</div>
</button>
</div>
</div>
</div>
</div>
<div
class="w-full mt-8 top-0 flex justify-center items-center"
>
<img src="assets/volpe.jpg" class="max-w-[60%]" alt="" />
</div>
</div>
23 changes: 23 additions & 0 deletions src/app/pages/archive-detail/archive-detail.component.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { ArchiveDetailComponent } from './archive-detail.component';

describe('ArchiveDetailComponent', () => {
let component: ArchiveDetailComponent;
let fixture: ComponentFixture<ArchiveDetailComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [ArchiveDetailComponent]
})
.compileComponents();

fixture = TestBed.createComponent(ArchiveDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
12 changes: 12 additions & 0 deletions src/app/pages/archive-detail/archive-detail.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { Component } from '@angular/core';

@Component({
selector: 'app-archive-detail',
standalone: true,
imports: [],
templateUrl: './archive-detail.component.html',
styleUrl: './archive-detail.component.css'
})
export class ArchiveDetailComponent {

}
2 changes: 1 addition & 1 deletion src/app/pages/archive/archive.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@ import { ArchiveCarouselComponent } from "../../components/archive-carousel/arch
styleUrl: "./archive.component.css",
})
export class ArchiveComponent {
items = [1, 2, 3, 4, 5, 6];
items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
}
Loading

0 comments on commit 0d3cbed

Please sign in to comment.