470 lines
16 KiB
JavaScript
470 lines
16 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>
|
|
Multi-purpose used car dealership located in Norcross, Georgia
|
|
servicing North Metro Atlanta
|
|
</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>
|
|
);
|
|
}
|