//import { useState } from 'react'
//import React from 'react'
import Counter from './components/Counter';
import WindowSize from './components/WindowSize';
import MousePosition from './components/MousePosition';
import typescriptLogo from './assets/typescript.svg'
import reactLogo from './assets/react.svg'
import tailwindLogo from './assets/tailwind.svg'
import reduxLogo from './assets/redux.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  //const [count, setCount] = useState(0) // moved to Counter

  return (
    <>
      {/* comment */}
      <div className="logos">
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo inline-block" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react inline-block" alt="React logo" />
        </a>
        <a href="https://redux.js.org" target="_blank">
          <img src={reduxLogo} className="logo redux inline-block" alt="Redux logo" />
        </a>
        <a href="https://tailwindcss.com" target="_blank">
          <img src={tailwindLogo} className="logo tailwind inline-block" alt="Tailwind logo" />
        </a>
      </div>
      <h1>Vite + React + Redux + Tailwind</h1>
      <div className="card">
        <Counter />     
        <br />
        <br />
        <p>
          Custom template by <a href="https://twily.info" target="_blank">twily</a> 2025~ built on =&gt; (
          <br />
          <code className="text-left inline-block">
            <span className="text-lime-600">npm</span> install -D vite
            <br />
            <span className="text-lime-600">npm</span> create vite@latest vite-app -- --template react-ts
            <br />
            <span className="text-lime-600">npm</span> install tailwindcss @tailwindcss/vite
            <br />
            <span className="text-lime-600">npm</span> install @reduxjs/toolkit react-redux @types/react-redux --legacy-peer-deps
          </code>
          <br />
          ) Edit <code>src/App.tsx</code> and save to test HMR
          <br />
          <br />
          <WindowSize />
          <MousePosition />
        </p>
      </div>
      <div className="logos2">
        <a href="https://www.typescriptlang.org" target="_blank">
          <img src={typescriptLogo} className="logo2 inline-block" alt="Typescript logo" />
        </a>
      </div>
      <p className="read-the-docs">
        Click on the Vite, React, Redux, Tailwind and Typescript logos to learn more
        <br />
        (:root/img has user-select: none or tailwind select-none)
        <br />
        <br />
        <a href="https://www.codeconvert.ai/javascript-to-typescript-converter" target="_blank">JS to TS converter</a> (Ai)
        <br />
        <a href="https://workik.com/javascript-to-typescript-converter" target="_blank">JS to TS Ai helper</a> (or use grok)
        <br />
        <a href="https://tailwindcss.com/docs/colors" target="_blank">Tailwind color concepts</a>
        <br />
        <a href="https://v1.tailwindcss.com/components/buttons" target="_blank">Tailwind button concepts</a>
      </p>
    </>
  )
}

export default App