{title}
21 |{title}
21 |14 | Enjoy Pixiv even more with convenient features like Search by 15 | Popularity and Hide Ads. 16 |
17 | 18 |12 | Daily Traffic 13 |
14 |15 | 2.579{" "} 16 | 17 | Visitors 18 | 19 |
20 |+2.45%
25 |12 | Daily Traffic 13 |
14 |15 | 2.579{" "} 16 | 17 | Visitors 18 | 19 |
20 |+2.45%
25 |19 | Supervise your drive space in the easiest way 20 |
21 |25.6 GB
28 |50 GB
29 |6 | ©{new Date().getFullYear()} Aoi Kei. All Rights Reserved. 7 |
8 | 9 |7 | ©{1900 + new Date().getFullYear()} Horizon UI. All Rights Reserved. 8 |
9 |24 | Stay on the pulse of distributed projects with an anline whiteboard to 25 | plan, coordinate and discuss 26 |
27 | 30 |Product Manager
24 |17
30 |Posts
31 |34 | 9.7K 35 |
36 |Followers
37 |40 | 434 41 |
42 |Following
43 |29 | $37.5K 30 |
31 |Total Spent
33 |+2.45%
36 |29 | $37.5K 30 |
31 |Total Spent
33 |+2.45%
36 |48 | {route.name} 49 |
50 |48 | {route.name} 49 |
50 |Upgrade to PRO
31 |32 | Improve your development process and start doing more with Horizon UI 33 | PRO! 34 |
35 | 36 | 41 | Upgrade to PRO 42 | 43 |Upgrade to PRO
31 |32 | Improve your development process and start doing more with Horizon UI 33 | PRO! 34 |
35 | 36 | 41 | Upgrade to PRO 42 | 43 |Your Files
32 |34 | 63% 35 |
36 |System
44 |46 | 25% 47 |
48 |Your Files
32 |34 | 63% 35 |
36 |System
44 |46 | 25% 47 |
48 |
31 |
32 |
37 |
38 |
43 |
44 |
49 |
50 |
43 | Back to Dashboard 44 |
45 |14 | Enter your email and password to sign in! 15 |
16 |or
27 | 28 |53 | Keep me logged In 54 |
55 |11 | As we live, our hearts turn colder. Cause pain is what we go through 12 | as we become older. We get insulted by others, lose trust for those 13 | others. We get back stabbed by friends. It becomes harder for us to 14 | give others a hand. We get our heart broken by people we love, even 15 | that we give them all... 16 |
17 |Education
22 |23 | Stanford University 24 |
25 |Languages
29 |30 | English, Spanish, Italian 31 |
32 |Department
36 |37 | Product Design 38 |
39 |Work History
43 |44 | English, Spanish, Italian 45 |
46 |Organization
50 |51 | Simmmple Web LLC 52 |
53 |Birthday
57 |58 | 20 July 1986 59 |
60 |29 | Landing Page Design 30 |
31 |41 | Mobile App Design 42 |
43 |53 | Dashboard Builder 54 |
55 |65 | Landing Page Design 66 |
67 |77 | Dashboard Builder 78 |
79 |29 | Landing Page Design 30 |
31 |41 | Mobile App Design 42 |
43 |53 | Dashboard Builder 54 |
55 |65 | Landing Page Design 66 |
67 |77 | Dashboard Builder 78 |
79 |47 | {title} 48 |
49 |50 | By {author} 51 |
52 |83 | Current Bid: {price} ETH 84 |
85 |87 | {" "} 88 | {data.owner}{" "} 89 |
90 |{}
99 | {data.price}ETH
100 |{data.time}
103 |ago
104 |16 | Here you can find more details about your projects. Keep you user 17 | engaged by providing meaningful information. 18 |
19 |28 | Technology behind the Blockchain 29 |
30 |31 | Project #1 . 32 | 36 | See product details 37 | 38 |
39 |53 | Technology behind the Blockchain 54 |
55 |56 | Project #1 . 57 | 61 | See product details 62 | 63 |
64 |78 | Technology behind the Blockchain 79 |
80 |81 | Project #1 . 82 | 86 | See product details 87 | 88 |
89 |NAME
30 | ), 31 | cell: (info: any) => ( 32 |33 | {info.getValue()} 34 |
35 | ), 36 | }), 37 | columnHelper.accessor("progress", { 38 | id: "progress", 39 | header: () => ( 40 |41 | PROGRESS 42 |
43 | ), 44 | cell: (info) => ( 45 |46 | {info.getValue()} 47 |
48 | ), 49 | }), 50 | columnHelper.accessor("quantity", { 51 | id: "quantity", 52 | header: () => ( 53 |54 | QUANTITY 55 |
56 | ), 57 | cell: (info) => ( 58 |59 | {info.getValue()} 60 |
61 | ), 62 | }), 63 | columnHelper.accessor("date", { 64 | id: "date", 65 | header: () => ( 66 |DATE
67 | ), 68 | cell: (info) => ( 69 |70 | {info.getValue()} 71 |
72 | ), 73 | }), 74 | ]; // eslint-disable-next-line 75 | const [data, setData] = React.useState(() => [...defaultData]); 76 | const table = useReactTable({ 77 | data, 78 | columns, 79 | state: { 80 | sorting, 81 | }, 82 | onSortingChange: setSorting, 83 | getCoreRowModel: getCoreRowModel(), 84 | getSortedRowModel: getSortedRowModel(), 85 | debugTable: true, 86 | }); 87 | return ( 88 ||
109 |
110 | {flexRender(
111 | header.column.columnDef.header,
112 | header.getContext()
113 | )}
114 | {{
115 | asc: "",
116 | desc: "",
117 | }[header.column.getIsSorted() as string] ?? null}
118 |
119 | |
120 | );
121 | })}
122 |
|---|
| 138 | {flexRender( 139 | cell.column.columnDef.cell, 140 | cell.getContext() 141 | )} 142 | | 143 | ); 144 | })} 145 |
NAME
28 | ), 29 | cell: (info: any) => ( 30 |39 | {info.getValue()[0]} 40 |
41 |48 | ARTWORKS 49 |
50 | ), 51 | cell: (info) => ( 52 |53 | {info.getValue()} 54 |
55 | ), 56 | }), 57 | columnHelper.accessor("rating", { 58 | id: "rating", 59 | header: () => ( 60 |61 | RATING 62 |
63 | ), 64 | cell: (info) => ( 65 ||
108 |
109 | {flexRender(
110 | header.column.columnDef.header,
111 | header.getContext()
112 | )}
113 | {{
114 | asc: "",
115 | desc: "",
116 | }[header.column.getIsSorted() as string] ?? null}
117 |
118 | |
119 | );
120 | })}
121 |
|---|
| 137 | {flexRender( 138 | cell.column.columnDef.cell, 139 | cell.getContext() 140 | )} 141 | | 142 | ); 143 | })} 144 |
NAME
31 | ), 32 | cell: (info: any) => ( 33 |40 | {info.getValue()[0]} 41 |
42 |49 | PROGRESS 50 |
51 | ), 52 | cell: (info) => ( 53 |54 | {info.getValue()} 55 |
56 | ), 57 | }), 58 | columnHelper.accessor("quantity", { 59 | id: "quantity", 60 | header: () => ( 61 |62 | QUANTITY 63 |
64 | ), 65 | cell: (info) => ( 66 |67 | {info.getValue()} 68 |
69 | ), 70 | }), 71 | columnHelper.accessor("date", { 72 | id: "date", 73 | header: () => ( 74 |DATE
75 | ), 76 | cell: (info) => ( 77 |78 | {info.getValue()} 79 |
80 | ), 81 | }), 82 | ]; // eslint-disable-next-line 83 | const [data, setData] = React.useState(() => [...defaultData]); 84 | const table = useReactTable({ 85 | data, 86 | columns, 87 | state: { 88 | sorting, 89 | }, 90 | onSortingChange: setSorting, 91 | getCoreRowModel: getCoreRowModel(), 92 | getSortedRowModel: getSortedRowModel(), 93 | debugTable: true, 94 | }); 95 | return ( 96 ||
118 |
119 | {flexRender(
120 | header.column.columnDef.header,
121 | header.getContext()
122 | )}
123 | {{
124 | asc: "",
125 | desc: "",
126 | }[header.column.getIsSorted() as string] ?? null}
127 |
128 | |
129 | );
130 | })}
131 |
|---|
| 147 | {flexRender( 148 | cell.column.columnDef.cell, 149 | cell.getContext() 150 | )} 151 | | 152 | ); 153 | })} 154 |
NAME
31 | ), 32 | cell: (info: any) => ( 33 |40 | {info.getValue()[0]} 41 |
42 |49 | PROGRESS 50 |
51 | ), 52 | cell: (info) => ( 53 |54 | {info.getValue()} 55 |
56 | ), 57 | }), 58 | columnHelper.accessor("quantity", { 59 | id: "quantity", 60 | header: () => ( 61 |62 | QUANTITY 63 |
64 | ), 65 | cell: (info) => ( 66 |67 | {info.getValue()} 68 |
69 | ), 70 | }), 71 | columnHelper.accessor("date", { 72 | id: "date", 73 | header: () => ( 74 |DATE
75 | ), 76 | cell: (info) => ( 77 |78 | {info.getValue()} 79 |
80 | ), 81 | }), 82 | ]; // eslint-disable-next-line 83 | const [data, setData] = React.useState(() => [...defaultData]); 84 | const table = useReactTable({ 85 | data, 86 | columns, 87 | state: { 88 | sorting, 89 | }, 90 | onSortingChange: setSorting, 91 | getCoreRowModel: getCoreRowModel(), 92 | getSortedRowModel: getSortedRowModel(), 93 | debugTable: true, 94 | }); 95 | return ( 96 ||
118 |
119 | {flexRender(
120 | header.column.columnDef.header,
121 | header.getContext()
122 | )}
123 | {{
124 | asc: "",
125 | desc: "",
126 | }[header.column.getIsSorted() as string] ?? null}
127 |
128 | |
129 | );
130 | })}
131 |
|---|
| 147 | {flexRender( 148 | cell.column.columnDef.cell, 149 | cell.getContext() 150 | )} 151 | | 152 | ); 153 | })} 154 |
NAME
31 | ), 32 | cell: (info: any) => ( 33 |40 | {info.getValue()[0]} 41 |
42 |49 | PROGRESS 50 |
51 | ), 52 | cell: (info) => ( 53 |54 | {info.getValue()} 55 |
56 | ), 57 | }), 58 | columnHelper.accessor("quantity", { 59 | id: "quantity", 60 | header: () => ( 61 |62 | QUANTITY 63 |
64 | ), 65 | cell: (info) => ( 66 |67 | {info.getValue()} 68 |
69 | ), 70 | }), 71 | columnHelper.accessor("date", { 72 | id: "date", 73 | header: () => ( 74 |DATE
75 | ), 76 | cell: (info) => ( 77 |78 | {info.getValue()} 79 |
80 | ), 81 | }), 82 | ]; // eslint-disable-next-line 83 | const [data, setData] = React.useState(() => [...defaultData]); 84 | const table = useReactTable({ 85 | data, 86 | columns, 87 | state: { 88 | sorting, 89 | }, 90 | onSortingChange: setSorting, 91 | getCoreRowModel: getCoreRowModel(), 92 | getSortedRowModel: getSortedRowModel(), 93 | debugTable: true, 94 | }); 95 | return ( 96 ||
118 |
119 | {flexRender(
120 | header.column.columnDef.header,
121 | header.getContext()
122 | )}
123 | {{
124 | asc: "",
125 | desc: "",
126 | }[header.column.getIsSorted() as string] ?? null}
127 |
128 | |
129 | );
130 | })}
131 |
|---|
| 147 | {flexRender( 148 | cell.column.columnDef.cell, 149 | cell.getContext() 150 | )} 151 | | 152 | ); 153 | })} 154 |
8 | 9 | [
](https://github.com/horizon-ui/horizon-tailwind-react-ts)
10 |
11 | 12 | 13 | Get started and build your dream web app with Horizon UI, the trendiest & innovative Open Source Admin Template for Tailwind CSS & React! 14 | 15 | --- 16 | 17 | ### Introduction 18 | 19 | Designed for those who like modern UI elements and beautiful websites. Made of hundred of elements, designed blocks and fully coded pages, Horizon UI is ready to help you create stunning websites and webapps. 20 | 21 | Save hundreds of hours trying to create and develop a dashboard from scratch. 22 | The fastest, most responsive & trendiest dashboard for Tailwind CSS is here. Seriously. 23 | 24 | With Horizon UI you will find many examples for pages like NFTs Pages, 25 | Authentication Pages, Profile and so on. Just choose between a Basic Design or a cover and you are good to go! 26 | 27 | ### 🎉 [NEW] Horizon UI Components 28 | 29 | All the main components from both versions, this will help you to see and interact with all & the latest added components of Horizon (also, new components are on the way, stay tuned)! ⚡️ 30 | See all components 31 | 32 | ### Documentation 33 | 34 | Each element is well presented in a very complex documentation. You can read more about the documentation here. 35 | 36 | ### Quick Start 37 | 38 | Install Horizon UI by running either of the following: 39 | 40 | - Install NodeJS LTS from [NodeJs Official Page](https://nodejs.org/en/?ref=horizon-documentation) (NOTE: Product only works with LTS version). 41 | 42 | Clone the repository with the following command: 43 | 44 | ```bash 45 | git clone https://github.com/horizon-ui/horizon-tailwind-react-ts.git 46 | ``` 47 | 48 | Run in terminal this command: 49 | 50 | ```bash 51 | npm install 52 | ``` 53 | 54 | Then run this command to start your local server 55 | 56 | ```bash 57 | npm start 58 | ``` 59 | 60 | ### Example Pages 61 | 62 | If you want to get inspiration or just show something directly to your clients, you can jump start your development with our pre-built example pages. You will be able to quickly set up the basic structure for your web project. 63 | 64 | View example pages here. 65 | 66 | ### Versions 67 | 68 | | Free Version | PRO Version | 69 | | -------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | 70 | | [](https://www.horizon-ui.com/?ref=readme-horizon-tailwind-react-ts) | [](https://www.horizon-ui.com/pro?ref=readme-horizon-tailwind-react-ts) | 71 | 72 | ### Figma Version 73 | 74 | Horizon UI is available in Figma format as well! Check it out on Figma 75 | Community! 🎨 76 | [See the Horizon UI Figma design files](https://bit.ly/horizon-figma) 77 | 78 | ### Reporting Issues 79 | 80 | We use GitHub Issues as the official bug tracker for the Horizon UI. Here are 81 | some advices for our users that want to report an issue: 82 | 83 | 1. Make sure that you are using the latest version of the Horizon UI Dashbaord. 84 | Check the CHANGELOG from your dashboard on our 85 | [CHANGE LOG File](https://github.com/horizon-ui/horizon-tailwind-react-ts/blob/main/CHANGELOG.md?ref=readme-horizon-tailwind-react-ts). 86 | 2. Providing us reproducible steps for the issue will shorten the time it takes 87 | for it to be fixed. 88 | 3. Some issues may be browser specific, so specifying in what browser you 89 | encountered the issue might help. 90 | 91 | --- 92 | 93 | ### Community 94 | 95 | Connect with the community! Feel free to ask questions, report issues, and meet new people that already use Horizon UI! 96 | 97 | 💬 [Join the #HorizonUI Discord Community!](https://discord.gg/f6tEKFBd4m) 98 | 99 | ### Copyright and license 100 | 101 | ⭐️ [Copyright 2023 Horizon UI ](https://www.horizon-ui.com/?ref=readme-horizon-tailwind-react-ts) 102 | 103 | 📄 [Horizon UI License](https://www.simmmple.com/licenses?ref=readme-horizon-tailwind-react-ts) 104 | -------------------------------------------------------------------------------- /src/views/admin/marketplace/index.tsx: -------------------------------------------------------------------------------- 1 | import Banner from "./components/Banner"; 2 | 3 | import ThreeDImg from "assets/img/services/3d.jpg"; 4 | import AnimationImg from "assets/img/services/animation.jpg"; 5 | import ChatImg from "assets/img/services/chat.jpg"; 6 | import ComicImg from "assets/img/services/comics.jpg"; 7 | import GamingImg from "assets/img/services/gaming.jpg"; 8 | import ImageImg from "assets/img/services/image.jpg"; 9 | import MusicImg from "assets/img/services/music.jpg"; 10 | import NarrativeImg from "assets/img/services/narrative.jpg"; 11 | 12 | import ServiceCard from "components/card/ServiceCard"; 13 | import { 14 | MdMovie, 15 | MdBook, 16 | MdImage, 17 | MdBookmark, 18 | MdMusicNote, 19 | MdGamepad, 20 | Md3DRotation, 21 | MdChat, 22 | } from "react-icons/md"; 23 | 24 | interface ServiceList { 25 | title: string; 26 | subTitle: string; 27 | icon: JSX.Element; 28 | list: string[]; 29 | image: string; 30 | bgColor: string; 31 | } 32 | const Marketplace = () => { 33 | const serviceList: ServiceList[] = [ 34 | { 35 | title: "Image Generation", 36 | subTitle: "Create images with Stable Diffusion", 37 | icon:
NAME
35 | ), 36 | cell: (info) => ( 37 |38 | {info.getValue()} 39 |
40 | ), 41 | }), 42 | columnHelper.accessor("status", { 43 | id: "status", 44 | header: () => ( 45 |46 | STATUS 47 |
48 | ), 49 | cell: (info) => ( 50 |59 | {info.getValue()} 60 |
61 |DATE
68 | ), 69 | cell: (info) => ( 70 |71 | {info.getValue()} 72 |
73 | ), 74 | }), 75 | columnHelper.accessor("progress", { 76 | id: "progress", 77 | header: () => ( 78 |79 | PROGRESS 80 |
81 | ), 82 | cell: (info) => ( 83 ||
123 |
124 | {flexRender(
125 | header.column.columnDef.header,
126 | header.getContext()
127 | )}
128 | {{
129 | asc: "",
130 | desc: "",
131 | }[header.column.getIsSorted() as string] ?? null}
132 |
133 | |
134 | );
135 | })}
136 |
|---|
| 152 | {flexRender( 153 | cell.column.columnDef.cell, 154 | cell.getContext() 155 | )} 156 | | 157 | ); 158 | })} 159 |