allow alphabet letters

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']

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}

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">

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}
         >