This repository has been archived by the owner on Jul 18, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: various enhancements, redesigned UI/UX
- Loading branch information
1 parent
37323ee
commit bc883bb
Showing
35 changed files
with
1,091 additions
and
635 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,18 @@ | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
| @layer base { | ||
| :root { | ||
| --background: 0 0% 96%; /* neutral-100, #f5f5f5 */ | ||
| --foreground: 0 0% 100%; /* white, #ffffff */ | ||
|
|
||
| --primary: 180 42% 66%; /* #83cccc */ | ||
|
|
||
| /** | ||
| * DARK MODE | ||
| */ | ||
| --dark-background: 212 55% 18%; /* lighter, #152D49 */ | ||
| --dark-foreground: 216 53% 16%; /* darker, #13243D */ | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <!-- <div | ||
| style="width: 1024px; height: 1024px; padding-top: 161px; padding-bottom: 172px; padding-left: 210px; padding-right: 230px; background: #5CC7C7; justify-content: flex-start; align-items: center; display: inline-flex" | ||
| > --> | ||
| <div | ||
| class="relative inline-flex h-[1024px] w-[1024px] items-center justify-start bg-[#5CC7C7] pl-[210px] pr-[230px] pt-[161px] pb-[172px]" | ||
| > | ||
| <div | ||
| class="font-sm absolute top-[84px] -right-[512px] z-10 rotate-45 bg-rose-500 px-[512px] font-mono text-[144px] font-semibold text-white" | ||
| > | ||
| BETA | ||
| </div> | ||
| <div style="width: 584px; height: 691px; background: #5CC7C7"> | ||
| <svg | ||
| width="584" | ||
| height="691" | ||
| viewBox="0 0 584 691" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| d="M310.383 5.48174C352.354 -5.5979 394.526 0.139778 433.874 22.4969C525.08 74.1359 530.326 193.242 447.797 333.32C422.574 376.254 388.877 430.069 351.547 466.87C288.793 528.797 237.54 520.289 205.658 502.285C159.046 475.971 144.518 432.444 162.275 372.693C175.391 328.968 209.29 276.537 259.736 190.868L327.131 229.053C280.923 307.798 247.629 357.854 236.934 394.061C227.249 426.31 235.32 430.861 244.4 436.005C278.905 455.394 344.283 356.073 380.2 294.937C409.055 245.87 426.004 197.99 427.619 160.003C430.04 108.364 403.405 93.3274 394.728 88.3812C367.488 72.9488 340.247 72.3552 310.989 86.2048C270.632 105.396 227.451 152.683 186.085 222.92C141.491 298.696 92.8619 385.157 80.755 454.999C69.6569 518.904 89.2298 560.057 146.536 592.505C212.721 629.899 271.843 619.808 338.229 559.661C400.782 502.878 461.518 423.145 516.605 329.363L584 367.549C525.685 466.474 461.518 551.748 391.096 615.653C299.487 698.751 204.044 713.194 107.592 658.587C22.2381 610.311 -12.6703 537.502 4.07767 441.94C18.4042 359.832 70.6658 266.051 118.69 184.537C168.53 100.054 221.801 43.6669 276.887 17.3528C287.985 12.6044 299.083 8.4495 310.383 5.48174Z" | ||
| fill="white" | ||
| /> | ||
| </svg> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,61 +1,79 @@ | ||
| <script lang="ts"> | ||
| import { createSelect } from '@melt-ui/svelte'; | ||
| import Check from '~icons/lucide/check'; | ||
| import ChevronDown from '~icons/lucide/chevron-down'; | ||
| import { createSelect, melt } from '@melt-ui/svelte'; | ||
| import { Check, ChevronDown } from 'lucide-svelte'; | ||
| import { fly } from 'svelte/transition'; | ||
| const { label, trigger, menu, option, isSelected, group, groupLabel } = createSelect(); | ||
| const { | ||
| elements: { trigger, menu, option, group, groupLabel, label }, | ||
| states: { valueLabel, open }, | ||
| helpers: { isSelected } | ||
| } = createSelect({ | ||
| forceVisible: true | ||
| }); | ||
| const options = { | ||
| sweet: ['Caramel', 'Chocolate', 'Strawberry', 'Cookies & Cream'], | ||
| savory: ['Basil', 'Bacon', 'Rosemary', 'Balsamic Fig'] | ||
| }; | ||
| </script> | ||
|
|
||
| <button class="trigger" melt={$trigger} aria-label="Food"> | ||
| {$label || 'Select an option'} | ||
| <ChevronDown /> | ||
| </button> | ||
|
|
||
| <div class="menu" melt={$menu}> | ||
| {#each Object.entries(options) as [key, arr]} | ||
| <div melt={$group(key)}> | ||
| <div class="label" melt={$groupLabel(key)}>{key}</div> | ||
| {#each arr as item} | ||
| <div class="option" melt={$option({ value: item, label: item })}> | ||
| {#if $isSelected(item)} | ||
| <div class="check"> | ||
| <Check /> | ||
| <div class="flex flex-col gap-1"> | ||
| <!-- svelte-ignore a11y-label-has-associated-control - $label contains the 'for' attribute --> | ||
| <label class="block" use:melt={$label}>Favorite Flavor</label> | ||
| <button | ||
| class="text-blue-700 flex h-10 min-w-[220px] items-center justify-between rounded-md bg-white | ||
| px-3 py-2 transition-opacity hover:opacity-90" | ||
| use:melt={$trigger} | ||
| aria-label="Food" | ||
| > | ||
| {$valueLabel || 'Select a flavor'} | ||
| <ChevronDown class="square-5" /> | ||
| </button> | ||
| {#if $open} | ||
| <div | ||
| class="z-10 flex max-h-[360px] flex-col | ||
| overflow-y-auto rounded-md bg-white | ||
| p-1 focus:!ring-0" | ||
| use:melt={$menu} | ||
| transition:fly={{ duration: 100, y: -5 }} | ||
| > | ||
| {#each Object.entries(options) as [key, arr]} | ||
| <div use:melt={$group(key)}> | ||
| <div | ||
| class="py-1 pl-4 pr-4 font-semibold capitalize text-neutral-800" | ||
| use:melt={$groupLabel(key)} | ||
| > | ||
| {key} | ||
| </div> | ||
| {#each arr as item} | ||
| <div | ||
| class="focus:text-blue-700 data-[highlighted]:bg-blue-50 data-[selected]:bg-blue-100 data-[highlighted]:text-blue-900 data-[selected]:text-blue-900 relative cursor-pointer | ||
| rounded-md py-1 | ||
| pl-8 pr-4 | ||
| text-neutral-800 focus:z-10" | ||
| use:melt={$option({ value: item, label: item })} | ||
| > | ||
| {#if $isSelected(item)} | ||
| <div class="check"> | ||
| <Check class="square-4" /> | ||
| </div> | ||
| {/if} | ||
| {item} | ||
| </div> | ||
| {/if} | ||
| {item} | ||
| {/each} | ||
| </div> | ||
| {/each} | ||
| </div> | ||
| {/each} | ||
| {/if} | ||
| </div> | ||
|
|
||
| <style lang="postcss"> | ||
| .label { | ||
| @apply py-1 pl-4 pr-4 font-semibold capitalize text-neutral-800; | ||
| } | ||
| .menu { | ||
| @apply z-10 flex max-h-[360px] flex-col overflow-y-auto; | ||
| @apply rounded-md bg-white p-1; | ||
| @apply ring-0 !important; | ||
| } | ||
| .option { | ||
| @apply relative cursor-pointer rounded-md py-1 pl-8 pr-4 text-neutral-800; | ||
| @apply focus:text-blue-700 focus:z-10; | ||
| @apply data-[highlighted]:bg-blue-50 data-[highlighted]:text-blue-900; | ||
| @apply data-[selected]:bg-blue-100 data-[selected]:text-blue-900; | ||
| } | ||
| .trigger { | ||
| @apply flex h-10 min-w-[220px] items-center justify-between rounded-md bg-white px-3; | ||
| @apply text-blue-700 py-2 transition-opacity hover:opacity-90; | ||
| } | ||
| .check { | ||
| @apply text-blue-500 absolute left-2 top-1/2 z-20; | ||
| position: absolute; | ||
| left: theme(spacing.2); | ||
| top: 50%; | ||
| z-index: theme(zIndex.20); | ||
| translate: 0 calc(-50% + 1px); | ||
| color: theme(colors.blue.500); | ||
| } | ||
| </style> |
Oops, something went wrong.