## `console.log` Component

The follow code will create the below prompt (👀 notice the black background logging component):
```js
let { stdout } = await $`ls ~/projects | grep kit`

await arg(`Select a kit dir`, stdout.split("\n"))

```
<img width="402" alt="CleanShot 2021-07-22 at 16 13 10@2x" src="https://user-images.githubusercontent.com/36073/126716080-db8e1361-7972-488c-8873-2996a7c03064.png">

```js
console.log(chalk`{green.bold The current date is:}`)
console.log(new Date().toLocaleDateString())
await arg()
```

<img width="416" alt="CleanShot 2021-07-22 at 16 12 24@2x" src="https://user-images.githubusercontent.com/36073/126716010-b38c8d28-af68-4f1f-aefd-93de186a03d2.png">

The log even persists between prompts:

```js
let first = await arg("First name")
console.log(first)
let last = await arg("Last name")
console.log(`${first} ${last}`)
let age = await arg("Age")
console.log(`${first} ${last} ${age}`)
let emotion = await arg("Emotion")
console.log(`${first} ${last} ${age} ${emotion}`)
await arg()
```
<img width="415" alt="CleanShot 2021-07-22 at 16 19 36@2x" src="https://user-images.githubusercontent.com/36073/126716651-bb7b539a-2314-4d95-bcd9-5104c8d18ec5.png">

Click the "edit" icon to open the full log in your editor:
![CleanShot 2021-07-22 at 16 20 57@2x](https://user-images.githubusercontent.com/36073/126716749-4eda367a-4e55-424f-915a-30207583cd3f.png)

## cmd+o to Open

From the main menu, hitting `cmd+o` will open:

1. The currently selected script from the main menu
2. The currently running script
3.  Any "choice" that provides a "filePath" prop:

```js
await arg(`cmd+o to open file`, [
  {
    name: "Karabiner config",
    filePath: "~/.dotfiles/karabiner/karabiner.edn",
  },
  {
    name: "zshrc",
    filePath: "~/.zshrc",
  },
])
```

I've found this really useful when I want to tweak the running script, but I don't want to go back through the process of finding it.

## Experimental `className`

You can pass `className` into the arg options to affect the container for the list items or panel. Most classes from Tailwind should be available. Feel free to play around with it and let me know how it goes 😇:

```js
await arg(
  {
    className: "p-4 bg-black font-mono text-xl text-white",
  },
  `
  <p>Working on Script Kit today</p>
  <img src="https://i.imgflip.com/5hc0v4.jpg" title="made at imgflip.com"/>`
)

```

<img width="428" alt="CleanShot 2021-07-22 at 16 38 40@2x" src="https://user-images.githubusercontent.com/36073/126717978-2bf8d0e4-24a4-47ad-948a-97fde38a83e0.png">


```js
await arg(
  {
    className: "p-4 bg-black font-mono text-xl text-white",
  },
  ["Eat", "more", "tacos 🌮"]
)
```

<img width="420" alt="CleanShot 2021-07-22 at 16 41 19@2x" src="https://user-images.githubusercontent.com/36073/126718146-c3c94b10-0e5a-4e9d-8bab-a6b7c3b6f1d3.png">

