pixelperfectionist/client/pages/Problems.svelte

<script>
  import { push, link } from 'svelte-spa-router';
  import Validator from 'Validator';
  import { onMount } from 'svelte';
  import Layout from '$/client/Layout.svelte';
  import Blockstart from '$/client/components/Blockstart.svelte';
  import Calendar from '$/client/components/Calendar.svelte';
  import Icon from '$/client/components/Icon.svelte';
  import api from "$/client/api.js";

  let problem_set;
  let companies_list = [];

  onMount(async () => {
    const [status, data] = await api.get("/api/problems");

    if(status === 200) {
      console.log("STATUS", status, "DATA", data);
      problem_set = data.problems;
      companies_list = data.companies;
    } else {
      console.error("Invalid response", status, data);
    }
  });
</script>

<style>
  sidebar {
    box-shadow: unset;
    max-width: 300px;
    min-width: 300px;
    width: 300px;
    gap: 20px;
  }

  card {
    border: 1px solid var(--value8);
  }

  card * {
    background-color: var(--value9);
  }

  card > top,
  card > bottom {
    border: unset;
    text-align: center;
  }

  table#problem-list {
    border: none;
  }

  table#problem-list > tr:nth-child(even) {
    background-color: var(--value8);
  }

  table#problem-list a {
    text-decoration: none;
  }

  table#problem-list a:hover {
    text-decoration: underline;
  }

  company {
    font-size: 0.8em;
    border-radius: 20px;
    background-color: var(--value8);
    margin-bottom: 4px;
    padding-left: 10px;
  }

  company count {
    background-color: var(--yellow);
    border-radius: 20px;
    padding: 2px;
    font-size: 0.7em;
  }

  button#pick-one {
    font-size: 0.9em;
    white-space: nowrap;
  }
</style>

<Layout centered={ true }>
  <Blockstart>
    <block class="horizontal">

    <left>
        <grid style="--cols: 2;">
            <shape style="--gap: 10px; --h: 200px; --w: 200px;">Product</shape> 
            <shape style="--gap: 10px; --h: 200px; --w: 200px;">Product</shape> 
            <shape style="--gap: 10px; --h: 200px; --w: 200px;">Product</shape> 
            <shape style="--gap: 10px; --h: 200px; --w: 200px;">Product</shape> 
        </grid>

        <hr>

        <block style="--value: 7; --h: 300px;">
          <h1>Junk</h1>
        </block>

        <hr>

        <block class="horizontal">
          <input type="text" placeholder="Search">

          <button id="pick-one">Pick One</button>
        </block>
        <table id="problem-list">
          <tr><th>Title</th><th>Solution</th><th>Acceptance</th></tr>
          {#if problem_set}
          {#each problem_set as problem}
            <tr>
              <td><a use:link href="/problem/{problem.id}/">{problem.title}</a></td>
              <td><Icon name={problem.solution} /></td>
              <td>{problem.acceptance}</td>
            </tr>
          {/each}
          {/if}
        </table>
      </left>
      <right>
        <sidebar>
        <tile>
          <left><Icon name="calendar"/></left><middle>Study Plan</middle><right>&gt;</right>
        </tile>

        <card>
          <top><h6>Featured Lists</h6></top>
          <middle>
            <tile>
              <left><Icon name="laptop" size="24" /></left><middle>Study Plan</middle><right>&gt;</right>
            </tile>
            <tile>
              <left><Icon name="calendar" size="24" /></left><middle>Study Plan</middle><right>&gt;</right>
            </tile>
            <tile>
              <left><Icon name="facebook" size="24" /></left><middle>Study Plan</middle><right>&gt;</right>
            </tile>
          </middle>
          <bottom>
            <a href="/">Show More</a>
          </bottom>
        </card>

        <Calendar/>

        <card>
          <top><h6>Companies</h6></top>
          <middle>
            {#each companies_list as company}
              <company>{company.name} <count>{company.count}</count></company>
            {/each}
          </middle>
          <bottom>
            <a href="/">Show More</a>
          </bottom>
        </card>

        </sidebar>
      </right>
    </block>
  </Blockstart>
</Layout>