<template>
    <main class="min-w-screen bg-green-500 text-green-700 text-xs min-h-screen flex items-center justify-center">
    <div class="bg-green-700 p-3 rounded-lg border-2 border-t-green-600 border-x-green-800 border-b-green-900 shadow-lg">
      <div class="p-1 bg-green-900 rounded overflow-hidden">
        <div class="flex space-x-[2px]">
          <div
             v-for="key in keys"
             v-if="key.row === '1'"
             :key="key.label"
             class="h-10 min-w-10"
             :class="[key.flexGrow ? 'flex-grow' : '', '']">
            <button 
              class="overflow-hidden relative h-10 px-1 rounded flex justify-center shadow align-center bg-gradient-to-b from-green-50 to-green-400 pt-[2px] transition-all duration-75 top-0 active:top-1"
              :class="'w-' + [ key.width ]">
              <div class="w-full h-10 absolute -top-[2px] left-0 flex items-center justify-between blur-sm">
                <div class="h-8 w-8 bg-green-200 flex-shrink-0 rotate-45 -left-5 relative"></div>
                <div class="h-8 w-8 bg-green-200 flex-shrink-0 rotate-45 -right-5 relative"></div>
              </div>
              <div class="relative h-7 border border-green-100 flex-grow bg-gradient-to-b from-green-200 to-green-50 flex pt-1 pl-1 rounded">
                <span class="leading-none">{{ key.label }}</span>
              </div>
            </button>
          </div>
        </div>
        <div class="flex space-x-[2px] mt-[2px]">
          <div
             v-for="key in keys"
             v-if="key.row === '2'"
             :key="key.label"
             class="h-10 min-w-10"
             :class="[key.flexGrow ? 'flex-grow' : '', '']">
            <button 
              class="overflow-hidden relative h-10 px-1 rounded flex justify-center shadow align-center bg-gradient-to-b from-green-50 to-green-400 pt-[2px] transition-all duration-75 top-0 active:top-1"
              :class="'w-' + [ key.width ]">
              <div class="w-full h-10 absolute -top-[2px] left-0 flex items-center justify-between blur-sm">
                <div class="h-8 w-8 bg-green-200 flex-shrink-0 rotate-45 -left-5 relative"></div>
                <div class="h-8 w-8 bg-green-200 flex-shrink-0 rotate-45 -right-5 relative"></div>
              </div>
              <div class="relative h-7 border border-green-100 flex-grow bg-gradient-to-b from-green-200 to-green-50 flex pt-1 pl-1 rounded">
                <span class="leading-none">{{ key.label }}</span>
                </div>
            </button>
          </div>
        </div>
        <div class="flex space-x-[2px] mt-[2px]">
          <div
             v-for="key in keys"
             v-if="key.row === '3'"
             :key="key.label"
             class="h-10 min-w-10"
             :class="[key.flexGrow ? 'flex-grow' : '', '']">
            <button 
              class="overflow-hidden relative h-10 px-1 rounded flex justify-center shadow align-center bg-gradient-to-b from-green-50 to-green-400 pt-[2px] transition-all duration-75 top-0 active:top-1"
              :class="'w-' + [ key.width ]">
              <div class="w-full h-10 absolute -top-[2px] left-0 flex items-center justify-between blur-sm">
                <div class="h-8 w-8 bg-green-200 flex-shrink-0 rotate-45 -left-5 relative"></div>
                <div class="h-8 w-8 bg-green-200 flex-shrink-0 rotate-45 -right-5 relative"></div>
              </div>
              <div class="relative h-7 border border-green-100 flex-grow bg-gradient-to-b from-green-200 to-green-50 flex pt-1 pl-1 rounded">
                <span class="leading-none">{{ key.label }}</span>
                </div>
            </button>
          </div>
        </div>
        <div class="flex space-x-[2px] mt-[2px]">
          <div
             v-for="key in keys"
             v-if="key.row === '4'"
             :key="key.label"
             class="h-10 min-w-10"
             :class="[key.flexGrow ? 'flex-grow' : '', '']">
            <button 
              class="overflow-hidden relative h-10 px-1 rounded flex justify-center shadow align-center bg-gradient-to-b from-green-50 to-green-400 pt-[2px] transition-all duration-75 top-0 active:top-1"
              :class="'w-' + [ key.width ]">
              <div class="w-full h-10 absolute -top-[2px] left-0 flex items-center justify-between blur-sm">
                <div class="h-8 w-8 bg-green-200 flex-shrink-0 rotate-45 -left-5 relative"></div>
                <div class="h-8 w-8 bg-green-200 flex-shrink-0 rotate-45 -right-5 relative"></div>
              </div>
              <div class="relative h-7 border border-green-100 flex-grow bg-gradient-to-b from-green-200 to-green-50 flex pt-1 pl-1 rounded">
                <span class="leading-none">{{ key.label }}</span>
                </div>
            </button>
          </div>
        </div>
        <div class="flex space-x-[2px] mt-[2px]">
          <div
             v-for="key in keys"
             v-if="key.row === '5'"
             :key="key.label"
             class="h-10 min-w-10"
             :class="[key.flexGrow ? 'flex-grow' : '', '']">
            <button 
              class="overflow-hidden relative h-10 px-1 rounded flex justify-center shadow align-center bg-gradient-to-b from-green-50 to-green-400 pt-[2px] transition-all duration-75 top-0 active:top-1"
              :class="'w-' + [ key.width ]">
              <div class="w-full h-10 absolute -top-[2px] left-0 flex items-center justify-between blur-sm">
                <div class="h-8 w-8 bg-green-200 flex-shrink-0 rotate-45 -left-5 relative"></div>
                <div class="h-8 w-8 bg-green-200 flex-shrink-0 rotate-45 -right-5 relative"></div>
              </div>
              <div class="relative h-7 border border-green-100 flex-grow bg-gradient-to-b from-green-200 to-green-50 flex pt-1 pl-1 rounded">
                <span class="leading-none">{{ key.label }}</span>
                </div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script>
