+components
Browse files- components/card.tsx +41 -0
- components/searchBar.tsx +30 -0
- pages/index.tsx +17 -106
- public/favicon.ico +0 -0
- public/next.svg +0 -1
- public/vercel.svg +0 -1
components/card.tsx
ADDED
@@ -0,0 +1,41 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import React from 'react';
|
2 |
+
|
3 |
+
interface CardProps {
|
4 |
+
username: string;
|
5 |
+
title: string;
|
6 |
+
description: string;
|
7 |
+
emoji: string;
|
8 |
+
colorFrom: string;
|
9 |
+
colorTo: string;
|
10 |
+
updateDate: string;
|
11 |
+
numLikes: number;
|
12 |
+
}
|
13 |
+
|
14 |
+
const Card: React.FC<CardProps> = ({
|
15 |
+
username,
|
16 |
+
title,
|
17 |
+
description,
|
18 |
+
emoji,
|
19 |
+
colorFrom,
|
20 |
+
colorTo,
|
21 |
+
updateDate,
|
22 |
+
numLikes,
|
23 |
+
}) => {
|
24 |
+
return (
|
25 |
+
<div
|
26 |
+
className={`bg-gradient-to-br from-${colorFrom}-500 to-${colorTo}-500 rounded-lg p-6 flex flex-col justify-between h-72`}
|
27 |
+
>
|
28 |
+
<div className="flex justify-between items-center">
|
29 |
+
<h2 className="text-xl font-bold">{emoji}{username}/{title}</h2>
|
30 |
+
<div className="flex items-center">
|
31 |
+
<span>{numLikes}π€</span>
|
32 |
+
</div>
|
33 |
+
</div>
|
34 |
+
<div className="flex items-center h-full">
|
35 |
+
<p className="text-2xl">{description}</p>
|
36 |
+
</div>
|
37 |
+
</div>
|
38 |
+
);
|
39 |
+
};
|
40 |
+
|
41 |
+
export default Card;
|
components/searchBar.tsx
ADDED
@@ -0,0 +1,30 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import React, { useState } from "react";
|
2 |
+
|
3 |
+
interface SearchBarProps {
|
4 |
+
onSearch: (query: string) => void;
|
5 |
+
}
|
6 |
+
|
7 |
+
const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
|
8 |
+
const [query, setQuery] = useState("");
|
9 |
+
|
10 |
+
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
|
11 |
+
if (event.key === "Enter") {
|
12 |
+
onSearch(query);
|
13 |
+
}
|
14 |
+
};
|
15 |
+
|
16 |
+
return (
|
17 |
+
<div className="flex items-center justify-center bg-gray-900">
|
18 |
+
<input
|
19 |
+
type="text"
|
20 |
+
placeholder="Search"
|
21 |
+
className="w-64 px-4 py-2 text-gray-200 bg-gray-800 border border-gray-700 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-2"
|
22 |
+
value={query}
|
23 |
+
onChange={(e) => setQuery(e.target.value)}
|
24 |
+
onKeyDown={handleKeyDown}
|
25 |
+
/>
|
26 |
+
</div>
|
27 |
+
);
|
28 |
+
};
|
29 |
+
|
30 |
+
export default SearchBar;
|
pages/index.tsx
CHANGED
@@ -1,118 +1,29 @@
|
|
1 |
-
import Image from 'next/image'
|
2 |
import { Inter } from 'next/font/google'
|
|
|
|
|
3 |
|
4 |
const inter = Inter({ subsets: ['latin'] })
|
5 |
|
6 |
export default function Home() {
|
|
|
|
|
|
|
|
|
7 |
return (
|
8 |
<main
|
9 |
className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
|
10 |
>
|
11 |
-
<
|
12 |
-
|
13 |
-
|
14 |
-
|
15 |
-
|
16 |
-
|
17 |
-
|
18 |
-
|
19 |
-
|
20 |
-
|
21 |
-
|
22 |
-
>
|
23 |
-
By{' '}
|
24 |
-
<Image
|
25 |
-
src="/vercel.svg"
|
26 |
-
alt="Vercel Logo"
|
27 |
-
className="dark:invert"
|
28 |
-
width={100}
|
29 |
-
height={24}
|
30 |
-
priority
|
31 |
-
/>
|
32 |
-
</a>
|
33 |
-
</div>
|
34 |
-
</div>
|
35 |
-
|
36 |
-
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700/10 after:dark:from-sky-900 after:dark:via-[#0141ff]/40 before:lg:h-[360px]">
|
37 |
-
<Image
|
38 |
-
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
|
39 |
-
src="/next.svg"
|
40 |
-
alt="Next.js Logo"
|
41 |
-
width={180}
|
42 |
-
height={37}
|
43 |
-
priority
|
44 |
-
/>
|
45 |
-
</div>
|
46 |
-
|
47 |
-
<div className="mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left">
|
48 |
-
<a
|
49 |
-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
|
50 |
-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
51 |
-
target="_blank"
|
52 |
-
rel="noopener noreferrer"
|
53 |
-
>
|
54 |
-
<h2 className={`mb-3 text-2xl font-semibold`}>
|
55 |
-
Docs{' '}
|
56 |
-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
57 |
-
->
|
58 |
-
</span>
|
59 |
-
</h2>
|
60 |
-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
61 |
-
Find in-depth information about Next.js features and API.
|
62 |
-
</p>
|
63 |
-
</a>
|
64 |
-
|
65 |
-
<a
|
66 |
-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
|
67 |
-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
68 |
-
target="_blank"
|
69 |
-
rel="noopener noreferrer"
|
70 |
-
>
|
71 |
-
<h2 className={`mb-3 text-2xl font-semibold`}>
|
72 |
-
Learn{' '}
|
73 |
-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
74 |
-
->
|
75 |
-
</span>
|
76 |
-
</h2>
|
77 |
-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
78 |
-
Learn about Next.js in an interactive course with quizzes!
|
79 |
-
</p>
|
80 |
-
</a>
|
81 |
-
|
82 |
-
<a
|
83 |
-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
|
84 |
-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
85 |
-
target="_blank"
|
86 |
-
rel="noopener noreferrer"
|
87 |
-
>
|
88 |
-
<h2 className={`mb-3 text-2xl font-semibold`}>
|
89 |
-
Templates{' '}
|
90 |
-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
91 |
-
->
|
92 |
-
</span>
|
93 |
-
</h2>
|
94 |
-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
95 |
-
Discover and deploy boilerplate example Next.js projects.
|
96 |
-
</p>
|
97 |
-
</a>
|
98 |
-
|
99 |
-
<a
|
100 |
-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
|
101 |
-
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
|
102 |
-
target="_blank"
|
103 |
-
rel="noopener noreferrer"
|
104 |
-
>
|
105 |
-
<h2 className={`mb-3 text-2xl font-semibold`}>
|
106 |
-
Deploy{' '}
|
107 |
-
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
|
108 |
-
->
|
109 |
-
</span>
|
110 |
-
</h2>
|
111 |
-
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
|
112 |
-
Instantly deploy your Next.js site to a shareable URL with Vercel.
|
113 |
-
</p>
|
114 |
-
</a>
|
115 |
-
</div>
|
116 |
</main>
|
117 |
)
|
118 |
}
|
|
|
|
|
1 |
import { Inter } from 'next/font/google'
|
2 |
+
import SearchBar from '@/components/searchBar'
|
3 |
+
import Card from '@/components/card'
|
4 |
|
5 |
const inter = Inter({ subsets: ['latin'] })
|
6 |
|
7 |
export default function Home() {
|
8 |
+
function onSearch(query: string): void {
|
9 |
+
alert(`Searching for ${query}`)
|
10 |
+
}
|
11 |
+
|
12 |
return (
|
13 |
<main
|
14 |
className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
|
15 |
>
|
16 |
+
<SearchBar onSearch={onSearch} />
|
17 |
+
<Card
|
18 |
+
username='anzorq'
|
19 |
+
title='zedzek'
|
20 |
+
description='Circassian translator demo'
|
21 |
+
emoji='π¬'
|
22 |
+
colorFrom='green'
|
23 |
+
colorTo='yellow'
|
24 |
+
updateDate='19 days'
|
25 |
+
numLikes={5}
|
26 |
+
/>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
27 |
</main>
|
28 |
)
|
29 |
}
|
public/favicon.ico
DELETED
Binary file (25.9 kB)
|
|
public/next.svg
DELETED
public/vercel.svg
DELETED