Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Next13 appdir #20

Merged
merged 2 commits into from
Jan 21, 2023
Merged

Next13 appdir #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0aadd57
UI of resources page improved massively
Palanikannan1437 Jan 21, 2023
c4e58a4
fixed search bar and other minor bugs
Palanikannan1437 Jan 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion app/app/layout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import 'styles/globals.css';
import Footer from '../components/footer';

export default function RootLayout({
children,
}) {
return (
<html lang="en">
<body>{children}</body>
<body>
{children}
<Footer />
</body>
</html>
);
}
Expand Down
3 changes: 2 additions & 1 deletion app/app/page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import Hero from "../components/Hero/Hero";
import Nav from "../components/Hero/Nav";
import { getTweets } from '../lib/twitterAPI.js';
import Timeline from "../components/Timeline";
import Footer from "../components/footer";

let imgUrl = "bgdevops.gif";
const gifStyle = {
Expand All @@ -10,7 +11,7 @@ const gifStyle = {
};

export default async function Home() {
const tweets = await getTweets(["1537460982582128641", "1581497472043536385", "1586751198962495489", "1523372831513673729", "1526398860389519361", "1555793156847063040", "1547812558295670784", "1560892185842941953"]);
const tweets = await getTweets(["1586751198962495489", "1555793156847063040", "1560892185842941953", "1591643164196372480", "1590550565142290432", "1602540813338423296", "1596569166349467648", "1581497472043536385"]);

return (
<>
Expand Down
57 changes: 39 additions & 18 deletions app/app/resources/FilterResource.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,25 +23,46 @@ function FilterResource({ resource }) {
}
});
}