export default {
  data() {
    return {
    keys: [
      {label: '`', width: '12', row: '1'},
      {label: '1', width: '10', row: '1'},
      {label: '2', width: '10', row: '1'},
      {label: '3', width: '10', row: '1'},
      {label: '4', width: '10', row: '1'},
      {label: '5', width: '10', row: '1'},
      {label: '6', width: '10', row: '1'},
      {label: '7', width: '10', row: '1'},
      {label: '8', width: '10', row: '1'},
      {label: '9', width: '10', row: '1'},
      {label: '0', width: '10', row: '1'},
      {label: '-', width: '10', row: '1'},
      {label: '=', width: 'full', row: '1', flexGrow: true},
      {label: 'delete', width: 'full', row: '1', flexGrow: true},
      {label: 'tab', width: '14', row: '2',},
      {label: 'Q', width: '10', row: '2',},
      {label: 'W', width: '10', row: '2',},
      {label: 'E', width: '10', row: '2',},
      {label: 'R', width: '10', row: '2',},
      {label: 'T', width: '10', row: '2',},
      {label: 'Y', width: '10', row: '2',},
      {label: 'U', width: '10', row: '2',},
      {label: 'I', width: '10', row: '2',},
      {label: 'O', width: '10', row: '2',},
      {label: 'P', width: '10', row: '2',},
      {label: '\[', width: '12', row: '2',},
      {label: '\]', width: '12', row: '2',},
      {label: '|', width: 'full', row: '2', flexGrow: true},
      {label: 'caps', width: '16', row: '3'},
      {label: 'A', width: '10', row: '3'},
      {label: 'S', width: '10', row: '3'},
      {label: 'D', width: '10', row: '3'},
      {label: 'F', width: '10', row: '3'},
      {label: 'G', width: '10', row: '3'},
      {label: 'H', width: '10', row: '3'},
      {label: 'J', width: '10', row: '3'},
      {label: 'K', width: '10', row: '3'},
      {label: 'L', width: '10', row: '3'},
      {label: ';', width: '10', row: '3'},
      {label: '\'', width: '10', row: '3'},
      {label: 'return', width: 'full', row: '3', flexGrow: true},
      {label: 'shift', width: '20', row: '4'},
      {label: 'Z', width: '10', row: '4'},
      {label: 'X', width: '10', row: '4'},
      {label: 'C', width: '10', row: '4'},
      {label: 'V', width: '10', row: '4'},
      {label: 'B', width: '10', row: '4'},
      {label: 'N', width: '10', row: '4'},
      {label: 'M', width: '10', row: '4'},
      {label: ',', width: '10', row: '4'},
      {label: '.', width: '10', row: '4'},
      {label: '/', width: '10', row: '4'},
      {label: 'shift', width: '16', row: '4', flexGrow: true},
      {label: '▲', width: '10', row: '4'},
      {label: '', width: '10', row: '4'},
      {label: 'fn', width: '10', row: '5'},
      {label: 'ctrl', width: '10', row: '5'},
      {label: 'opt', width: '10', row: '5'},
      {label: 'cmd', width: '10', row: '5'},
      {label: '', width: 'full', row: '5', flexGrow: true},
      {label: 'cmd', width: '10', row: '5'},
      {label: 'opt', width: '10', row: '5'},
      {label: '◄', width: '10', row: '5'},
      {label: '▼', width: '10', row: '5'},
      {label: '►', width: '10', row: '5'}
    ]
    };
  },
  methods: {
    doSomething() {
      alert('Hello!');
    }
  }
};
</script>

<style>

</style>