` component nuxt3 way\r\n - #4381 \t\r\n- refactor `timeFilters` with `\u003CNeoButton />` from #4330 \r\n\u003Cdetails>\r\n \u003Csummary>Code\u003C/summary>\r\n \r\n```vue\r\n \u003Cb-field>\r\n \u003Cp class=\"control\">\r\n \u003CNeoButton :class=\"{ active: state.timeRange == 'Day' }\" label=\"24 Hours\" @click=\"setTimeRange('Day')\" />\r\n \u003C/p>\r\n \u003Cp class=\"control\">\r\n \u003CNeoButton :class=\"{ active: state.timeRange == 'Day' }\" label=\"7 Days\" @click=\"setTimeRange('Week')\" />\r\n \u003C/p>\r\n \u003Cp class=\"control\">\r\n \u003CNeoButton :class=\"{ active: state.timeRange == 'Day' }\" label=\"30 Days\" @click=\"setTimeRange('Month')\" />\r\n \u003C/p>\r\n \u003Cp class=\"control\">\r\n \u003CNeoButton :class=\"{ active: state.timeRange == 'Day' }\" label=\"All\" @click=\"setTimeRange('All')\" />\r\n \u003C/p>\r\n \u003C/b-field>\r\n```\r\n \r\n\u003C/details>\r\n\r\n_Originally posted by @roiLeo in https://github.com/kodadot/nft-gallery/pull/4332#pullrequestreview-1183865135_\r\n ",[2027,2028,2029],{"name":1985,"color":1986},{"name":1988,"color":1989},{"name":2012,"color":1992},4364,"Follow up top collection data volume and & change v2","2022-12-03T14:52:36Z","https://github.com/kodadot/nft-gallery/issues/4364",0.71029985,{"description":2036,"labels":2037,"number":2043,"owner":1999,"repository":2000,"state":2019,"title":2044,"updated_at":2045,"url":2046,"score":2047},"Time to redesign our most precious component, which people often see. \r\nEspecially if waiting for a transaction, indexer is down, some glitch happened on our backend or loading of the profile, collection,gallery, items, or explorer takes a while\r\n### Old\r\n\r\n\r\n### New\r\n\r\n- figma file: landing page handoff, second page: https://www.figma.com/file/3iOjW12ERFRDSVnpLuhQmf/landing-page-handoff?node-id=0%3A1\r\n- dark mode is also there\r\n- text has max length, so the box stays always the same when the text changes - please make that so the maximum did you know phrase fits there. \r\n- svg animation: \r\n\r\n",[2038,2039,2040],{"name":1985,"color":1986},{"name":1988,"color":1989},{"name":2041,"color":2042},"redesign","227120",4262,"Redesign Loading screen ","2022-11-08T07:40:55Z","https://github.com/kodadot/nft-gallery/issues/4262",0.73126245,{"description":2049,"labels":2050,"number":2056,"owner":1999,"repository":2000,"state":2019,"title":2057,"updated_at":2058,"url":2059,"score":2060},"We will work with @exezbcz about some small and impactful changes to explorer before we come back to redesign the whole explorer after the collection view.\r\n\r\nPrimary, we will be putting filters on the side like any other marketplace has, which we will be pretty great about. \r\nPlus, we can update buttons to upcoming styles too. \r\nThe thing is, we probably won't have time to circle back sooner than 6 weeks tbh\r\n\r\nWe mostly likely keep all functionality we have \r\nIf you have suggestions for explorer, now is your time. \r\n\r\n## Proposed changes \r\n- put filters on the side\r\n- update pagination button to neobrutalism style\r\n- change the grid of items default based on min-width per card, i.e. @ 1024px will be 4, at @ 1920px be 6-8\r\n- anything else you are wishing for xmas\r\n- rename Gallery -> Items\r\n- add blockchain switch \r\n\r\n## Current state\r\n\u003Cimg width=\"1180\" alt=\"image\" src=\"https://user-images.githubusercontent.com/5887929/203386037-96353a20-5b13-46e7-a077-dd797edca638.png\">\r\n\r\n## Ref\r\n- https://github.com/kodadot/nft-gallery/issues/4444\r\n",[2051,2053,2055],{"name":2052,"color":1989},"p5",{"name":2054,"color":1992},"A-explorer",{"name":2041,"color":2042},4378,"Explorer tweak before new design v0.9","2023-01-07T14:23:22Z","https://github.com/kodadot/nft-gallery/issues/4378",0.7324767,{"description":2062,"labels":2063,"number":2069,"owner":1999,"repository":2000,"state":2019,"title":2070,"updated_at":2071,"url":2072,"score":2073},"- when opening time frame dropdown\r\n\r\n- without dropdown \r\n\r\n",[2064,2065,2066],{"name":1985,"color":1986},{"name":1988,"color":1989},{"name":2067,"color":2068},"visual change","6CDDCE",4469,"Chart tab switching to scroll ","2022-12-18T18:34:27Z","https://github.com/kodadot/nft-gallery/issues/4469",0.74294114,{"description":2075,"labels":2076,"number":2080,"owner":1999,"repository":2000,"state":2019,"title":2081,"updated_at":2082,"url":2083,"score":2084},"On landing, we need to add to component for RMRK & Basilisk \r\n\r\nMake it future-comptabile for time-frame filter, right now we will make it fixed for 30d values\r\n\r\n- total volume in KSM \r\n- denomination in USD (we have coingecko price stored in Vuex iirc)\r\n- % change \r\n\r\nHow it should look like \r\n\r\n\r\n\r\n\r\nRight now it looks like \r\n\r\n\r\n",[2077,2078,2079],{"name":1985,"color":1986},{"name":2010,"color":1989},{"name":2012,"color":1992},4264,"Top collection data volume and % change","2022-11-21T18:02:19Z","https://github.com/kodadot/nft-gallery/issues/4264",0.7432089,{"description":2086,"labels":2087,"number":2094,"owner":1999,"repository":2000,"state":2019,"title":2095,"updated_at":2096,"url":2097,"score":2098},"At buy events, we are missing Item name. \r\n- Add there as the second col as item name, where name length keeps first six and last six characters. \r\n- Change the date to relative time (20 minutes ago). On hover show the exact time. This could be changed for the history component at nft item as well. \r\n\r\n\r\n\u003Cimg width=\"1301\" alt=\"image\" src=\"https://user-images.githubusercontent.com/5887929/158365497-de212b4b-da1c-4967-8a89-e03997c05f0f.png\">\r\n\r\n\r\n",[2088,2089,2090,2091],{"name":1985,"color":1986},{"name":2010,"color":1989},{"name":1991,"color":1992},{"name":2092,"color":2093},"history","8675FB",2547,"Rework feed for collection bit","2022-03-16T20:16:12Z","https://github.com/kodadot/nft-gallery/issues/2547",0.7437153,{"description":2100,"labels":2101,"number":2106,"owner":1999,"repository":2000,"state":2019,"title":2107,"updated_at":2108,"url":2109,"score":2110},"\u003Cimg width=\"1436\" alt=\"Screenshot 2022-08-26 at 15 56 04\" src=\"https://user-images.githubusercontent.com/5887929/186920082-9c03b4dd-ae75-4abf-8318-aae482ccf6e8.png\">\r\n\r\nWe've been working quite a while on a new design, and we will start rolling with a new one as mentioned in https://github.com/kodadot/nft-gallery/discussions/3710\r\nThis issue is in the draft, and I will gradually add descriptions of particular sections. \r\n\r\n@exezbcz will drop some more wisdom I've forgot and help you guide through\r\n- mobile description coming\u003Csup>soon\u003C/sup>\r\n\r\n\u003Cimg src=\"https://media1.giphy.com/media/l0HlFFTVOQz0bKYJG/giphy.gif\"/>\r\n\r\n## Figma export \r\n- [Readme](https://www.figma.com/file/3iOjW12ERFRDSVnpLuhQmf/landing-page-handoff?node-id=1305%3A5612) \r\n- [Design](https://www.figma.com/file/3iOjW12ERFRDSVnpLuhQmf/landing-page-handoff?node-id=798%3A3662)\r\n- [Components + Prototypes](https://www.figma.com/file/3iOjW12ERFRDSVnpLuhQmf/landing-page-handoff?node-id=1305%3A5613)\r\n\r\n\r\n\r\n## Navbar \r\nNavbar will be functioning most likely nowadays, with some refreshment.\r\n\r\n### From left to right\r\n- There will be a logo which takes you back home `/`.\r\n- Search in the navbar, which will appear once you scroll the site.\r\n- Explore, which will take you to global explorer -- I guess we don't have this one, so most likely skip it for now \r\n- Stats - Rankings like series \r\n- Connect -- this will stay the current one. Hopefully, it's already made as a component (?)\r\n\r\n## Search\r\nWe will have a multi-chain search including RMRK, Basilisk and other upcoming implementations.\r\nMultichain search will support [^supportedchain]\r\nThe search bar could be selected when pressing 'K' \r\nOn input focus, it will show trending collections\r\nthose trending collections could be fetched by default by most volume or most of buys per 7 days with the option to overwrite/add extra collections to list\r\nUnder search, we can show currently working chains , along with upcoming integrations [^chains]\r\nEach chain name would be linked to a particular explorer feed based on that chain. I.e. RMRK -> `/rmrk/explore`\r\n\r\nThe same search bar would go to the navbar once the user scrolls down\r\nThe majority of search is being done in \r\n- #3763 \r\n- #3360\r\n\r\n## Spotlight \r\n\r\nThis section would be a remake of our existing carousel component. The component will be still and without auto-play. \r\nOn this component, we will be showing collections from all chains. So having array with chain and address collection would be mandatory here. \r\nAs you see, we will be showing picture of collection with collection name. The link will take user to the collection view.\r\nThe spotlight will be horizontally scrollable, with at least 15 collection. \r\nThis feed will be a curated list by community picks. \r\n\r\nSome work is being done here\r\n- #3772 \r\n- #876\r\n\r\n## Top collections\r\nThe collection would receive a new look and feel. \r\nMost data are already done in the series insights component, so expanding here should be a breeze. \r\nThe new functionality will be there, showing 24 hours, 7 days and 30 days time frame of data.\r\nDefault selected time frame should be 7 days.\r\nOn the upper right, \"All\" would change collection data based on supported chains: [^supportedchain]. \r\n\r\n### Data\r\n- name of collection\r\n- floor of the collection \r\n- total volume of collection in native token per selected period\r\n- total volume of collection in USD per selected period\r\n- difference within the selected period\r\n\r\nLink will take the user to the collection view.\r\n\r\nSome part of preparation is upcoming in this issue.\r\n\r\n- #3869 \r\n\r\n## New Listings\r\nThis section would work same as current listings. \r\nThe major difference is that we will pool data from various indexers into one component. \r\nWe will be showing user on which chain listing happened, like [^supportedchain] .\r\n\r\n### Data\r\n- NFT name\r\n- Collection name\r\n- Listing price \r\n- Supported chains: [^supportedchain]\r\n\r\n## Latest Sales \r\nThis section would work same as current sales. \r\nThe major difference is that we will pool data from various indexers into one component. \r\nWe will be showing user on which chain sale happened, like supported chains: [^supportedchain] .\r\n\r\n### Data\r\n- NFT name\r\n- Collection name\r\n- Sale price (the last buy happened)\r\n- Supported chains: [^supportedchain]\r\n\r\n## Featured Articles\r\nWe will have a list of articles, for now, three without scroll. \r\n\r\n### Data\r\n- hero picture for the article \r\n- Article title\r\n- Short description\r\n- Link to an article\r\n\r\nMore articles can go to either to Medium or Substack publications, whichever we will decide for \r\n\r\n## Footer \r\nHere we will collect email address into our Substack. \r\nLink Substack of our Kodadot publication, can drop code for button\r\nOther links are to\r\n- FAQ -> https://kodadot.xyz/rmrk/faq -> probably we should move FAQ to root, like https://kodadot.xyz/faq \r\n- Grants -> link to current grants form \r\n- Documentation -> https://docs.kodadot.xyz/\r\n- Contribute -> https://kodadot.xyz/contribute\r\n#### Socials \r\n- Twitter -> https://twitter.com/kodadot\r\n- Instagram -> https://instagram/kodadot.xyz\r\n- Discord -> https://discord.gg/u6ymnbz4PR \r\n- Youtube \r\n- Telegram \r\n\r\n## Legend\r\n\r\n- https://github.com/kodadot/nft-gallery/issues/2792\r\n\r\n[^chains]: Currently supported chains are RMRKv1 and Basilisk Rococo. Upcoming integrated chains will be MoonRiver, MoonBeam and Astar(RMRK) \r\n\r\n[^supportedchain]: RMRK 1.0, Basilisk\r\n\r\n### Currently working chains\r\n- RMRKv1 \r\n- Basilisk Rococo\r\n### Upcoming working chains\r\n- MoonRiver\r\n- MoonBeam\r\n- Astar (RMRK)",[2102,2103,2104,2105],{"name":2010,"color":1989},{"name":2012,"color":1992},{"name":2014,"color":2015},{"name":2041,"color":2042},3844,"Redesign Landing page","2022-10-19T15:38:37Z","https://github.com/kodadot/nft-gallery/issues/3844",0.74517584,{"description":2112,"labels":2113,"number":2118,"owner":1999,"repository":2000,"state":2019,"title":2119,"updated_at":2120,"url":2121,"score":2122},"\r\n\r\nIt does not have active state, so you dont know what time frame is selected. \r\nshould have active state like here: \r\n- #4603 \r\n\r\n\r\nthe gap between buttons should be -1px because like this the stroke double stack. \r\n\r\n",[2114,2117],{"name":2115,"color":2116},"UX first","7057ff",{"name":1988,"color":1989},4632,"Collection time frame select","2023-01-12T15:51:21Z","https://github.com/kodadot/nft-gallery/issues/4632",0.74823445,["Reactive",2124],{},["Set"],["ShallowReactive",2127],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"MgpjHWoJDggQBt1XBzGloSs2MFKw7OAkWNz5qISN9sQ":-1},"/kodadot/nft-gallery/4365"]