feat(list): add overview and a little bit of styling

apps/demo-app/src/app/app.routes.ts

@@ -1,3 +1,17 @@
 import { Route } from '@angular/router';
 
-export const appRoutes: Route[] = [];
+export const appRoutes: Route[] = [
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'overview',
+  },
+  {
+    path: 'overview',
+    loadComponent: () =>
+      import('./pages/overview/overview.component').then(
+        (m) => m.OverviewComponent
+      ),
+  },
+  // TODO: Add routes for the other samples
+];

apps/demo-app/src/app/components/card/card.component.css

@@ -0,0 +1,44 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+    border: 1px solid;
+    background: rgb(255, 255, 255);
+    color: rgb(0, 0, 0);
+    border-radius: 8px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+}
+
+.sk-title {
+    font-size: 1.2rem;
+    line-height: 2rem;
+    width: 100%;
+    border-bottom: 1px rgb(0, 0, 0) solid;
+}
+
+.sk-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1rem;
+
+    a {
+        -webkit-appearance: none;
+        text-decoration: none;
+        padding: 0.5rem 1rem;
+        border-radius: 100svh;
+        background: rgb(252, 0, 84);
+        color: rgb(255, 255, 255);
+        transition: background 0.3s ease-in-out;
+
+        @media (hover) {
+            &:hover {
+                background: rgba(255, 0, 84, 0.6);
+            }
+        }
+
+        &:active {
+            background: rgba(255, 0, 84, 0.8);
+        }
+    }
+}

apps/demo-app/src/app/components/card/card.component.html

@@ -0,0 +1,5 @@
+<div class="sk-title">{{ label() }}</div>
+<ng-content></ng-content>
+<div class="sk-actions">
+  <a [routerLink]="link()">View Component</a>
+</div>

apps/demo-app/src/app/components/card/card.component.spec.ts

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

apps/demo-app/src/app/components/card/card.component.ts

@@ -0,0 +1,15 @@
+import { Component, input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-card',
+  standalone: true,
+  imports: [CommonModule, RouterLink],
+  templateUrl: './card.component.html',
+  styleUrl: './card.component.css',
+})
+export class CardComponent {
+  link = input.required<string>();
+  label = input.required<string>();
+}

apps/demo-app/src/app/components/top-bar/top-bar.component.html

@@ -0,0 +1,4 @@
+<img src="../../../assets/qupaya_logo_small.png" alt="">
+<div class="sk-container">
+  <ng-content></ng-content>
+</div>

apps/demo-app/src/app/components/top-bar/top-bar.component.scss

@@ -0,0 +1,17 @@
+:host {
+
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 1rem;
+  height: var(--sk-top-bar-height);
+}
+
+.sk-container {
+  flex: 1;
+}
+
+img {
+  justify-self: flex-start;
+  height: 42px;
+}

apps/demo-app/src/app/components/top-bar/top-bar.component.spec.ts

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

apps/demo-app/src/app/components/top-bar/top-bar.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-top-bar',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './top-bar.component.html',
+  styleUrl: './top-bar.component.scss',
+})
+export class TopBarComponent {}

apps/demo-app/src/app/pages/app/app.component.css

@@ -0,0 +1,11 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.sk-content {
+    width: 100%;
+    max-width: max(400px, 70vw);
+}

apps/demo-app/src/app/pages/app/app.component.html

@@ -0,0 +1,6 @@
+<div class="sk-content">
+  <app-top-bar>
+    ng-sketch from qupaya :-)
+  </app-top-bar>
+  <router-outlet></router-outlet>
+</div>

apps/demo-app/src/app/app.component.ts → apps/demo-app/src/app/pages/app/app.component.ts

@@ -1,13 +1,13 @@
 import { Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { SketchComponent } from '@qupaya/sketch';
+import { TopBarComponent } from '../../components/top-bar/top-bar.component';
 
 @Component({
   standalone: true,
-  imports: [RouterModule, SketchComponent],
+  imports: [RouterModule, SketchComponent, TopBarComponent],
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
 })
-export class AppComponent {
-}
+export class AppComponent {}

apps/demo-app/src/app/pages/overview/overview.component.css

@@ -0,0 +1,6 @@
+:host {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+    gap: 1rem;
+    padding: 1rem;
+}

apps/demo-app/src/app/pages/overview/overview.component.html

@@ -0,0 +1,7 @@
+<app-card label="ListComponent" link="/list-sample/1">
+  <span>Lorem ipsum dolor...</span>
+</app-card>
+<app-card label="WidgetComponent" link="/widget-sample/1">
+  <span>Lorem ipsum dolor...</span>
+</app-card>
+

apps/demo-app/src/app/pages/overview/overview.component.spec.ts

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

apps/demo-app/src/app/pages/overview/overview.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { CardComponent } from '../../components/card/card.component';
+
+@Component({
+  selector: 'app-overview',
+  standalone: true,
+  imports: [CommonModule, RouterLink, CardComponent],
+  templateUrl: './overview.component.html',
+  styleUrl: './overview.component.css',
+})
+export class OverviewComponent {}

apps/demo-app/src/index.html

@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>sketch</title>
-    <base href="/" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
-  </head>
-  <body>
-    <app-root></app-root>
-  </body>
+<head>
+  <meta charset="utf-8" />
+  <title>sketch</title>
+  <base href="/" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+  <link rel="icon" type="image/x-icon" href="favicon.ico" />
+</head>
+<body>
+<app-root></app-root>
+</body>
 </html>

apps/demo-app/src/main.ts

@@ -1,6 +1,6 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';
+import { AppComponent } from './app/pages/app/app.component';
 
 bootstrapApplication(AppComponent, appConfig).catch((err) =>
   console.error(err)

apps/demo-app/src/styles.css

@@ -1 +1,21 @@
 /* You can add global styles to this file, and also import other style files */
+:root {
+    --sk-top-bar-height: 84px;
+    --sk-font-family: Montserrat, 'Helevetika Neue', sans-serif;
+}
+
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+}
+
+html, body {
+    font-family: var(--sk-font-family);
+    color: rgb(255, 255, 255);
+    background: rgb(59, 61, 64);
+    background: linear-gradient(149deg, rgba(59, 61, 64, 1) 0%, rgba(252, 0, 84, 1) 100%);
+    background-repeat: no-repeat;
+    height: 100svh;
+    overflow: hidden;
+}