feat: add Toolbox component and Tool icons

src/pages/tools.mdx

@@ -4,6 +4,8 @@ title: Tools
 intro: I enjoy learning how other people work, what hardware, software, tools, and gadgets they use. On this page, I present my tools.
 ---
 
+import { Toolbox } from "../components";
+import { development, design, research, other } from "../data/tools.ts";
 import { mapping } from "../mdx-components.ts";
 export const components = mapping;
 
@@ -19,7 +21,7 @@ My best computer is a [Mac mini M2 Pro with](https://www.apple.com/mac-mini/) 32
 
 I use two [Apple Magic Mouse](https://www.apple.com/shop/product/MK2E3AM/A/magic-mouse-white-multi-touch-surface), one in white and one in black. My keyboard is a [Keychron K1 Wireless Mechanical Keyboard](https://www.keychron.com/products/keychron-k1-wireless-mechanical-keyboard) with brown [Gateron Low Profile Mechanical Switches](https://www.keychron.com/products/low-profile-gateron-mechanical-switch-set). I bought a [wooden hand rest](https://www.etsy.com/listing/1258050864/) on Etsy.
 
-The main display is an [LG 4K monitor](https://www.amazon.de/gp/product/B08FBH1V9R/) with 31.5”, the notebook display is my second screen. For sound, I use two [Creative Pebble](https://www.amazon.de/gp/product/B07VVP8BGD/) loudspeakers, but I have a [Sonos](https://www.sonos.com/) sound system for music. When I am on the road, I use my [Apple AirPods Pro](https://www.apple.com/airpods-pro/).
+The main display is an [LG 4K monitor](https://www.amazon.de/gp/product/B08FBH1V9R/) with 31.5”, the notebook display is my second screen. For sound, I use two [Creative Pebble](https://www.amazon.de/gp/product/B07VVP8BGD/) loudspeakers, but I have a [Sonos](https://www.sonos.com/) sound system for music. When I am on the road, I use my [Apple AirPods Pro 2](https://www.apple.com/airpods-pro/).
 
 I have an [iPhone 13 Mini](https://www.apple.com/shop/buy-iphone/iphone-13) that I use when I’m not at home and an [iPad Pro M2](https://www.apple.com/ipad-pro/) with an [Apple Pencil](https://www.apple.com/apple-pencil/) that I use on the Sofa or when I’m creating digital crafts or notes. I can switch my Keychron keyboard to type on both the MacBook or the iPad.
 
@@ -29,51 +31,26 @@ Besides that, I have a few backup hard drives for automatic Time Machine backups
 
 I use [Neovim](https://neovim.io/) for development, using [LazyVim](https://www.lazyvim.org/) as a plugin manager. I use it in the [Kitty terminal emulator](https://sw.kovidgoyal.net/kitty/) with the [Tmux terminal multiplexer](https://tmux.github.io/). Occasionally, I use [Visual Studio Code](https://code.visualstudio.com/) with the [Neovim extension](https://marketplace.visualstudio.com/items?itemName=asvetliakov.vscode-neovim). I use [LazyGit](https://github.com/jesseduffield/lazygit) for Git.
 
-- [Kitty](https://sw.kovidgoyal.net/kitty/)
-- [Neovim](https://neovim.io/)
-- [Visual Studio Code](https://code.visualstudio.com/)
-- [Tmux](https://tmux.github.io/)
+<Toolbox tools={development} />
 
 ## Design
 
 I love the [Affinity](https://affinity.serif.com/) suite by Serif and use it for all my creative work. I ditched Adobe a few years ago and never looked back. Furthermore, I use all Affinity apps on Desktop and iPad. Additionally, I use [Procreate](https://procreate.com/) on my iPad Pro for creative work. My favorite font app is [Typeface](https://typefaceapp.com/).
 
-- [Affinity Designer](https://affinity.serif.com/designer/)
-- [Affinity Photo](https://affinity.serif.com/photo/)
-- [Affinity Publisher](https://affinity.serif.com/publisher/)
-- [Procreate](https://procreate.com/)
-- [Typeface](https://typefaceapp.com/)
+<Toolbox tools={design} />
 
-## Research & Note-Taking
+## Research & Writing
 
 My favorite writing app is [iA Writer](https://ia.net/writer), I write nearly everything with it, but another writing app I use for my note-taking is [Obsidian](https://obsidian.md/). [DEVONthink](https://www.devontechnologies.com/apps/devonthink) is the app where I store everything, from PDF documents, to inspirational items to references. Everything is synchronized encrypted between all my devices.
 
 [Raindrop.io](https://raindrop.io/) is my favorite app to save any bookmark and to find anything again in seconds. I have more than 25,000 bookmarks.
 
-I consume all my content with the [Reeder](https://reeder.app/) app, from RSS Feeds, to Twitter or Reddit threads, to YouTube videos. From there, I transfer everything to [Readwise Reader](https://readwise.io/read) to read it and create highlights to remember and review later in [Readwise](https://readwise.io/).
+I consume all my content with the [Reeder](https://reeder.app/) app, from RSS Feeds, to Twitter or Reddit threads, to YouTube videos. From there, I transfer everything to [Readwise Reader](https://readwise.io/read) to read it and create highlights to remember and review later in [Readwise](https://readwise.io/i/stefan805).
 
-- [iA Writer](https://ia.net/writer)
-- [Obsidian](https://obsidian.md/)
-- [DEVONthink](https://www.devontechnologies.com/apps/devonthink)
-- [Raindrop.io](https://raindrop.io/)
-- [Reeder](https://reeder.app/)
-- [Readwise Reeder](https://readwise.io/read)
-- [Readwise](https://readwise.io/)
-- [Snipd](https://www.snipd.com/)
-- [Overcast](https://overcast.fm/podcasts)
-- [MindNode](https://www.mindnode.com/)
-- [BibDesk](https://bibdesk.sourceforge.io/)
+<Toolbox tools={research} />
 
 ## Other
 
 I use plenty of additional tools, too many to list them all. Here are a few of my favorite apps.
 
-- [Things](https://culturedcode.com/things/)
-- [Raycast](https://www.raycast.com/)
-- [Arc](https://arc.net/)
-- [Brave Browser](https://brave.com/)
-- [Bitwarden](https://bitwarden.com/)
-- [ProtonVPN](https://protonvpn.com/)
-- [Espanso](https://espanso.org/)
-- [Yoink](https://eternalstorms.at/yoink/mac/)
-- [Karabiner-Elements](https://karabiner-elements.pqrs.org/)
+<Toolbox tools={other} />