brutalism design

new-client/src/shared/components/ui/ToBottom.vue

@@ -0,0 +1,38 @@
+<template>
+  <button class="chad-to-bottom">
+    <ArrowDown />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ArrowDown } from '@lucide/vue'
+
+defineOptions({
+  name: 'ChadToBottom',
+})
+</script>
+
+<style lang="scss">
+.chad-to-bottom {
+  cursor: pointer;
+  width: 40px;
+  aspect-ratio: 1;
+  text-align: center;
+  line-height: 40px;
+  outline: var(--border-w) solid var(--ink);
+  outline-offset: calc(var(--border-w) * -1);
+  border: none;
+  background-color: var(--grey-1);
+  padding: 0;
+  box-shadow: var(--shadow-sm);
+
+  &:hover,
+  &:focus {
+    background-color: var(--grey-2);
+  }
+
+  &:active {
+    background-color: var(--grey-3);
+  }
+}
+</style>