talksik/nirvana
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adding ant design

Browse Source
This commit is contained in:
Arjun Patel
2022-01-11 16:49:53 -08:00
parent c282542312
commit 8f85b9d9e1
5 changed files with 1390 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+1352
View File
File diff suppressed because it is too large Load Diff
package.json
+1
View File
@@ -8,6 +8,7 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"antd": "^4.18.3",
"next": "12.0.7", "next": "12.0.7",
"react": "17.0.2", "react": "17.0.2",
"react-dom": "17.0.2", "react-dom": "17.0.2",
pages/_app.js
+1
View File
@@ -1,4 +1,5 @@
import '../styles/globals.css' import '../styles/globals.css'
import 'antd/dist/antd.css';
import Head from 'next/head' import Head from 'next/head'
function MyApp({ Component, pageProps }) { function MyApp({ Component, pageProps }) {
pages/teams/demo.tsx
+27 -16
View File
@@ -16,6 +16,8 @@ import { BsThreeDots } from "react-icons/bs";
import { UserStatus, User } from '../../models/user' import { UserStatus, User } from '../../models/user'
import { KeyCode } from '../../globals/keycode' import { KeyCode } from '../../globals/keycode'
import { Tabs } from "antd";
let testFriends = [ let testFriends = [
{ {
name: "Liam", name: "Liam",
@@ -273,7 +275,7 @@ export default class Demo extends React.Component<MyProps, MyState> {
{/* all rooms */} {/* all rooms */}
<span className='flex flex-row flex-wrap'> <span className='flex flex-row flex-wrap'>
{/* bugs room */} {/* spontaneous room */}
<span className='flex flex-col bg-white bg-opacity-80 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'> <span className='flex flex-col bg-white bg-opacity-80 rounded-lg justify-between w-96 max-w-screen-sm m-2 overflow-clip'>
{/* header */} {/* header */}
<span className='flex flex-row justify-between items-baseline space-x-1 p-5'> <span className='flex flex-row justify-between items-baseline space-x-1 p-5'>
@@ -287,7 +289,7 @@ export default class Demo extends React.Component<MyProps, MyState> {
<span className='text-xs my-3 bg-gray-400 <span className='text-xs my-3 bg-gray-400
text-white p-1 rounded-md flex flex-row space-x-2 items-center'> text-white p-1 rounded-md flex flex-row space-x-2 items-center'>
<FaClock /> <FaClock />
<span>00:12</span> <span>00:35</span>
</span> </span>
<span className='text-xs my-3 text-white bg-red-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'> <span className='text-xs my-3 text-white bg-red-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>
@@ -331,6 +333,12 @@ export default class Demo extends React.Component<MyProps, MyState> {
{/* badges and tags */} {/* badges and tags */}
<span className='flex flex-row flex-wrap space-x-2'> <span className='flex flex-row flex-wrap space-x-2'>
<span className='text-xs my-3 bg-gray-400
text-white p-1 rounded-md flex flex-row space-x-2 items-center'>
<FaClock />
<span>00:01</span>
</span>
<span className='text-xs my-3 text-white bg-purple-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'> <span className='text-xs my-3 text-white bg-purple-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>
<span>design</span> <span>design</span>
</span> </span>
@@ -353,7 +361,7 @@ export default class Demo extends React.Component<MyProps, MyState> {
<span className="inline-flex flex-row-reverse items-center shrink-0 mr-1"> <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
<span className='relative flex'> <span className='relative flex'>
<span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span> <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
<Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-05.svg"} alt="profile" width={30} height={30} /> <Image className="" src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"} alt="profile" width={30} height={30} />
</span> </span>
</span> </span>
@@ -382,6 +390,10 @@ export default class Demo extends React.Component<MyProps, MyState> {
<span className='text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'> <span className='text-xs my-3 text-white bg-cyan-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>
<span>scrum</span> <span>scrum</span>
</span> </span>
<span className='text-xs my-3 text-white bg-teal-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center'>
<span>engineering</span>
</span>
</span> </span>
</span> </span>
@@ -414,24 +426,23 @@ export default class Demo extends React.Component<MyProps, MyState> {
{/* files */} {/* files */}
<section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'> <section className='p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md'>
<span className='flex flex-row justify-end space-x-2 pb-5 items-center'> <span className='flex flex-row justify-end space-x-2 pb-5 items-center'>
<span className="text-white mr-auto">FILES</span> <span className="text-white mr-auto">FILES</span>
</span> </span>
<div className='flex flex-row'> <div className='flex flex-row'>
<div className='flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 rounded-lg items-center justify-start'> <div className='flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 rounded-lg items-center justify-start'>
<FaFilePdf className='text-4xl text-orange-300' /> <FaFilePdf className='text-4xl text-orange-300' />
<span className="text-gray-200 text-sm mr-10">report.pdf</span> <span className="text-gray-200 text-sm mr-10">report.pdf</span>
<button className='ml-auto p-2 text-sm'>
<FaCopy className='text-gray-200'/>
</button>
</div>
<button className='ml-auto p-2 text-sm'>
<FaCopy className='text-gray-200'/>
</button>
</div> </div>
</section> </div>
</section>
</div> </div>
styles/globals.css
+7 -6
View File
@@ -16,7 +16,13 @@ a {
} }
/* my personal css */ /* my personal css */
html {
main {
padding: 4em;
font-family: "Poppins", sans-serif;
}
body {
background: url("/wallpapers/dark-mountains.jpg") no-repeat center center background: url("/wallpapers/dark-mountains.jpg") no-repeat center center
fixed; fixed;
-webkit-background-size: cover; -webkit-background-size: cover;
@@ -25,11 +31,6 @@ html {
background-size: cover; background-size: cover;
} }
main {
padding: 4em;
font-family: "Poppins", sans-serif;
}
.font-satisfy { .font-satisfy {
font-family: "Satisfy", cursive; font-family: "Satisfy", cursive;
} }