File tree 8 files changed +172
-10410
lines changed
8 files changed +172
-10410
lines changed Load Diff This file was deleted.
Original file line number Diff line number Diff line change 11
11
"autoprefixer" : " ^10.2.5" ,
12
12
"clsx" : " ^1.1.1" ,
13
13
"framer-motion" : " ^4.1.17" ,
14
+ "jotai" : " ^0.16.5" ,
14
15
"next" : " ^10.2.2" ,
15
16
"postcss" : " ^8.3.0" ,
16
17
"react" : " ^17.0.2" ,
25
26
"@types/react" : " ^17.0.6" ,
26
27
"@typescript-eslint/eslint-plugin" : " ^4.24.0" ,
27
28
"@typescript-eslint/parser" : " ^4.24.0" ,
28
- "eslint" : " ^7.26 .0" ,
29
+ "eslint" : " ^7.27 .0" ,
29
30
"eslint-config-xo" : " ^0.36.0" ,
30
31
"eslint-config-xo-react" : " ^0.25.0" ,
31
32
"eslint-config-xo-typescript" : " ^0.41.1" ,
Original file line number Diff line number Diff line change
1
+ import { atom } from 'jotai' ;
2
+
3
+ export type PalletteCommand = {
4
+ label : string ;
5
+ action : ( ) => unknown ;
6
+ command : string | string [ ] ;
7
+ } ;
8
+
9
+ export const atomCommands = atom < PalletteCommand [ ] > ( [ ] ) ;
Original file line number Diff line number Diff line change @@ -13,7 +13,9 @@ export const Pallette = ({items}: {items: CommandItem[]}) => {
13
13
e . preventDefault ( ) ;
14
14
setOpen ( v => ! v ) ;
15
15
} ,
16
- { enableOnTags : [ 'INPUT' ] }
16
+ {
17
+ enableOnTags : [ 'INPUT' ] ,
18
+ }
17
19
) ;
18
20
19
21
useEffect ( ( ) => {
Original file line number Diff line number Diff line change
1
+ export const flowers = [
2
+ 'Anemone' ,
3
+ 'Amaryllis' ,
4
+ 'Amaranth' ,
5
+ 'Amaranthus' ,
6
+ 'Aster' ,
7
+ 'Azalea' ,
8
+ 'Babys Breath' ,
9
+ 'Gypsophila' ,
10
+ 'Begonia' ,
11
+ 'Bell Flower' ,
12
+ 'Campanula' ,
13
+ 'Bergamot' ,
14
+ 'Bird of Paradise' ,
15
+ 'Strelitzia' ,
16
+ 'Bluebell' ,
17
+ 'Bottlebrush' ,
18
+ 'Max Flower' ,
19
+ 'Callistemon' ,
20
+ 'Ranunculus' ,
21
+ 'Camellia' ,
22
+ 'Carnation' ,
23
+ 'Cherry Blossom' ,
24
+ 'Sakura' ,
25
+ 'Chrysanths' ,
26
+ 'Chrysantemum' ,
27
+ 'Columbine' ,
28
+ 'Aquilegia' ,
29
+ 'Clover' ,
30
+ 'Crocus' ,
31
+ 'Daisy' ,
32
+ 'Dahlia' ,
33
+ 'Daffodil' ,
34
+ 'Narcissus' ,
35
+ 'Delphinium' ,
36
+ 'Edelweiss' ,
37
+ 'Leontopodium alpinum' ,
38
+ 'Primrose' ,
39
+ 'Primulaceae' ,
40
+ 'Forget-Me-Not' ,
41
+ 'Myosotis' ,
42
+ 'Foxglove' ,
43
+ 'Digitalis' ,
44
+ 'Freesia' ,
45
+ 'Gerbera' ,
46
+ 'Gerbera Daisies' ,
47
+ 'Gladiolus' ,
48
+ 'Hibiscus' ,
49
+ 'Heather' ,
50
+ 'Erica' ,
51
+ 'Hyacinth' ,
52
+ 'Hyacinthus' ,
53
+ 'Holly' ,
54
+ 'Iris' ,
55
+ 'Jasmine' ,
56
+ 'Ladys Slipper' ,
57
+ 'Cypripedioideae' ,
58
+ 'Lavender' ,
59
+ 'Lilac' ,
60
+ 'Syringa' ,
61
+ 'Lily' ,
62
+ 'Water Lily' ,
63
+ 'Lotus Flower' ,
64
+ 'Night Jasmine' ,
65
+ 'Tantani' ,
66
+ 'Nelumbo' ,
67
+ 'Marigold' ,
68
+ 'Tagetes' ,
69
+ 'Marjoram' ,
70
+ 'Mimosa' ,
71
+ 'Narcissus' ,
72
+ 'Orange Blossom' ,
73
+ 'Choisya' ,
74
+ 'Orchid' ,
75
+ 'Peach Blossom' ,
76
+ 'Peony' ,
77
+ 'Petunia' ,
78
+ 'Rhododendron' ,
79
+ 'Rosemary' ,
80
+ 'Roses' ,
81
+ 'Sage' ,
82
+ 'Salvia' ,
83
+ 'Snapdragon' ,
84
+ 'Antirrhinum' ,
85
+ 'Sunflower' ,
86
+ 'Helianthus annuus' ,
87
+ 'Tansy' ,
88
+ 'Thistle' ,
89
+ 'Thyme' ,
90
+ 'Tulip' ,
91
+ 'Violets' ,
92
+ 'Viola' ,
93
+ 'Nymphaea Odorata' ,
94
+ 'Zinnia' ,
95
+ 'Clitoria ternatea' ,
96
+ ] as const ;
Original file line number Diff line number Diff line change 1
1
import React from 'react' ;
2
2
import { AppProps } from 'next/dist/next-server/lib/router/router' ;
3
+ import { Provider } from 'jotai' ;
4
+ import { Command } from '../components/pallette' ;
5
+
3
6
import 'tailwindcss/tailwind.css' ;
4
7
5
8
const App = ( props : AppProps ) => {
6
- return < props . Component /> ;
9
+ return (
10
+ < Provider >
11
+ < Command />
12
+ < props . Component />
13
+ </ Provider >
14
+ ) ;
7
15
} ;
8
16
9
17
export default App ;
Original file line number Diff line number Diff line change 1
- import React from 'react' ;
2
- import { CommandItemType } from '../components/commandItem' ;
3
- import { Pallette } from '../components/pallette' ;
1
+ import React , { useEffect , useState } from 'react' ;
2
+ import { useAtom } from 'jotai' ;
3
+ import { atomCommands } from '../atoms/commands' ;
4
+ import { flowers } from '../flowers' ;
5
+
6
+ const getRandomFlower = ( ) => flowers [ Math . floor ( Math . random ( ) * flowers . length ) ] ;
4
7
5
8
const Home = ( ) => {
6
- return (
7
- < div
8
- className = "
9
- flex
10
- justify-center
11
- items-center
12
- h-screen
13
- text-black
14
- dark:text-white
15
- bg-white
16
- dark:bg-black
17
- "
18
- >
19
- < h1 className = "flex-grow-0 text-2xl opacity-30" > Press ⌘K</ h1 >
20
- < Pallette
21
- items = { [
22
- { type : CommandItemType . Action , name : 'View help' } ,
23
- { type : CommandItemType . Action , name : 'Download Ram' } ,
24
- { type : CommandItemType . Action , name : 'Enable Teddies' } ,
25
- { type : CommandItemType . Navigation , name : 'Home Page' } ,
26
- { type : CommandItemType . Navigation , name : 'About Page' } ,
27
- ] }
28
- />
29
- </ div >
30
- ) ;
9
+ const [ , set ] = useAtom ( atomCommands ) ;
10
+ const [ flower , setFlower ] = useState ( getRandomFlower ( ) ) ;
11
+
12
+ const hi = ( ) => {
13
+ setFlower ( getRandomFlower ( ) ) ;
14
+ } ;
15
+
16
+ useEffect ( ( ) => {
17
+ void set ( x => {
18
+ return [
19
+ ...x ,
20
+ {
21
+ label : 'Deez' ,
22
+ action : hi ,
23
+ command : 'cmd+x' ,
24
+ } ,
25
+ ] ;
26
+ } ) ;
27
+ } , [ set ] ) ;
28
+
29
+ return < p > { flower } </ p > ;
31
30
} ;
32
31
33
32
export default Home ;
You can’t perform that action at this time.
0 commit comments