diff --git a/src/app.css b/src/app.css index b5c61c9..f237347 100644 --- a/src/app.css +++ b/src/app.css @@ -1,3 +1,10 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer base { + :root { + /* Just some fun base styles that are global */ + @apply bg-zinc-50 text-zinc-950 caret-purple-400 accent-purple-400 selection:bg-purple-400 selection:text-purple-100; + } +} diff --git a/src/components/Counter.css b/src/components/Counter.css deleted file mode 100644 index 8bd0eb3..0000000 --- a/src/components/Counter.css +++ /dev/null @@ -1,20 +0,0 @@ -.increment { - font-family: inherit; - font-size: inherit; - padding: 1em 2em; - color: #335d92; - background-color: rgba(68, 107, 158, 0.1); - border-radius: 2em; - border: 2px solid rgba(68, 107, 158, 0); - outline: none; - width: 200px; - font-variant-numeric: tabular-nums; -} - -.increment:focus { - border: 2px solid #335d92; -} - -.increment:active { - background-color: rgba(68, 107, 158, 0.2); -} \ No newline at end of file diff --git a/src/components/Counter.tsx b/src/components/Counter.tsx deleted file mode 100644 index 55a4e67..0000000 --- a/src/components/Counter.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createSignal } from "solid-js"; -import "./Counter.css"; - -export default function Counter() { - const [count, setCount] = createSignal(0); - return ( - - ); -} diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx new file mode 100644 index 0000000..65dcc38 --- /dev/null +++ b/src/components/Icons.tsx @@ -0,0 +1,81 @@ +/** + * @param {string} path + * @returns {import("solid-js").VoidComponent} + */ +function Icon(path) { + return () => ( + + + + ); +} + +export const Icons = { + PresentToAll: Icon( + "M440-320h80v-166l64 63 57-57-161-160-160 160 57 56 63-63v167ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z", + ), + FullScreen: Icon( + "M120-120v-200h80v120h120v80H120Zm520 0v-80h120v-120h80v200H640ZM120-640v-200h200v80H200v120h-80Zm640 0v-120H640v-80h200v200h-80Z", + ), + FullScreenExit: Icon( + "M240-120v-120H120v-80h200v200h-80Zm400 0v-200h200v80H720v120h-80ZM120-640v-80h120v-120h80v200H120Zm520 0v-200h80v120h120v80H640Z", + ), + CancelPresentation: Icon( + "m376-320 104-104 104 104 56-56-104-104 104-104-56-56-104 104-104-104-56 56 104 104-104 104 56 56ZM160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm0-80h640v-480H160v480Zm0 0v-480 480Z", + ), + Cast: Icon( + "M480-480Zm320 320H600q0-20-1.5-40t-4.5-40h206v-480H160v46q-20-3-40-4.5T80-680v-40q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160Zm-720 0v-120q50 0 85 35t35 85H80Zm200 0q0-83-58.5-141.5T80-360v-80q117 0 198.5 81.5T360-160h-80Zm160 0q0-75-28.5-140.5t-77-114q-48.5-48.5-114-77T80-520v-80q91 0 171 34.5T391-471q60 60 94.5 140T520-160h-80Z", + ), + NavigateNext: Icon("M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"), + NavigateBefore: Icon("M560-240 320-480l240-240 56 56-184 184 184 184-56 56Z"), + Slideshow: Icon( + "m380-300 280-180-280-180v360ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm0-80h560v-560H200v560Zm0-560v560-560Z", + ), + PictureAsPdf: Icon( + "M360-460h40v-80h40q17 0 28.5-11.5T480-580v-40q0-17-11.5-28.5T440-660h-80v200Zm40-120v-40h40v40h-40Zm120 120h80q17 0 28.5-11.5T640-500v-120q0-17-11.5-28.5T600-660h-80v200Zm40-40v-120h40v120h-40Zm120 40h40v-80h40v-40h-40v-40h40v-40h-80v200ZM320-240q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z", + ), + Print: Icon( + "M640-640v-120H320v120h-80v-200h480v200h-80Zm-480 80h640-640Zm560 100q17 0 28.5-11.5T760-500q0-17-11.5-28.5T720-540q-17 0-28.5 11.5T680-500q0 17 11.5 28.5T720-460Zm-80 260v-160H320v160h320Zm80 80H240v-160H80v-240q0-51 35-85.5t85-34.5h560q51 0 85.5 34.5T880-520v240H720v160Zm80-240v-160q0-17-11.5-28.5T760-560H200q-17 0-28.5 11.5T160-520v160h80v-80h480v80h80Z", + ), + LocationSearching: Icon( + "M440-40v-80q-125-14-214.5-103.5T122-438H42v-80h80q14-125 103.5-214.5T440-836v-80h80v80q125 14 214.5 103.5T838-518h80v80h-80q-14 125-103.5 214.5T520-120v80h-80Zm40-158q116 0 198-82t82-198q0-116-82-198t-198-82q-116 0-198 82t-82 198q0 116 82 198t198 82Z", + ), + Fill: { + Cast: Icon( + "M720-320H575q-35-109-111.5-192T281-640h439v320ZM80-160v-120q50 0 85 35t35 85H80Zm200 0q0-83-58.5-141.5T80-360v-80q117 0 198.5 81.5T360-160h-80Zm160 0q0-75-28.5-140.5t-77-114q-48.5-48.5-114-77T80-520v-80q91 0 171 34.5T391-471q60 60 94.5 140T520-160h-80Zm360 0H600q0-20-1.5-40t-4.5-40h206v-480H160v46q-20-3-40-4.5T80-680v-40q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160Z", + ), + MyLocation: Icon( + "M440-42v-80q-125-14-214.5-103.5T122-440H42v-80h80q14-125 103.5-214.5T440-838v-80h80v80q125 14 214.5 103.5T838-520h80v80h-80q-14 125-103.5 214.5T520-122v80h-80Zm40-158q116 0 198-82t82-198q0-116-82-198t-198-82q-116 0-198 82t-82 198q0 116 82 198t198 82Zm0-120q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47Z", + ), + }, + GithHubMark: () => ( + + + + ), +}; + + +; diff --git a/src/components/Input.tsx b/src/components/Input.tsx new file mode 100644 index 0000000..28f977a --- /dev/null +++ b/src/components/Input.tsx @@ -0,0 +1,12 @@ +import { JSX } from "solid-js"; + +export default function Input( + properties: Omit, "class"> +) { + return ( + + ); +} diff --git a/src/entry-server.tsx b/src/entry-server.tsx index e7a6a25..1ee150d 100644 --- a/src/entry-server.tsx +++ b/src/entry-server.tsx @@ -11,7 +11,7 @@ export default createHandler(() => ( {assets} - + {children} {scripts} diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 0fdd4f4..15d172e 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,6 +1,80 @@ -import { Title } from "@solidjs/meta"; -import Counter from "~/components/Counter"; - +import { Show, createSignal } from "solid-js"; +import { Icons } from "~/components/Icons"; +import Input from "~/components/Input"; export default function Home() { - return
; + const [isLocation, setIsLocation] = createSignal(true); + return ( +
+
+ {/* As the naviation UI is bottom to top, we should make the search use the same to be not confusing. + Also don't you first think of where you want to go and not where you are right now? */} + {/* TODO add animation moving bottom sheet for search into view to get focus from user */} +
+
+ +
+ +
+
+ +
+ +
+ + +
+
+
+ +
+
+ ); } diff --git a/tailwind.config.js b/tailwind.config.js index eac0ec2..9cf313b 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -2,7 +2,17 @@ export default { content: ["./src/**/*.{js,jsx,ts,tsx}"], theme: { - extend: {}, + extend: { + keyframes: { + "move-in": { + from: { transform: "translateY(100%)" }, + to: { transform: "translateY(0)" }, + }, + }, + animation: { + "move-in": "move-in 500ms ease-in-out", + }, + }, }, plugins: [], };