From cee18af7962c36224b1732f4b9223a28b6eb29fa Mon Sep 17 00:00:00 2001
From: Paul Butler <paul@driftingin.space>
Date: Sat, 8 Feb 2025 13:44:19 -0500
Subject: [PATCH] allow alphabet letters

---
 app/emoji.ts                                          |  2 ++
 ...ecoder-content.tsx => encoder-decoder-content.tsx} | 11 ++++++++++-
 app/page.tsx                                          |  4 ++--
 components/emoji-selector.tsx                         |  2 +-
 4 files changed, 15 insertions(+), 4 deletions(-)
 rename app/{base64-encoder-decoder-content.tsx => encoder-decoder-content.tsx} (90%)

diff --git a/app/emoji.ts b/app/emoji.ts
index b3f12c6..74fa4c1 100644
--- a/app/emoji.ts
+++ b/app/emoji.ts
@@ -22,3 +22,5 @@ export const EMOJI_LIST = [
     "💀",
     "🥹",
 ]
+
+export const ALPHABET_LIST = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z']
diff --git a/app/base64-encoder-decoder-content.tsx b/app/encoder-decoder-content.tsx
similarity index 90%
rename from app/base64-encoder-decoder-content.tsx
rename to app/encoder-decoder-content.tsx
index c7b08fa..a7c8618 100644
--- a/app/base64-encoder-decoder-content.tsx
+++ b/app/encoder-decoder-content.tsx
@@ -8,7 +8,7 @@ import { Switch } from "@/components/ui/switch"
 import { Label } from "@/components/ui/label"
 import { decode, encode } from "./encoding"
 import { EmojiSelector } from "@/components/emoji-selector"
-import { EMOJI_LIST } from "./emoji"
+import { ALPHABET_LIST, EMOJI_LIST } from "./emoji"
 
 export function Base64EncoderDecoderContent() {
   const router = useRouter()
@@ -93,6 +93,7 @@ export function Base64EncoderDecoderContent() {
         className="min-h-[100px]"
       />
 
+      <div className="font-bold text-sm">Pick an emoji</div>
       <EmojiSelector
         onEmojiSelect={handleEmojiSelect}
         selectedEmoji={selectedEmoji}
@@ -100,6 +101,14 @@ export function Base64EncoderDecoderContent() {
         disabled={!isEncoding}
       />
 
+      <div className="font-bold text-sm">Or pick a standard alphabet letter</div>
+      <EmojiSelector
+        onEmojiSelect={handleEmojiSelect}
+        selectedEmoji={selectedEmoji}
+        emojiList={ALPHABET_LIST}
+        disabled={!isEncoding}
+      />
+
       <Textarea
         placeholder={`${isEncoding ? "Encoded" : "Decoded"} output`}
         value={outputText}
diff --git a/app/page.tsx b/app/page.tsx
index 8482045..55df495 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,8 +1,8 @@
 import { Suspense } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Base64EncoderDecoderContent } from "./base64-encoder-decoder-content"
+import { Base64EncoderDecoderContent } from "./encoder-decoder-content"
 
-export default function Base64EncoderDecoder() {
+export default function EncoderDecoder() {
   return (
     <div className="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 flex items-center justify-center p-4">
       <Card className="w-full max-w-md">
diff --git a/components/emoji-selector.tsx b/components/emoji-selector.tsx
index 88c626a..9539401 100644
--- a/components/emoji-selector.tsx
+++ b/components/emoji-selector.tsx
@@ -16,7 +16,7 @@ export function EmojiSelector({ onEmojiSelect, disabled, selectedEmoji, emojiLis
         <Button
           key={emoji}
           variant="outline"
-          className={`w-8 h-8 p-0 disabled:opacity-50 ${emoji === selectedEmoji ? "bg-accent" : ""}`}
+          className={`w-8 h-8 p-0 disabled:opacity-50 ${emoji === selectedEmoji ? "bg-accent border-purple-500" : ""}`}
           onClick={() => onEmojiSelect(emoji)}
           disabled={disabled}
         >