<|start_filename|>frontend/src/components/Options/options.module.css<|end_filename|>
.options {
  display: flex;
  position: relative;
  height: 2.5rem;
  box-sizing: border-box;
  border: 0.125rem var(--theme-light-gray) solid;
  border-radius: 0.5rem;
  flex: 0 0 auto;
}

.options__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-right: 0.125rem var(--theme-light-gray) solid;
  color: var(--theme-dark-color);
}

.options__input-wrapper {
  flex: 1;
  height: 100%;
}

.options__input {
  background-color: var(--theme-light-color);
  color: var(--theme-dark-color);
  padding: 0.25rem 0.5rem;
  height: 100%;
  width: 100%;
  font-size: 1rem;
  font-family: 'Rubik', sans-serif;
  font-weight: 400;
  outline: none;
  border: none;
  border-radius: 0.5rem;
  text-transform: capitalize;
  cursor: pointer;
}

.options__input::placeholder {
  color: var(--theme-dark-color);
  text-transform: capitalize;
}

.options__input:focus::placeholder {
  opacity: 0.5;
}

:global(.arrow) {
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0.75rem;
  color: var(--theme-dark-color);
  transition: all ease-out 0.2s;
}

.options__input:focus ~ :global(.arrow) {
  transform: translateY(-50%) rotateZ(180deg);
}

.options__candidates {
  position: absolute;
  display: block;
  top: 3rem;
  left: 2.375rem;
  right: -0.125rem;
  background-color: var(--theme-white);
  z-index: 2;
  max-height: 12rem;
  overflow-y: auto;
  border: 0.125rem var(--theme-light-gray) solid;
  border-radius: 0.5rem;
}

.options__candidates::-webkit-scrollbar-thumb {
  background-color: var(--theme-light-gray);
}

.options__candidates::-webkit-scrollbar {
  background-color: var(--theme-light-color);
  width: 0.25rem;
}

.candidate {
  text-transform: capitalize;
  display: flex;
  align-items: center;
  height: 2.5rem;
  background-color: var(--theme-light-color);
  font-family: 'Rubik', sans-serif;
  padding: 0 1rem;
  cursor: pointer;
}

.candidate:hover {
  background-color: var(--theme-light-gray);
}


<|start_filename|>Dockerfile<|end_filename|>
FROM node:16.13.1-bullseye

WORKDIR /usr/src/temp

COPY fonts/ .

RUN mv -v sf-mono /usr/local/share/fonts/ \
    && mv -v fira-code /usr/local/share/fonts/ \
    && mv -v jetbrains-mono /usr/local/share/fonts/ \
    && mv -v cascadia-code /usr/local/share/fonts/ \
    && mv -v hack /usr/local/share/fonts/ \
    && mv -v iosevka /usr/local/share/fonts/

WORKDIR /usr/src/app

COPY . .

RUN npm install --workspaces

ENV NODE_ENV=production

RUN npm run build --workspaces \
    && rm -rf node_modules \
    && npm install --production --workspaces

EXPOSE 3000

CMD [ "node", "dist/index.js" ]


<|start_filename|>frontend/package.json<|end_filename|>
{
  "name": "graphene-frontend",
  "private": true,
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "lint:check": "eslint --ignore-path ../.gitignore .",
    "lint": "eslint --fix --ignore-path ../.gitignore .",
    "prettier": "prettier --write --ignore-path ../.gitignore ."
  },
  "license": "MIT",
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "4.32.0",
    "@typescript-eslint/parser": "4.32.0",
    "eslint": "7.32.0",
    "eslint-plugin-solid": "0.1.2",
    "prettier": "2.5.1",
    "vite": "2.6.14",
    "vite-plugin-solid": "2.1.3"
  },
  "dependencies": {
    "@fontsource/jetbrains-mono": "^4.5.0",
    "@fontsource/rubik": "4.5.0",
    "solid-js": "1.2.5"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/teknologi-umum/graphene.git"
  },
  "author": "",
  "bugs": {
    "url": "https://github.com/teknologi-umum/graphene/issues"
  },
  "homepage": "https://github.com/teknologi-umum/graphene#readme"
}
