onlook-dev / onlook

The open source, local-first Figma for React. Design directly in your live React app and publish your changes to code.
https://onlook.dev
Apache License 2.0
3.75k stars 233 forks source link

[feat] Apply Cursors to a selected element in a dropdown #565

Open drfarrell opened 1 month ago

drfarrell commented 1 month ago

Create a section in the properties panel that allows users to select from a dropdown list of cursors, and select if the cursor is applied on hover or just by default.

https://tailwindcss.com/docs/cursor

image

This section can go after the text section.

aPassie commented 1 month ago

I can do this, can you assign this to me. Thanks for considering

drfarrell commented 1 month ago

@aPassie is assigned other issues. When they complete them, we can assign this one, but for now this issue is open to other contributors while @aPassie works on others 👍

Suvendu-UI commented 1 month ago

can i contribute to this issue ?

Kitenite commented 1 month ago

@Suvendu-UI go ahead!

Suvendu-UI commented 1 month ago

hey @Kitenite which is the main file location having all the main components like the index.tsx in the repo ?

Suvendu-UI commented 1 month ago

i have the code for the cursor selector thing but dont know where to put it plus the localhost is not working well with me , here i have a video.

https://github.com/user-attachments/assets/9791efba-a8fc-4d64-b205-60e8725998bc

Kitenite commented 1 month ago

@Suvendu-UI make sure you don't have the production app also running when you're running the localhost version. This is where the inputs are: https://github.com/onlook-dev/onlook/blob/1f4ae57cdfa0dd6072941200c09a4225d92c7b9f/app/src/routes/editor/EditPanel/ManualTab/index.tsx#L29

They are structured based on this map which lays out all the CSS styles and their properties. Simply updating the map and adding the input would make it work with the existing inputs.

https://github.com/onlook-dev/onlook/blob/1f4ae57cdfa0dd6072941200c09a4225d92c7b9f/app/src/routes/editor/EditPanel/ManualTab/index.tsx#L29-L34

Suvendu-UI commented 4 weeks ago

hey @Kitenite the production app is running fine but the buttons during sign in are not working at all as you can see the video i sent you earlier

Kitenite commented 4 weeks ago

@Suvendu-UI to clarify, is the video of the production app or the localhost? The localhost should not show the sign-in screen unless you have the supabase tokens added to .env. You should not have anything in .env and it would work just fine without asking you to sign in.

Does this make sense?

Suvendu-UI commented 4 weeks ago

@Suvendu-UI to clarify, is the video of the production app or the localhost? The localhost should not show the sign-in screen unless you have the supabase tokens added to .env. You should not have anything in .env and it would work just fine without asking you to sign in.

Does this make sense?

got it

Suvendu-UI commented 4 weeks ago

Hey @Kitenite kindly review this pr as i have done the required changes and some conflicts which came.