Skip to content

Commit 6ff1ddc

Browse files
ehsanghaffarehsanghaffar
committed
add search module
1 parent ae499b1 commit 6ff1ddc

File tree

9 files changed

+229
-1
lines changed

9 files changed

+229
-1
lines changed

‎.env‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33

44
ENV_VARIABLE=production_server_only_variable
55
NEXT_PUBLIC_ENV_VARIABLE=production_public_variable
6-
NEXT_PUBLIC_DB_LOCAL_URL=mongodb://mongo:27017/denizpaz
6+
NEXT_PUBLIC_DB_LOCAL_URL=mongodb://localhost:27017/denizpaz
77
PORT=3000
88
STORE_PATH=upload

‎app/api/search/route.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { NextResponse } from "next/server";
2+
import { connectToDatabase } from "../../../lib/mongodb";
3+
import { Recipe } from "../../../models";
4+
5+
export const dynamic = 'force-dynamic'
6+
connectToDatabase()
7+
8+
export async function GET(req: Request) {
9+
try {
10+
const { searchParams } = new URL(req.url);
11+
const query = searchParams.get('q')
12+
const recipes = await Recipe.find()
13+
14+
const recipesData = recipes.filter((recipe) => {
15+
return recipe["name"].includes(query)
16+
})
17+
return NextResponse.json(recipesData);
18+
} catch (error) {
19+
console.log(error)
20+
}
21+
22+
}

