feat: initial commit - 1000apps SaaS container

2026-06-29 08:26:45 +02:00
commit d8fb36e6c3
28 changed files with 3092 additions and 0 deletions
@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react'
+
+const AVATARS = [
+  '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
+  '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
+  '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
+  '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '😣', '😖', '😫',
+  '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳',
+  '🥵', '🥶', '😱', '😨', '😰', '😥', '😢', '🤔', '🤫', '🤭',
+  '🤗', '🤑', '🤠', '🤢', '🤮', '🤧', '🥵', '🥶', '👍', '👎'
+]
+
+export default function AvatarSelector({ selectedAvatar, onSelect }) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="text-4xl hover:scale-110 transition-transform"
+        title="Selecionar avatar"
+      >
+        {selectedAvatar || '👤'}
+      </button>
+      
+      {isOpen && (
+        <div className="absolute top-12 right-0 bg-white border rounded-lg shadow-lg p-3 z-50 w-64">
+          <div className="grid grid-cols-10 gap-2 max-h-48 overflow-y-auto">
+            {AVATARS.map((avatar, index) => (
+              <button
+                key={index}
+                onClick={() => {
+                  onSelect(avatar)
+                  setIsOpen(false)
+                }}
+                className={`text-xl hover:scale-125 transition-transform ${
+                  selectedAvatar === avatar ? 'ring-2 ring-blue-500 rounded' : ''
+                }`}
+              >
+                {avatar}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,32 @@
+import { useState } from 'react'
+
+const CATEGORIES = [
+  { id: 'all', name: 'Todos', icon: '📱' },
+  { id: 'produtividade', name: 'Produtividade', icon: '⚡' },
+  { id: 'utilidades', name: 'Utilidades', icon: '🔧' },
+  { id: 'games', name: 'Games', icon: '🎮' },
+  { id: 'ferramentas', name: 'Ferramentas', icon: '🛠️' },
+  { id: 'educacao', name: 'Educação', icon: '📚' },
+  { id: 'entretenimento', name: 'Entretenimento', icon: '🎬' }
+]
+
+export default function CategoryMenu({ selectedCategory, onSelect }) {
+  return (
+    <div className="flex flex-wrap gap-2 mb-6">
+      {CATEGORIES.map((category) => (
+        <button
+          key={category.id}
+          onClick={() => onSelect(category.id)}
+          className={`px-4 py-2 rounded-lg font-medium transition-all flex items-center gap-2 ${
+            selectedCategory === category.id
+              ? 'bg-blue-600 text-white shadow-md'
+              : 'bg-white text-gray-700 hover:bg-gray-100'
+          }`}
+        >
+          <span>{category.icon}</span>
+          <span>{category.name}</span>
+        </button>
+      ))}
+    </div>
+  )
+}