Skip to content

Commit 35582a6

Browse files
tiluckdavetiluckdave
authored
Merge pull request #14 from YogPanjarale/main
Made Card
2 parents 4479c17 + 14c8946 commit 35582a6

File tree

11 files changed

+3376
-101
lines changed

11 files changed

+3376
-101
lines changed

‎frontend/next-env.d.ts

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/// <reference types="next" />
2+
/// <reference types="next/types/global" />
3+
/// <reference types="next/image-types/global" />

‎frontend/package.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,19 @@
99
},
1010
"dependencies": {
1111
"@heroicons/react": "^1.0.1",
12+
"graphql-code-generator": "^0.18.2",
1213
"next": "11.0.1",
1314
"react": "17.0.2",
1415
"react-dom": "17.0.2"
1516
},
1617
"devDependencies": {
18+
"@types/node": "^15.12.4",
19+
"@types/react": "^17.0.11",
1720
"autoprefixer": "^10.2.6",
21+
"graphql-codegen-apollo-next-ssr": "^1.6.1",
1822
"postcss": "^8.3.5",
1923
"sass": "^1.35.1",
20-
"tailwindcss": "^2.2.2"
24+
"tailwindcss": "^2.2.2",
25+
"typescript": "^4.3.4"
2126
}
2227
}

‎frontend/pages/index.js

-69
This file was deleted.

‎frontend/pages/index.tsx

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import Head from "next/head";
2+
import Image from "next/image";
3+
import styles from "../styles/Home.module.css";
4+
import { PostCard } from "../src/components/postCard";
5+
import { PostPreview, } from "../src/types/types";
6+
const samplePost: PostPreview = {
7+
id: "3",
8+
title: "What happened at the ‘Clinify x Beyond Overthinking’ meetup?",
9+
backgroundlink:
10+
"./Assets/bg.jfif",
11+
category: "Clinify Events",
12+
slug: "what-happened-at-the-clinify-x-beyond-overthinking-meetup-none",
13+
author: {
14+
id: "2",
15+
name: "Divyansh Aggarwal",
16+
picture:
17+
"/Assets/divyansh.png",
18+
},
19+
};
20+
21+
export default function Home() {
22+
return (
23+
<div className="flex flex-col justify-center items-center">
24+
<Head>
25+
<title>Blue Learn Blog</title>
26+
<meta
27+
name="description"
28+
content="Clinify Blog, in less words, is a place where clinify Members write (ranging from the stuff happening at Clinify to the skills they have been learning) and others read."
29+
/>
30+
<link rel="icon" href="/favicon.svg" />
31+
</Head>
32+
33+
<main className="flex flex-col justify-center items-center">
34+
<p className={styles.title}>
35+
Welcome to{" "}
36+
<a href="https://github.com/Clinify-Open-Sauce/ClinifyBlog">
37+
Blue Learn Blog!
38+
</a>
39+
</p>
40+
41+
42+
<div className={styles.grid}>
43+
<PostCard {...samplePost} />
44+
</div>
45+
</main>
46+
47+
</div>
48+
);
49+
}

‎frontend/public/Assets/bg.jfif

21.8 KB
Binary file not shown.

‎frontend/public/Assets/divyansh.png

17 KB
Loading

‎frontend/public/later.svg

+16
Loading

‎frontend/src/components/postCard.tsx

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import React from "react";
2+
import { PostPreview } from "../types/types";
3+
4+
const LaterSvg = () => (
5+
<svg
6+
width="32"
7+
height="32"
8+
viewBox="0 0 32 32"
9+
fill="none"
10+
xmlns="http://www.w3.org/2000/svg"
11+
>
12+
<path
13+
d="M15.5 7.75H13.5625V17.4375H21.3125V15.5H15.5V7.75Z"
14+
fill="#F2F2F2"
15+
/>
16+
<path
17+
d="M15.5 0C9.6875 0 4.65 3.1 2.13125 7.94375L0 5.8125V13.5625H7.75L4.84375 10.6562C6.78125 6.78125 10.85 3.875 15.5 3.875C21.8937 3.875 27.125 9.10625 27.125 15.5C27.125 21.8937 21.8937 27.125 15.5 27.125C12.0125 27.125 8.9125 25.575 6.78125 23.0562L3.875 25.575C6.5875 28.8687 10.85 31 15.5 31C24.025 31 31 24.025 31 15.5C31 6.975 24.025 0 15.5 0Z"
18+
fill="#F2F2F2"
19+
/>
20+
</svg>
21+
);
22+
23+
export const PostCard: React.FC<PostPreview> = ({
24+
title,
25+
backgroundlink,
26+
author,
27+
}) => {
28+
return (
29+
<div>
30+
<div className="bg-gradient-to-br from-gray-100 via-gray-100 to-white shadow rounded-3xl
31+
h-auto max-w-sm p-4 flex flex-col justify-around"
32+
>
33+
<img className="rounded-3xl" src={backgroundlink} alt={title} />
34+
<p className="w-full h-auto py-2 text-lg font-extrabold text-center text-gray-800">
35+
{title}
36+
</p>
37+
<div className="h-16 flex flex-row w-full justify-between">
38+
<div className="flex flex-row items-stretch justify-center w-auto py-2.5 px-0 pr-1 bg-gray-200 rounded-full">
39+
<img
40+
className="mx-2 w-12 h-12 rounded-full self-center"
41+
src={author.picture}
42+
alt={"Image of " + author.name}
43+
/>
44+
<p className="flex-1 py-2 pr-2 h-full text-lg font-semibold text-gray-800 whitespace-nowrap self-center">
45+
{author.name}
46+
</p>
47+
</div>
48+
<div className="w-16 h-16 bg-gray-800 rounded-full flex justify-center items-center shadow-md self-end mr-4">
49+
50+
<LaterSvg/>
51+
</div>
52+
</div>
53+
</div>
54+
</div>
55+
);
56+
};

‎frontend/src/types/types.ts

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export interface Post {
2+
id: string;
3+
title: string;
4+
backgroundlink: string;
5+
slug: string;
6+
category: string;
7+
author: Author;
8+
content: string;
9+
}
10+
export type PostPreview = Omit<Post,"content">
11+
export interface Author {
12+
id: string;
13+
name: string;
14+
picture: string;
15+
}

‎frontend/tsconfig.json

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"lib": [
5+
"dom",
6+
"dom.iterable",
7+
"esnext"
8+
],
9+
"allowJs": true,
10+
"skipLibCheck": true,
11+
"strict": false,
12+
"forceConsistentCasingInFileNames": true,
13+
"noEmit": true,
14+
"esModuleInterop": true,
15+
"module": "esnext",
16+
"moduleResolution": "node",
17+
"resolveJsonModule": true,
18+
"isolatedModules": true,
19+
"jsx": "preserve"
20+
},
21+
"include": [
22+
"next-env.d.ts",
23+
"**/*.ts",
24+
"**/*.tsx"
25+
],
26+
"exclude": [
27+
"node_modules"
28+
]
29+
}

0 commit comments

Comments
 (0)