‎app/globals.css‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -809,6 +809,7 @@ html {
809809

810810
.recipe-header-img {
811811
width: 100%;
812+
height: 400px;
812813
}
813814

814815
.pRecipe-title {
@@ -915,4 +916,103 @@ html {
915916
.container {
916917
max-width: 100%;
917918
}
919+
}
920+
921+
.glow {
922+
top: -10%;
923+
left: -10%;
924+
width: 120%;
925+
height: 120%;
926+
border-radius: 100%;
927+
}
928+
929+
.glow-1 {
930+
animation: glow1 4s linear infinite;
931+
}
932+
933+
.glow-2 {
934+
animation: glow2 4s linear infinite;
935+
animation-delay: 100ms;
936+
}
937+
938+
.glow-3 {
939+
animation: glow3 4s linear infinite;
940+
animation-delay: 200ms;
941+
}
942+
943+
.glow-4 {
944+
animation: glow4 4s linear infinite;
945+
animation-delay: 300ms;
946+
}
947+
948+
@keyframes glow1 {
949+
0% {
950+
transform: translate(10%, 10%) scale(1);
951+
}
952+
25% {
953+
transform: translate(-10%, 10%) scale(1);
954+
}
955+
50% {
956+
transform: translate(-10%, -10%) scale(1);
957+
}
958+
75% {
959+
transform: translate(10%, -10%) scale(1);
960+
}
961+
100% {
962+
transform: translate(10%, 10%) scale(1);
963+
}
964+
}
965+
966+
@keyframes glow2 {
967+
0% {
968+
transform: translate(-10%, -10%) scale(1);
969+
}
970+
25% {
971+
transform: translate(10%, -10%) scale(1);
972+
}
973+
50% {
974+
transform: translate(10%, 10%) scale(1);
975+
}
976+
75% {
977+
transform: translate(-10%, 10%) scale(1);
978+
}
979+
100% {
980+
transform: translate(-10%, -10%) scale(1);
981+
}
982+
}
983+
984+
@keyframes glow3 {
985+
0% {
986+
transform: translate(-10%, 10%) scale(1);
987+
}
988+
25% {
989+
transform: translate(-10%, -10%) scale(1);
990+
}
991+
50% {
992+
transform: translate(10%, -10%) scale(1);
993+
}
994+
75% {
995+
transform: translate(10%, 10%) scale(1);
996+
}
997+
100% {
998+
transform: translate(-10%, 10%) scale(1);
999+
}
1000+
}
1001+
1002+
@keyframes glow4 {
1003+
0% {
1004+
transform: translate(10%, -10%) scale(1);
1005+
}
1006+
25% {
1007+
transform: translate(10%, 10%) scale(1);
1008+
}
1009+
50% {
1010+
transform: translate(-10%, 10%) scale(1);
1011+
}
1012+
75% {
1013+
transform: translate(-10%, -10%) scale(1);
1014+
}
1015+
100% {
1016+
transform: translate(10%, -10%) scale(1);
1017+
}
9181018
}

‎app/recipes/page.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import LatestRecipes from "../../components/LatestRecipes";
33
import SingleRecipeTopSection from "../../components/SingleRecipeTopSection";
4+
import { SearchComponent } from "@/components/Search";
45

56
const Recipes = () => {
67
return (
@@ -10,6 +11,7 @@ const Recipes = () => {
1011
recipeName="... رسپی ها ..."
1112
recipeDesc="دنبال یه دسر خاص و خوشمزه ای ؟ سریع پیداش کن ..."
1213
/>
14+
<SearchComponent classes="bg-[#F9f8f8]" />
1315
<section id="recipes">
1416
<div className="container py-10">
1517
<div className="recipes-section">

‎app/recipes/search/[q]/page.tsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
"use client"
2+
import RecipeCard from '@/components/RecipeCard';
3+
import { SearchComponent } from '@/components/Search'
4+
import SingleRecipeTopSection from '@/components/SingleRecipeTopSection'
5+
import { GetAllRecipesResponse, Recipe } from '@/types/Recipe';
6+
import { useParams } from 'next/navigation';
7+
import React, { useEffect, useState } from 'react'
8+
9+
const SearchPage = () => {
10+
const { q } = useParams();
11+
console.log("q", q);
12+
const [searches, setSearches] = useState<GetAllRecipesResponse[]>()
13+
14+
useEffect(() => {
15+
const getSearches = async () => {
16+
try {
17+
const response = await fetch(`/api/search/?q=${q}`, {
18+
method: "GET"
19+
})
20+
if (response.ok) {
21+
const data = await response.json()
22+
setSearches(data)
23+
}
24+
} catch (error) {
25+
console.log(error);
26+
}
27+
}
28+
getSearches()
29+
},[])
30+
31+
return (
32+
<>
33+
<SingleRecipeTopSection
34+
sectionBackground={"/search-page.jpg"}
35+
recipeName="... جستجوی رسپی ها ..."
36+
recipeDesc="اگه دنبال رسپی خاصی هستی کافیه جستجو کنی ..."
37+
/>
38+
<SearchComponent classes='bg-white' />
39+
<div className="grid grid-cols-5 gap-4 p-10">
40+
{
41+
searches?.length === 0 && <p>چیزی پیدا نشد...</p>
42+
}
43+
{
44+
searches && searches?.map((recipes: GetAllRecipesResponse) => (
45+
<RecipeCard key={recipes._id} recipe={recipes} />
46+
))
47+
}
48+
</div>
49+
</>
50+
)
51+
}
52+
53+
export default SearchPage

‎components/Header.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from "react";
22
import Link from "next/link";
33
import BackButton from "./ui/BackButton";
4+
import { SearchComponent } from "./Search";
45

56
const Navbar: React.FC = () => {
67
return (

‎components/Search.tsx‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
"use client"
2+
import { MagnifyingGlassIcon } from '@heroicons/react/24/solid';
3+
import { ChangeEvent, FormEvent, useState } from 'react';
4+
import { useRouter } from 'next/navigation';
5+
6+
interface SearchComponentProps {
7+
classes: string
8+
}
9+
10+
export function SearchComponent({classes}: SearchComponentProps) {
11+
const [searchQuery, setSearchQuery] = useState('');
12+
const router = useRouter()
13+
14+
const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
15+
setSearchQuery(event.target.value);
16+
};
17+
18+
const handleSubmit = async (event: FormEvent) => {
19+
event.preventDefault();
20+
router.push(`/recipes/search/${searchQuery}`)
21+
22+
};
23+
24+
return (
25+
<>
26+
<div className={`${classes} flex flex-col justify-center`}>
27+
<div className="relative p-12 w-full sm:max-w-2xl sm:mx-auto">
28+
<div className="overflow-hidden z-0 rounded-full relative p-3">
29+
<form role="form" className="relative flex z-50 bg-white rounded-full" onSubmit={handleSubmit}>
30+
<input
31+
required
32+
value={searchQuery}
33+
onChange={handleChange}
34+
type="text"
35+
placeholder="دنبال چی میگردی؟"
36+
className="rounded-full flex-1 px-6 py-4 text-gray-700 focus:outline-none"
37+
/>
38+
<button className="bg-indigo-500 text-white rounded-full font-semibold px-8 py-4 hover:bg-indigo-400 focus:bg-indigo-600 focus:outline-none">جستجو</button>
39+
</form>
40+
<div className="glow glow-1 z-10 bg-pink-400 absolute"></div>
41+
<div className="glow glow-2 z-20 bg-purple-400 absolute"></div>
42+
<div className="glow glow-3 z-30 bg-yellow-400 absolute"></div>
43+
<div className="glow glow-4 z-40 bg-blue-400 absolute"></div>
44+
</div>
45+
</div>
46+
</div>
47+
</>
48+
);
49+
}

‎components/SingleRecipeTopSection.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const SingleRecipeTopSection = ({
1919
<section className="relative">
2020
<div className="recipe-header-pic">
2121
<img
22+
height={400}
2223
className="recipe-header-img"
2324
src={sectionBackground}
2425
alt="header"

‎public/search-page.jpg‎

348 KB
Loading

0 commit comments

Comments
 (0)