400 lines
19 KiB
JavaScript
400 lines
19 KiB
JavaScript
"use client";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { useState, useEffect } from "react";
|
|
import Link from "next/link";
|
|
|
|
export default function FilterableList() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const [filter, setFilter] = useState("All");
|
|
|
|
useEffect(() => {
|
|
router.replace(`/portfolio?filter=${filter}`, { scroll: false });
|
|
}, [filter]);
|
|
|
|
useEffect(() => {
|
|
const queryFilter = searchParams.get("filter") || "All";
|
|
setFilter(queryFilter);
|
|
}, [searchParams]);
|
|
|
|
const handleFilterChange = (e) => {
|
|
const newFilter = e.target.value;
|
|
setFilter(newFilter);
|
|
router.replace(`/portfolio?filter=${newFilter}`, { scroll: false });
|
|
};
|
|
return (
|
|
<div>
|
|
{/* Mobile */}
|
|
<div className="portfolio__form d-xl-none d-md-block">
|
|
<div className="form-grp select-grp">
|
|
<select className="orderby" value={filter} onChange={handleFilterChange}>
|
|
<option value="All">All</option>
|
|
<option value="Tech">Tech/AI</option>
|
|
<option value="Online-Businesses">Online Businesses</option>
|
|
<option value="Video-Games">Video Games</option>
|
|
<option value="Restaurants">Restaurants</option>
|
|
<option value="Startups">Startups</option>
|
|
<option value="Aerospace">Avionics/Aerospace</option>
|
|
<option value="Professional-Services">Professional Services</option>
|
|
<option value="Travel">Travel</option>
|
|
<option value="Auto-Industry">Auto Industry</option>
|
|
<option value="Construction">Construction</option>
|
|
<option value="Law">LAW</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="portfolio__form d-xl-flex d-none">
|
|
<button
|
|
type="button"
|
|
className={"btn portfolio-btn " + (filter === "All" ? "selected" : "")}
|
|
onClick={() => setFilter("All")}
|
|
>
|
|
All
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={"btn portfolio-btn " + (filter === "Tech" ? "selected" : "")}
|
|
onClick={() => setFilter("Tech")}
|
|
>
|
|
Tech/AI
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={"btn portfolio-btn " + (filter === "Online-Businesses" ? "selected" : "")}
|
|
onClick={() => setFilter("Online-Businesses")}
|
|
>
|
|
Online Businesses
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={"btn portfolio-btn " + (filter === "Video-Games" ? "selected" : "")}
|
|
onClick={() => setFilter("Video-Games")}
|
|
>
|
|
Video Games
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={"btn portfolio-btn " + (filter === "Restaurants" ? "selected" : "")}
|
|
onClick={() => setFilter("Restaurants")}
|
|
>
|
|
Restaurants
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={"btn portfolio-btn " + (filter === "Startups" ? "selected" : "")}
|
|
onClick={() => setFilter("Startups")}
|
|
>
|
|
Startups
|
|
</button>
|
|
<div
|
|
className={
|
|
"form-grp select-grp flex-grow-1 " +
|
|
(filter === "Aerospace" ||
|
|
filter === "Professional-Services" ||
|
|
filter === "Travel" ||
|
|
filter === "Auto-Industry" ||
|
|
filter === "Construction" ||
|
|
filter === "Law"
|
|
? "selected"
|
|
: "")
|
|
}
|
|
>
|
|
<select className="orderby" value={filter} onChange={handleFilterChange}>
|
|
<option selected value="All" className="display-none">
|
|
MORE INDUSTRIES
|
|
</option>
|
|
<option value="Aerospace">AVIONICS/AEROSPACE</option>
|
|
<option value="Professional-Services">PROFESSIONAL SERVICES</option>
|
|
<option value="Travel">TRAVEL</option>
|
|
<option value="Auto-Industry">AUTO INDUSTRY</option>
|
|
<option value="Construction">CONSTRUCTION</option>
|
|
<option value="Law">LAW</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="row justify-content-start">
|
|
<div
|
|
className={
|
|
filter === "All" || filter === "Restaurants" || filter === "Startups"
|
|
? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
|
|
: "display-none"
|
|
}
|
|
>
|
|
<div className="services-item shine-animate-item">
|
|
<div className="services-thumb">
|
|
<Link href="/portfolio/the-spark-coffee" className="shine-animate">
|
|
<img src="/assets/img/custom/project-1.jpg" alt="Project 1" />
|
|
</Link>
|
|
</div>
|
|
<div className="services-content">
|
|
<h4 className="title">
|
|
<Link href="/portfolio/the-spark-coffee">The Spark Coffee</Link>
|
|
</h4>
|
|
<p>
|
|
Mobile coffee business offering on-the-go food and beverage services and catering to
|
|
people across the United States.
|
|
</p>
|
|
<Link href="/portfolio/the-spark-coffee" className="btn">
|
|
View Case Study
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={
|
|
filter === "All" ||
|
|
filter === "Aerospace" ||
|
|
filter === "Travel" ||
|
|
filter === "Professional-Services"
|
|
? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
|
|
: "display-none"
|
|
}
|
|
>
|
|
<div className="services-item shine-animate-item">
|
|
<div className="services-thumb">
|
|
<Link href="/portfolio/atlas-aviation" className="shine-animate">
|
|
<img src="/assets/img/custom/project-2.jpg" alt="" />
|
|
</Link>
|
|
</div>
|
|
<div className="services-content">
|
|
<h4 className="title">
|
|
<Link href="/portfolio/atlas-aviation">Atlas Aviation</Link>
|
|
</h4>
|
|
<p>
|
|
Fully certified pilot training and aircraft rental company based in Tampa Florida
|
|
offering services for both Jet and Turbo Prop.
|
|
</p>
|
|
<Link href="/portfolio/atlas-aviation" className="btn">
|
|
View Case Study
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={
|
|
filter === "All" || filter === "Fruit" || filter === "Online-Businesses" || filter === "Tech"
|
|
? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
|
|
: "display-none"
|
|
}
|
|
>
|
|
<div className="services-item shine-animate-item">
|
|
<div className="services-thumb">
|
|
<Link href="/portfolio/social-celebrity" className="shine-animate">
|
|
<img src="/assets/img/custom/project-4.png" alt="" />
|
|
</Link>
|
|
</div>
|
|
<div className="services-content">
|
|
<h4 className="title">
|
|
<Link href="/portfolio/social-celebrity">Social Celebrity</Link>
|
|
</h4>
|
|
<p>
|
|
Social Media Enhancement company providing marketing services for Facebook, Instagram,
|
|
TikTok, Twitter, Youtube and more.
|
|
</p>
|
|
<Link href="/portfolio/social-celebrity" className="btn">
|
|
View Case Study
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={
|
|
filter === "All" ||
|
|
filter === "Video-Games" ||
|
|
filter === "Online-Businesses" ||
|
|
filter === "Tech"
|
|
? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
|
|
: "display-none"
|
|
}
|
|
>
|
|
<div className="services-item shine-animate-item">
|
|
<div className="services-thumb">
|
|
<Link href="/portfolio/discord-center" className="shine-animate">
|
|
<img src="/assets/img/custom/project-3.png" alt="" />
|
|
</Link>
|
|
</div>
|
|
<div className="services-content">
|
|
<h4 className="title">
|
|
<Link href="/portfolio/discord-center">Discord Center</Link>
|
|
</h4>
|
|
<p>
|
|
Server Listing Website utilized by millions of users of the popular communicaton
|
|
platform - "Discord" which specializes in growing Discord servers.
|
|
</p>
|
|
<Link href="/portfolio/discord-center" className="btn">
|
|
View Case Study
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={
|
|
filter === "All" ||
|
|
filter === "Tech" ||
|
|
filter === "Online-Businesses" ||
|
|
filter === "Video-Games"
|
|
? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
|
|
: "display-none"
|
|
}
|
|
>
|
|
<div className="services-item shine-animate-item">
|
|
<div className="services-thumb">
|
|
<Link href="/portfolio/hytale-server-hosting" className="shine-animate">
|
|
<img src="/assets/img/custom/project-5.png" alt="" />
|
|
</Link>
|
|
</div>
|
|
<div className="services-content">
|
|
<h4 className="title">
|
|
<Link href="/portfolio/hytale-server-hosting">Hytale Server Hosting</Link>
|
|
</h4>
|
|
<p>
|
|
Server Hosting company for the upcoming, highly anticipated videogame - Hytale, being
|
|
developed by Tencent, the parent-company for TikTok & Riot Games.
|
|
</p>
|
|
<Link href="/portfolio/hytale-server-hosting" className="btn">
|
|
View Case Study
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={
|
|
filter === "All" || filter === "Auto-Industry"
|
|
? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
|
|
: "display-none"
|
|
}
|
|
>
|
|
<div className="services-item shine-animate-item">
|
|
<div className="services-thumb">
|
|
<Link href="/portfolio/multi-group-automotive" className="shine-animate">
|
|
<img src="/assets/img/custom/project-6.png" alt="" />
|
|
</Link>
|
|
</div>
|
|
<div className="services-content">
|
|
<h4 className="title">
|
|
<Link href="/portfolio/multi-group-automotive">Multi Group Automotive</Link>
|
|
</h4>
|
|
<p>
|
|
Server Hosting company for the upcoming, highly anticipated videogame - Hytale, being
|
|
developed by Tencent, the parent-company for TikTok & Riot Games.
|
|
</p>
|
|
<Link href="/portfolio/multi-group-automotive" className="btn">
|
|
View Case Study
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={
|
|
filter === "All" || filter === "Construction"
|
|
? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
|
|
: "display-none"
|
|
}
|
|
>
|
|
<div className="services-item shine-animate-item">
|
|
<div className="services-thumb">
|
|
<Link href="/portfolio/water-main-line-replacement" className="shine-animate">
|
|
<img src="/assets/img/custom/project-7.png" alt="" />
|
|
</Link>
|
|
</div>
|
|
<div className="services-content">
|
|
<h4 className="title">
|
|
<Link href="/portfolio/water-main-line-replacement">
|
|
Water Main Line Replacement LLC
|
|
</Link>
|
|
</h4>
|
|
<p>
|
|
A water main line replacement company in Atlanta, Georgia that handles the installation
|
|
and repair of essential water pipelines.
|
|
</p>
|
|
<Link href="/portfolio/water-main-line-replacement" className="btn">
|
|
View Case Study
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={
|
|
filter === "All" || filter === "Restaurants" || filter === "Startups"
|
|
? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
|
|
: "display-none"
|
|
}
|
|
>
|
|
<div className="services-item shine-animate-item">
|
|
<div className="services-thumb">
|
|
<Link href="/portfolio/taqueria-del-mar" className="shine-animate">
|
|
<img src="/assets/img/custom/project-8.png" alt="" />
|
|
</Link>
|
|
</div>
|
|
<div className="services-content">
|
|
<h4 className="title">
|
|
<Link href="/portfolio/taqueria-del-mar">Taqueria del Mar</Link>
|
|
</h4>
|
|
<p>
|
|
Latin American eatery in Atlanta, Georgia that specializes in Mexican cuisine with a
|
|
modern twist.
|
|
</p>
|
|
<Link href="/portfolio/taqueria-del-mar" className="btn">
|
|
View Case Study
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={
|
|
filter === "All" || filter === "Construction"
|
|
? "col-xl-3 col-lg-4 col-md-6 col-sm-8"
|
|
: "display-none"
|
|
}
|
|
>
|
|
<div className="services-item shine-animate-item">
|
|
<div className="services-thumb">
|
|
<Link href="/portfolio/jenni-bg-plumbing" className="shine-animate">
|
|
<img src="/assets/img/custom/project-9.png" alt="" />
|
|
</Link>
|
|
</div>
|
|
<div className="services-content">
|
|
<h4 className="title">
|
|
<Link href="/portfolio/jenni-bg-plumbing">Jenni BG Plumbing</Link>
|
|
</h4>
|
|
<p>
|
|
Plumbing company in Peachtree Corners, Georgia that fixes and installs pipes, fixtures,
|
|
and other systems that carry water and waste in homes and businesses.
|
|
</p>
|
|
<Link href="/portfolio/jenni-bg-plumbing" className="btn">
|
|
View Case Study
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={
|
|
filter === "All" || filter === "Law" ? "col-xl-3 col-lg-4 col-md-6 col-sm-8" : "display-none"
|
|
}
|
|
>
|
|
<div className="services-item shine-animate-item">
|
|
<div className="services-thumb">
|
|
<Link href="/portfolio/the-gurvey-law-group" className="shine-animate">
|
|
<img src="/assets/img/custom/project-10.png" alt="" />
|
|
</Link>
|
|
</div>
|
|
<div className="services-content">
|
|
<h4 className="title">
|
|
<Link href="/portfolio/the-gurvey-law-group">The Gurvey Law Group</Link>
|
|
</h4>
|
|
<p>
|
|
A law firm in Brookhaven, Georgia that specializes in investments, purchases, and sales.
|
|
</p>
|
|
<Link href="/portfolio/the-gurvey-law-group" className="btn">
|
|
View Case Study
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|