🐛Fixed: Colorpicker

docker-compose.yml

@@ -12,41 +12,3 @@ services:
     volumes: [.:/usr/app]
     command: ["yarn", "ci"]
     profiles: ["prod"]
-
-  # v -- Directus | Backend CMS solution, accessible via API.
-  # endpoint:
-  #   ports: [$ENDPOINT_PORT:8055]
-  # 
-  #   image: directus/directus:latest
-  #   restart: unless-stopped
-  #   networks: [endpoint]
-  #   env_file: .env
-  #   environment:
-  #     CORS_ENABLED: "true"
-  #     PUBLIC_URL: $CORS_ENDPOINT
-  #     DB_CLIENT: "pg"
-  #     DB_HOST: "database"
-  #     DB_PORT: "5432"
-  #     DB_DATABASE: "postgres"
-  #     DB_USER: "postgres"
-  #     DB_PASSWORD: $SECRET
-  #     EMAIL_TRANSPORT: smtp
-  #     EMAIL_SMTP_PORT: 587
-  #   volumes:
-  #     - ./data/uploads:/directus/uploads
-  #     - ./source/extensions:/directus/extensions
-
-  # v -- Postgres | Data storage as required by Directus.
-  # database:
-  #   image: postgis/postgis:latest
-  #   restart: unless-stopped
-  #   depends_on: [endpoint]
-  #   networks: [endpoint]
-  #   env_file: .env
-  #   environment:
-  #     POSTGRES_PASSWORD: $SECRET
-  #     RATE_LIMITER_ENABLED: true
-  #   volumes: [./data/database:/var/lib/postgresql/data]
-
-networks:
-  endpoint:

pages/index.tsx

@@ -52,23 +52,24 @@ export default function Index({ git }: any) {
             Hex Color
           </p>
 
-          <div className='flex gap-2'>
-            <div className='border-neutral-300 border-2 rounded-lg relative hover:cursor-pointer hover:border-violet-500 hover:border-3'
-              onClick={() => setShowPicker(true)}
+          <div className='flex gap-2 relative'>
+            <div className='border-neutral-300 border-2 rounded-lg hover:cursor-pointer hover:border-violet-500 hover:border-3'
+              onClick={() => setShowPicker(!showPicker)}
               onMouseOver={({ target }) => borderHover.in(target)}
               onMouseOut={({ target }) => borderHover.out(target)}
             >
-              {
-                showPicker && (
-                  <SketchPicker className="absolute z-10"
-                    onChangeComplete={(color: any) => { setHex(color.hex); setShowPicker(false) }}
-                    color={hex}
-                  />
-                )
-              }
               <div className='m-3 w-9 h-9 rounded pointer-events-none' style={{ backgroundColor: hex }} />
             </div>
 
+            {
+              showPicker && (
+                <SketchPicker className="absolute z-10 top-16 mt-2"
+                  onChange={(color: any) => { setHex(color.hex) }}
+                  color={hex}
+                />
+              )
+            }
+
             <input placeholder='#6644FF' value={hex}
               className="p-4 font-semibold border-2 outline-0 border-neutral-300 rounded-lg w-full hover:border-violet-500 hover:border-3"
               onMouseOver={({ target }) => borderHover.in(target)}

sample.env

@@ -5,30 +5,3 @@ COMPOSE_PROFILES= "dev"
 
 # ------------ Service ports exposed by docker, ensure to prevent conflicts.
 APP_PORT=      "3000"
-ENDPOINT_PORT= "8055"
-
-# ------------ Define cors to ensure secure origins.
-# "ORIGIN"     | An URL that points to the frontend.
-# "ENDPOINT"   | The endpoint URL of Directus.
-CORS_ORIGIN=   "http://localhost:3000"
-CORS_ENDPOINT= "http://localhost:8055"
-
-# ----- Ensure that these variables are randomized.
-KEY=    "next-leaflet-b5b5-5996-9aa3-922530ec40b1"
-SECRET= "next-leaflet-cda1-52c2-5ea1-c8022c45e263"
-
-# ------------- Defined to supply Directus with default credentials.
-ADMIN_EMAIL=    "[email protected]"
-ADMIN_PASSWORD= "admin"
-
-# ------------------ SMTP credentials, settings are totally optional.
-EMAIL_FROM=          "[email protected]"
-EMAIL_SMTP_HOST=     "mail.leaflet.app"
-EMAIL_SMTP_USER=     "[email protected]"
-EMAIL_SMTP_PASSWORD= "admin"
-
-# -------------------- Rate Limiter, prevents overload on the endpoint.
-# "POINTS"             | The amount of hits allowed within the DURATION timeframe.
-# "DURATION"           | Number of seconds each timeframe takes to pass.
-RATE_LIMITER_POINTS=   "50"
-RATE_LIMITER_DURATION= "1"