Skip to content

Commit 9144b07

Browse files
committed
Merge branch 'main' into leah-initial-stuff
2 parents 5677036 + cf484f3 commit 9144b07

File tree

8 files changed

+172
-10410
lines changed

8 files changed

+172
-10410
lines changed

package-lock.json

-10,293
This file was deleted.

package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"autoprefixer": "^10.2.5",
1212
"clsx": "^1.1.1",
1313
"framer-motion": "^4.1.17",
14+
"jotai": "^0.16.5",
1415
"next": "^10.2.2",
1516
"postcss": "^8.3.0",
1617
"react": "^17.0.2",
@@ -25,7 +26,7 @@
2526
"@types/react": "^17.0.6",
2627
"@typescript-eslint/eslint-plugin": "^4.24.0",
2728
"@typescript-eslint/parser": "^4.24.0",
28-
"eslint": "^7.26.0",
29+
"eslint": "^7.27.0",
2930
"eslint-config-xo": "^0.36.0",
3031
"eslint-config-xo-react": "^0.25.0",
3132
"eslint-config-xo-typescript": "^0.41.1",

src/atoms/commands.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
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[]>([]);

src/components/pallette.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@ export const Pallette = ({items}: {items: CommandItem[]}) => {
1313
e.preventDefault();
1414
setOpen(v => !v);
1515
},
16-
{enableOnTags: ['INPUT']}
16+
{
17+
enableOnTags: ['INPUT'],
18+
}
1719
);
1820

1921
useEffect(() => {

src/flowers.ts

+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
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;

src/pages/_app.tsx

+9-1
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
import React from 'react';
22
import {AppProps} from 'next/dist/next-server/lib/router/router';
3+
import {Provider} from 'jotai';
4+
import {Command} from '../components/pallette';
5+
36
import 'tailwindcss/tailwind.css';
47

58
const App = (props: AppProps) => {
6-
return <props.Component />;
9+
return (
10+
<Provider>
11+
<Command />
12+
<props.Component />
13+
</Provider>
14+
);
715
};
816

917
export default App;

src/pages/index.tsx

+27-28
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,32 @@
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)];
47

58
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>;
3130
};
3231

3332
export default Home;

0 commit comments

Comments
 (0)