return (
<>
<h1 className="flex text-white text-2xl justify-center sm:text-5xl font-bold pt-10">
ALL RESOURCES
</h1>
<div className=" m-auto">
<div className="flex md:h-12 md:mb-[2.25rem] justify-center">
<input
type="search"
name="search-form"
id="search-form"
className="focus:outline-0 mt-5 w-64 h-8 md:mt-9 pl-2 md:w-10/11 md:h-12 sm:w-6/12"
placeholder="Search for..."
value={q}
onChange={(e) => {
setQ(e.target.value);
setTrigger(true);
}}
/>
<div className="relative flex flex-col items-center z-20 sm:items-start sm:flex-row sm:justify-around mt-[4vh] ">
<div className="sm:text-start text-center sm:mr-20 sm:max-w-[40vw] mt-[7vh] sm:mt-[10vh] ">
<h1 className="mb-4 text-5xl sm:text-3xl text-white dark:text-white md:text-6xl xl:text-7xl 2xl:text-8xl font-lato font-[900]">
DevOps
<br />
<span className="bg-gradient-to-r from-[#CC03FE] to-[#E34B2E] bg-clip-text text-transparent font-lato font-[900] text-5xl md:text-6xl xl:text-7xl 2xl:text-8xl ">
Resources
</span>
</h1>
</div>
</div>
<div className="m-auto">
<div className='max-w-xl mx-auto'>
<div className="relative flex items-center w-full h-12 rounded-lg focus-within:shadow-lg bg-white overflow-hidden">
<div className="grid place-items-center h-full w-12 text-gray-300">
<svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
</svg>
</div>

<input
className="peer h-full w-full outline-none text-sm text-gray-700 pr-2"
type="text"
id="search"
value={q}
placeholder="Search for resources..."
onChange={(e) => {
setQ(e.target.value);
setTrigger(true);
}}
onKeyDown={e => {
if (e.key === "Escape") {
setQ("")
}
}}
/>
</div>
</div>
<div className="flex flex-col items-center">
{trigger &&
Expand All @@ -53,7 +74,7 @@ function FilterResource({ resource }) {
setQ(x.name);
setTrigger(false);
}}
className=" bg-white p-1 w-64 border border-grey-600 min-h-10 md:h-8 sm:w-6/12 md:w-10/11"
className="bg-white p-1 border border-grey-600 min-h-10 md:h-8 w-full md:w-10/11 md:max-w-xl"
>
{x.name}
</div>
Expand Down
36 changes: 18 additions & 18 deletions app/components/Hero/Hero.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,25 @@ const Hero = () => {
const box2Text = "Resources";
return (
<div className="relative flex min-h-[80vh] flex-col items-center z-20 sm:items-start sm:flex-row sm:justify-around mt-[12vh] ">
<div className="sm:text-start text-center sm:mr-20 sm:max-w-[40vw] mt-[7vh] sm:mt-[10vh] ">
<h1 className="mb-4 text-5xl sm:text-3xl text-white dark:text-white md:text-6xl xl:text-7xl 2xl:text-8xl font-lato font-[900]">
DevOps
<br />
<span className="bg-gradient-to-r from-[#CC03FE] to-[#E34B2E] bg-clip-text text-transparent font-lato font-[900] text-5xl md:text-6xl xl:text-7xl 2xl:text-8xl ">
Community
</span>
</h1>
<p className="sm:text-lg text-white dark:text-white lg:text-xl 2xl:text-4xl font-lato font-[400]">
DevOps/SRE community is for those folks who are trying to learn or
explore DevOps with the help of experienced professionals.
Opportunities are open to share.
</p>
<div className="sm:text-start text-center sm:mr-20 sm:max-w-[40vw] mt-[7vh] sm:mt-[10vh] ">
<h1 className="mb-4 text-5xl sm:text-3xl text-white dark:text-white md:text-6xl xl:text-7xl 2xl:text-8xl font-lato font-[900]">
DevOps
<br />
<span className="bg-gradient-to-r from-[#CC03FE] to-[#E34B2E] bg-clip-text text-transparent font-lato font-[900] text-5xl md:text-6xl xl:text-7xl 2xl:text-8xl ">
Community
</span>
</h1>
<p className="sm:text-lg text-white dark:text-white lg:text-xl 2xl:text-4xl font-lato font-[400]">
DevOps/SRE community is for those folks who are trying to learn or
explore DevOps with the help of experienced professionals.
Opportunities are open to share.
</p>
</div>
<div className="mt-10 sm:mt-0 sm:max-w-[40vw] sm:align-baseline">
<Box1 img1Url={img1Url} box1Text={box1Text} />
<Box2 img2Url={img2Url} box2Text={box2Text} />
</div>
</div>
<div className="mt-10 sm:mt-0 sm:max-w-[40vw] sm:align-baseline">
<Box1 img1Url={img1Url} box1Text={box1Text} />
<Box2 img2Url={img2Url} box2Text={box2Text} />
</div>
</div>
);
};

Expand Down
27 changes: 18 additions & 9 deletions app/components/Timeline.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ export default function Timeline({ tweets }) {
<div className={styles.bg}>
<VerticalTimeline lineColor={'#F3F3F3'}>
{tweets.map((tweet) => {
return <div key={tweet}>{render(tweet)}</div>;
return <div key={tweet.id}>{render(tweet)}</div>;
})}
<VerticalTimelineElement
iconStyle={{
Expand All @@ -157,14 +157,23 @@ export default function Timeline({ tweets }) {
);
} else {
return (
<main
className="flex flex-col justify-center px-8 bg-gray-50 dark:bg-black"
>
<div className="flex flex-col justify-center items-start max-w-2xl mx-auto mb-16">
{tweets.map((tweet) => (
<Tweet key={tweet.id} {...tweet} />
))}
</div>
<main className='flex flex-col justify-center bg-gray-50 dark:bg-black'>
<div className='flex flex-col justify-center items-start max-w-2xl mx-auto mb-4'>
{tweets.map((tweet) => (
<div
key={tweet.id}
className='rounded border border-gray-300 dark:border-gray-800 m-2'
>
<Tweet
key={tweet.id}
{...tweet}
/>
</div>
))}
</div>
<Link href={'/resources'}>
<div className={styles.button1}>See All</div>
</Link>
</main>
);
}
Expand Down
Loading