mirror of
https://github.com/Sosokker/B2D-Ventures.git
synced 2025-12-18 21:44:06 +01:00
Merge branch 'main' into front-end
This commit is contained in:
commit
96a7be3987
@ -1,15 +1,22 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL_SOURCE;
|
||||
|
||||
const nextConfig = {
|
||||
reactStrictMode: true, // From the second config
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: 'https',
|
||||
hostname: 'upload.wikimedia.org',
|
||||
pathname: '/wikipedia/**',
|
||||
protocol: "https",
|
||||
hostname: SUPABASE_URL,
|
||||
port: "",
|
||||
pathname: "/storage/v1/object/sign/**", // From the second config
|
||||
},
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "upload.wikimedia.org",
|
||||
pathname: "/wikipedia/**", // From the first config
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
|
||||
1429
package-lock.json
generated
1429
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -30,6 +30,7 @@
|
||||
"b2d-ventures": "file:",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"dotenv": "^16.4.5",
|
||||
"embla-carousel-react": "^8.2.0",
|
||||
"lucide-react": "^0.428.0",
|
||||
@ -39,18 +40,21 @@
|
||||
"react-countup": "^6.5.3",
|
||||
"react-dom": "^18",
|
||||
"react-hot-toast": "^2.4.1",
|
||||
"react-markdown": "^9.0.1",
|
||||
"recharts": "^2.12.7",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.47.2",
|
||||
"@tailwindcss/typography": "^0.5.15",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.2.5",
|
||||
"postcss": "^8",
|
||||
"supabase": "^1.200.3",
|
||||
"tailwindcss": "^3.4.1",
|
||||
"typescript": "^5"
|
||||
}
|
||||
|
||||
BIN
public/banner.jpg
Normal file
BIN
public/banner.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
61
src/app/(investment)/deals/[id]/followShareButton.tsx
Normal file
61
src/app/(investment)/deals/[id]/followShareButton.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
|
||||
import { ShareIcon, StarIcon } from "lucide-react";
|
||||
import { redirect } from "next/navigation";
|
||||
import useSession from "@/lib/supabase/useSession";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
const FollowShareButtons = () => {
|
||||
const [progress, setProgress] = useState(0);
|
||||
const [tab, setTab] = useState("Pitch");
|
||||
const { session, loading } = useSession();
|
||||
const user = session?.user;
|
||||
const [sessionLoaded, setSessionLoaded] = useState(false);
|
||||
const [isFollow, setIsFollow] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!loading) {
|
||||
setSessionLoaded(true);
|
||||
}
|
||||
}, [loading]);
|
||||
|
||||
const handleShare = () => {
|
||||
const currentUrl = window.location.href;
|
||||
if (document.hasFocus()) {
|
||||
navigator.clipboard.writeText(currentUrl).then(() => {
|
||||
toast.success("URL copied to clipboard!");
|
||||
});
|
||||
}
|
||||
};
|
||||
const handleFollow = () => {
|
||||
if (user) {
|
||||
setIsFollow((prevState) => !prevState);
|
||||
} else {
|
||||
redirect("/login");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 gap-5 justify-self-end ">
|
||||
<div className="mt-2 cursor-pointer" onClick={handleFollow}>
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<StarIcon id="follow" fill={isFollow ? "#FFFF00" : "#fff"} strokeWidth={2} />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p>Follow NVIDIA</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<div onClick={handleShare} className="cursor-pointer mt-2">
|
||||
<ShareIcon />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default FollowShareButtons;
|
||||
162
src/app/(investment)/deals/[id]/page.tsx
Normal file
162
src/app/(investment)/deals/[id]/page.tsx
Normal file
@ -0,0 +1,162 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
import * as Tabs from "@radix-ui/react-tabs";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
|
||||
import FollowShareButtons from "./followShareButton";
|
||||
|
||||
import { getProjectData } from "@/lib/data/projectQuery";
|
||||
|
||||
export default async function ProjectDealPage({ params }: { params: { id: number } }) {
|
||||
const supabase = createSupabaseClient();
|
||||
|
||||
const { data: projectData, error: projectDataError } = await getProjectData(supabase, params.id);
|
||||
|
||||
const carouselData = [
|
||||
{ src: "/boiler1.jpg", alt: "Boiler 1" },
|
||||
{ src: "/boiler1.jpg", alt: "Boiler 1" },
|
||||
{ src: "/boiler1.jpg", alt: "Boiler 1" },
|
||||
{ src: "/boiler1.jpg", alt: "Boiler 1" },
|
||||
{ src: "/boiler1.jpg", alt: "Boiler 1" },
|
||||
];
|
||||
|
||||
if (projectDataError) {
|
||||
return <div>Error</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container max-w-screen-xl my-5">
|
||||
<div className="flex flex-col gap-y-10">
|
||||
<div id="content">
|
||||
{/* Name, star and share button packed */}
|
||||
<div id="header" className="flex flex-col">
|
||||
<div className="flex justify-between">
|
||||
<span className="flex">
|
||||
<Image src="/logo.svg" alt="logo" width={50} height={50} className="sm:scale-75" />
|
||||
<h1 className="mt-3 font-bold text-lg md:text-3xl">{projectData?.project_name}</h1>
|
||||
</span>
|
||||
<FollowShareButtons />
|
||||
</div>
|
||||
{/* end of pack */}
|
||||
<p className="mt-2 sm:text-sm">{projectData?.project_short_description}</p>
|
||||
<div className="flex flex-wrap mt-3">
|
||||
{projectData?.tags.map((tag, index) => (
|
||||
<span key={index} className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1">
|
||||
{tag.tag_name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div id="sub-content" className="flex flex-row mt-5">
|
||||
{/* image carousel */}
|
||||
<div id="image-corousel" className="shrink-0 w-[700px] flex flex-col">
|
||||
<Carousel className="w-full h-full ml-1">
|
||||
<CarouselContent className="flex h-full">
|
||||
{carouselData.map((item, index) => (
|
||||
<CarouselItem key={index}>
|
||||
<Image src={item.src} alt={item.alt} width={700} height={400} className="rounded-lg" />
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
<CarouselPrevious />
|
||||
<CarouselNext />
|
||||
</Carousel>
|
||||
|
||||
<Carousel className="w-full ml-1 h-[100px]">
|
||||
<CarouselContent className="flex space-x-1">
|
||||
{carouselData.map((item, index) => (
|
||||
<CarouselItem key={index} className="flex">
|
||||
<Image src={item.src} alt={item.alt} width={200} height={100} className="rounded-lg basis-0" />
|
||||
</CarouselItem>
|
||||
))}
|
||||
</CarouselContent>
|
||||
</Carousel>
|
||||
</div>
|
||||
<div id="stats" className="flex flex-col w-full mt-4 pl-12">
|
||||
<div className="pl-5">
|
||||
<span>
|
||||
<h1 className="font-semibold text-xl md:text-4xl mt-8">${projectData?.total_investment}</h1>
|
||||
<p className="text-sm md:text-lg"> 5% raised of \$5M max goal</p>
|
||||
<Progress
|
||||
value={projectData?.total_investment / projectData?.target_investment}
|
||||
className="w-[60%] h-3 mt-3"
|
||||
/>
|
||||
</span>
|
||||
<span>
|
||||
<h1 className="font-semibold text-4xl md:mt-8">
|
||||
<p className="text-xl md:text-4xl">{projectData?.total_investment}</p>
|
||||
</h1>
|
||||
<p className="text-sm md:text-lg"> Investors</p>
|
||||
</span>
|
||||
<Separator decorative className="mt-3 w-3/4 ml-5" />
|
||||
<span>
|
||||
<h1 className="font-semibold text-xl md:text-4xl mt-8 ml-5"></h1>
|
||||
<p className="text-xl md:text-4xl">1 hours</p>
|
||||
<p> Left to invest</p>
|
||||
</span>
|
||||
<Button className="mt-5 w-3/4 h-12">
|
||||
<Link href={`/invest/${params.id}`}>Invest in {projectData?.project_name}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* menu */}
|
||||
<div id="deck">
|
||||
<div className="flex w-fit">
|
||||
<Tabs.Root defaultValue="pitch">
|
||||
<Tabs.List className="list-none flex gap-10 text-lg md:text-xl">
|
||||
<Tabs.Trigger value="pitch">Pitch</Tabs.Trigger>
|
||||
<Tabs.Trigger value="general">General Data</Tabs.Trigger>
|
||||
<Tabs.Trigger value="update">Updates</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Separator className="mb-4 mt-2 w-full border-1" />
|
||||
<Tabs.Content value="pitch">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle></CardTitle>
|
||||
<CardDescription></CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="prose prose-sm max-w-none">
|
||||
<ReactMarkdown>{projectData?.project_description || "No pitch available."}</ReactMarkdown>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="general">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>general</CardTitle>
|
||||
<CardDescription>general Description</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p>general Content</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="update">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>update</CardTitle>
|
||||
<CardDescription>update Description</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p>update Content</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
273
src/app/(investment)/deals/page.tsx
Normal file
273
src/app/(investment)/deals/page.tsx
Normal file
@ -0,0 +1,273 @@
|
||||
"use client";
|
||||
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { useState } from "react";
|
||||
import { Clock3Icon, UserIcon, UsersIcon } from "lucide-react";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { ProjectCard } from "@/components/projectCard";
|
||||
import { getAllTagsQuery, getALlFundedStatusQuery, getAllBusinessTypeQuery } from "@/lib/data/dropdownQuery";
|
||||
import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
|
||||
import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
|
||||
import { searchProjectsQuery, FilterParams, FilterProjectQueryParams } from "@/lib/data/projectQuery";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
|
||||
const ProjectSection = ({ filteredProjects }) => {
|
||||
interface Tags {
|
||||
tag_name: string;
|
||||
}
|
||||
|
||||
if (!filteredProjects) {
|
||||
return <div>No projects found!</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mt-10">
|
||||
<h2 className="text-2xl">Deals</h2>
|
||||
<p className="mt-3">The deals attracting the most interest right now</p>
|
||||
</div>
|
||||
|
||||
{/* Block for all the deals */}
|
||||
<div className="mt-10 grid grid-cols-3 gap-4">
|
||||
{filteredProjects.map((item, index) => (
|
||||
<Link key={index} href={`/deals/${item.project_id}`}>
|
||||
<ProjectCard
|
||||
key={index}
|
||||
name={item.project_name}
|
||||
description={item.project_short_description}
|
||||
joinDate={item.published_time}
|
||||
imageUri={item.card_image_url}
|
||||
location={item.business_location}
|
||||
minInvestment={item.min_investment}
|
||||
totalInvestor={item.total_investment}
|
||||
totalRaised={item.target_investment}
|
||||
tags={item.tags.map((tag: Tags) => tag.tag_name)}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ShowFilter = ({ filterParams, clearAll }: { filterParams: FilterParams; clearAll: () => void }) => {
|
||||
const { searchTerm, tagsFilter, projectStatusFilter, businessTypeFilter, sortByTimeFilter } = filterParams;
|
||||
|
||||
if (!searchTerm && !tagsFilter && !projectStatusFilter && !businessTypeFilter && !sortByTimeFilter) {
|
||||
return <div></div>;
|
||||
}
|
||||
|
||||
if (
|
||||
projectStatusFilter === "all" &&
|
||||
businessTypeFilter === "all" &&
|
||||
sortByTimeFilter === "all" &&
|
||||
(!tagsFilter || tagsFilter.length === 0)
|
||||
) {
|
||||
return <div></div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{searchTerm && (
|
||||
<Button key={searchTerm} variant="secondary">
|
||||
{searchTerm}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{tagsFilter &&
|
||||
tagsFilter.map((tag: string) => (
|
||||
<Button key={tag} variant="secondary">
|
||||
{tag}
|
||||
</Button>
|
||||
))}
|
||||
|
||||
{projectStatusFilter && projectStatusFilter !== "all" && (
|
||||
<Button key={projectStatusFilter} variant="secondary">
|
||||
{projectStatusFilter}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{businessTypeFilter && businessTypeFilter !== "all" && (
|
||||
<Button key={businessTypeFilter} variant="secondary">
|
||||
{businessTypeFilter}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{sortByTimeFilter && sortByTimeFilter !== "all" && (
|
||||
<Button key={sortByTimeFilter} variant="secondary">
|
||||
{sortByTimeFilter}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{/* Clear All button */}
|
||||
<Button variant="destructive" onClick={clearAll}>
|
||||
Clear All
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Deals() {
|
||||
const supabase = createSupabaseClient();
|
||||
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [searchTermVisual, setSearchTermVisual] = useState("");
|
||||
const [sortByTimeFilter, setSortByTimeFilter] = useState("all");
|
||||
const [businessTypeFilter, setBusinessTypeFilter] = useState("all");
|
||||
const [tagFilter, setTagFilter] = useState([]);
|
||||
const [projectStatusFilter, setprojectStatusFilter] = useState("all");
|
||||
const [page, setPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(4);
|
||||
|
||||
const filterParams: FilterParams = {
|
||||
searchTerm,
|
||||
tagsFilter: tagFilter,
|
||||
projectStatusFilter,
|
||||
businessTypeFilter,
|
||||
sortByTimeFilter,
|
||||
};
|
||||
|
||||
const filterProjectQueryParams: FilterProjectQueryParams = {
|
||||
searchTerm,
|
||||
tagsFilter: tagFilter,
|
||||
projectStatusFilter,
|
||||
businessTypeFilter,
|
||||
sortByTimeFilter,
|
||||
page,
|
||||
pageSize,
|
||||
};
|
||||
|
||||
const { data: tags, isLoading: isLoadingTags, error: tagsLoadingError } = useQuery(getAllTagsQuery(supabase));
|
||||
const {
|
||||
data: projectStatus,
|
||||
isLoading: isLoadingFunded,
|
||||
error: fundedLoadingError,
|
||||
} = useQuery(getALlFundedStatusQuery(supabase));
|
||||
const {
|
||||
data: businessType,
|
||||
isLoading: isLoadingBusinessType,
|
||||
error: businessTypeLoadingError,
|
||||
} = useQuery(getAllBusinessTypeQuery(supabase));
|
||||
|
||||
const {
|
||||
data: projects,
|
||||
isLoading: isLoadingProjects,
|
||||
error: projectsLoadingError,
|
||||
} = useQuery(searchProjectsQuery(supabase, filterProjectQueryParams));
|
||||
|
||||
const clearAll = () => {
|
||||
setSearchTerm("");
|
||||
setTagFilter([]);
|
||||
setprojectStatusFilter("all");
|
||||
setBusinessTypeFilter("all");
|
||||
setSortByTimeFilter("all");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container max-w-screen-xl mx-auto px-4">
|
||||
<div className="h-auto mt-10">
|
||||
<h1 className="text-4xl font-bold">Investment Opportunities</h1>
|
||||
<br />
|
||||
<p>Browse current investment opportunities on B2DVenture.</p>
|
||||
<p>
|
||||
All companies are <u>vetted & pass due diligence.</u>
|
||||
</p>
|
||||
|
||||
{/* {JSON.stringify(projects, null, 4)} */}
|
||||
|
||||
<div className="flex mt-10 gap-3">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search projects"
|
||||
value={searchTermVisual}
|
||||
onChange={(e) => setSearchTermVisual(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
setSearchTerm(e.currentTarget.value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Posted At Filter */}
|
||||
<Select onValueChange={(value) => setSortByTimeFilter(value)}>
|
||||
<SelectTrigger className="w-full sm:w-[180px]">
|
||||
<Clock3Icon className="ml-2" />
|
||||
<SelectValue placeholder="Posted at" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All Time</SelectItem>
|
||||
<SelectItem value="Today">Today</SelectItem>
|
||||
<SelectItem value="This Week">This Week</SelectItem>
|
||||
<SelectItem value="This Month">This Month</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Business Type Filter */}
|
||||
<Select onValueChange={(value) => setBusinessTypeFilter}>
|
||||
<SelectTrigger className="w-full sm:w-[180px]">
|
||||
<UsersIcon className="ml-2" />
|
||||
<SelectValue placeholder="Business Type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{isLoadingBusinessType ? (
|
||||
<SelectItem disabled value="_">
|
||||
Loading...
|
||||
</SelectItem>
|
||||
) : businessTypeLoadingError ? (
|
||||
<SelectItem disabled value="_">
|
||||
No data available
|
||||
</SelectItem>
|
||||
) : (
|
||||
<>
|
||||
<SelectItem value="all">All Types</SelectItem>
|
||||
{businessType &&
|
||||
businessType.map((type) => (
|
||||
<SelectItem key={type.id} value={type.value}>
|
||||
{type.value}
|
||||
</SelectItem>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{/* Project Status Filter */}
|
||||
<Select onValueChange={(key) => setprojectStatusFilter(key)}>
|
||||
<SelectTrigger className="w-full sm:w-[180px]">
|
||||
<UserIcon className="ml-2" />
|
||||
<SelectValue placeholder="Project Status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{isLoadingFunded ? (
|
||||
<SelectItem disabled value="_">
|
||||
Loading...
|
||||
</SelectItem>
|
||||
) : fundedLoadingError ? (
|
||||
<SelectItem disabled value="_">
|
||||
No data available
|
||||
</SelectItem>
|
||||
) : (
|
||||
<>
|
||||
<SelectItem value="all">All Statuses</SelectItem>
|
||||
{projectStatus &&
|
||||
projectStatus.map((status) => (
|
||||
<SelectItem key={status.id} value={status.value}>
|
||||
{status.value}
|
||||
</SelectItem>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<ShowFilter filterParams={filterParams} clearAll={clearAll} />
|
||||
<Separator className="mt-10" />
|
||||
|
||||
{/* Project Cards Section */}
|
||||
<ProjectSection filteredProjects={projects} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
100
src/app/(user)/profile/page.tsx
Normal file
100
src/app/(user)/profile/page.tsx
Normal file
@ -0,0 +1,100 @@
|
||||
// components/ProfilePage.tsx
|
||||
|
||||
import React from "react";
|
||||
import Image from "next/image";
|
||||
import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
|
||||
import { getUserProfile } from "@/lib/data/userQuery";
|
||||
import { Tables } from "@/types/database.types";
|
||||
import { format } from "date-fns";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
interface Profile extends Tables<"Profiles"> {}
|
||||
|
||||
export default async function ProfilePage() {
|
||||
const supabase = createSupabaseClient();
|
||||
|
||||
const {
|
||||
data: { user },
|
||||
} = await supabase.auth.getUser();
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<p className="text-red-500">No user found!</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { data: profileData, error } = await getUserProfile(supabase, user.id);
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<p className="text-red-500">Error loading profile: {error}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!profileData) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-screen">
|
||||
<p>Loading profile...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container max-w-screen-xl px-4 py-8">
|
||||
<div className="bg-card border-2 border-border shadow-xl rounded-lg overflow-hidden">
|
||||
<div className="bg-cover bg-center h-64 p-4" style={{ backgroundImage: "url(./banner.jpg)" }}>
|
||||
<div className="flex justify-end">
|
||||
<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
||||
Edit Profile
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-2">
|
||||
{/* Upper */}
|
||||
<div className="flex flex-row items-center gap-4">
|
||||
{/* Profile Image */}
|
||||
<div className="text-center">
|
||||
<Image
|
||||
src={profileData.avatar_url || "https://via.placeholder.com/150"}
|
||||
alt={profileData.full_name || "Profile"}
|
||||
width={150}
|
||||
height={150}
|
||||
className="rounded-full border-4 border-white -mt-16 mx-auto sm:mx-0"
|
||||
/>
|
||||
</div>
|
||||
{/* Name and Username */}
|
||||
<div className="flex-grow text-center sm:text-left mt-4 sm:mt-0">
|
||||
<h1 className="text-3xl font-bold">{profileData.full_name || "No Name"}</h1>
|
||||
<p className="text-gray-600">@{profileData.username || "username"}</p>
|
||||
{profileData.website && (
|
||||
<p className="text-blue-500 hover:text-blue-700">
|
||||
<a href={profileData.website} target="_blank" rel="noopener noreferrer">
|
||||
{profileData.website}
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Lower */}
|
||||
<div>
|
||||
<div className="mt-6">
|
||||
<h2 className="text-xl font-semibold mb-2">Bio</h2>
|
||||
<div className="prose prose-sm max-w-none">
|
||||
<ReactMarkdown>{profileData.bio || "No bio available."}</ReactMarkdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-4 border-t">
|
||||
<p className="text-sm text-gray-600">
|
||||
Last updated: {profileData.updated_at ? format(new Date(profileData.updated_at), "PPpp") : "N/A"}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
32
src/app/auth/signup/page.tsx
Normal file
32
src/app/auth/signup/page.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import Image from "next/image";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardFooter, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
import { SignupButton } from "@/components/auth/signupButton";
|
||||
import { SignupForm } from "@/components/auth/signupForm";
|
||||
|
||||
export default function Signup() {
|
||||
return (
|
||||
<div
|
||||
className="bg-cover bg-center min-h-screen flex items-center justify-center"
|
||||
style={{ backgroundImage: "url(/signup.png)" }}>
|
||||
<Card>
|
||||
<CardHeader className="items-center">
|
||||
<CardTitle className="text-2xl font-bold">Join Our Community</CardTitle>
|
||||
<CardDescription>
|
||||
Create an account and be a part of a thriving community of investors and innovators.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-y-2 mx-28">
|
||||
<p className="self-center font-semibold text-slate-800 dark:text-slate-200">Sign Up With</p>
|
||||
<SignupForm />
|
||||
<hr></hr>
|
||||
<SignupButton />
|
||||
</CardContent>
|
||||
<CardFooter className="text-xs justify-center">
|
||||
By signing up, you agree to the Terms of Service and acknowledge you’ve read our Privacy Policy.
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,130 +0,0 @@
|
||||
"use client";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { useState } from "react";
|
||||
import { Clock3Icon, MessageSquareIcon, UserIcon, UsersIcon } from "lucide-react";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { ExtendableCard } from "@/components/extendableCard";
|
||||
|
||||
export default function Deals() {
|
||||
const [postAtFilter, setPostAtFilter] = useState("");
|
||||
const [contentTypeFilter, setContentTypeFilter] = useState("");
|
||||
const [authorFilter, setAuthorFilter] = useState("");
|
||||
const [groupsFilter, setGroupFilter] = useState("");
|
||||
const [selectedTag, setSelectedTag] = useState("");
|
||||
const data = [
|
||||
{
|
||||
name: "NVDA",
|
||||
description: "Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology",
|
||||
joinDate: "December 2021",
|
||||
location: "Bangkok, Thailand",
|
||||
tags: ["AI", "Technology"],
|
||||
imageUri: "/login.png",
|
||||
minInvestment: 10000,
|
||||
totalInvestor: 58400,
|
||||
totalRaised: 9000000,
|
||||
},
|
||||
{
|
||||
name: "Apple Inc.",
|
||||
description:
|
||||
"Founded in 1976, Apple Inc. is a leading innovator in consumer electronics, software, and online services, known for products like the iPhone, MacBook, and the App Store.",
|
||||
joinDate: "February 2020",
|
||||
location: "Cupertino, California, USA",
|
||||
tags: ["Consumer Electronics", "Software"],
|
||||
imageUri: "/money.png",
|
||||
minInvestment: 10000,
|
||||
totalInvestor: 58400,
|
||||
totalRaised: 9000000,
|
||||
},
|
||||
{
|
||||
name: "Google LLC",
|
||||
description:
|
||||
"Founded in 1998, Google LLC specializes in internet-related services and products, including search engines, online advertising, cloud computing, and the Android operating system.",
|
||||
joinDate: "April 2019",
|
||||
location: "Mountain View, California, USA",
|
||||
tags: ["Internet", "Search Engine"],
|
||||
imageUri: "/money.png",
|
||||
minInvestment: 10000,
|
||||
totalInvestor: 5000,
|
||||
totalRaised: 1500000000,
|
||||
},
|
||||
{
|
||||
name: "Microsoft Corporation",
|
||||
description: "Microsoft Corporation is a multinational technology company.",
|
||||
joinDate: "January 2018",
|
||||
location: "California, USA",
|
||||
tags: ["Technology", "Software"],
|
||||
imageUri: null,
|
||||
minInvestment: 250,
|
||||
totalInvestor: 5000,
|
||||
totalRaised: 1500000,
|
||||
},
|
||||
];
|
||||
|
||||
const filteredData = selectedTag ? data.filter((item) => item.tags.includes(selectedTag)) : data;
|
||||
|
||||
return (
|
||||
<div className="container max-w-screen-xl mx-auto px-4">
|
||||
<div className="h-auto mt-10">
|
||||
<h1 className="text-4xl font-bold">Investment Opportunities</h1>
|
||||
<br />
|
||||
<p>Browse current investment opportunities on B2DVenture.</p>
|
||||
<p>
|
||||
All companies are <u>vetted & pass due diligence.</u>
|
||||
</p>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="flex flex-wrap mt-10 gap-3">
|
||||
<Select onValueChange={(value) => setPostAtFilter(value)}>
|
||||
<SelectTrigger className="w-full sm:w-[180px]">
|
||||
<Clock3Icon className="ml-2" />
|
||||
<SelectValue placeholder="Posted at" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Today">Today</SelectItem>
|
||||
<SelectItem value="Yesterday">Yesterday</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select onValueChange={(value) => setSelectedTag(value)}>
|
||||
<SelectTrigger className="w-full sm:w-[180px]">
|
||||
<MessageSquareIcon className="ml-2" />
|
||||
<SelectValue placeholder="Tags" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="_">All Tags</SelectItem>
|
||||
<SelectItem value="AI">AI</SelectItem>
|
||||
<SelectItem value="Technology">Technology</SelectItem>
|
||||
<SelectItem value="Consumer Electronics">Consumer Electronics</SelectItem>
|
||||
<SelectItem value="Software">Software</SelectItem>
|
||||
<SelectItem value="Internet">Internet</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Separator className="mt-10" />
|
||||
</div>
|
||||
|
||||
<div className="mt-10">
|
||||
<h2 className="text-2xl">Deals</h2>
|
||||
<p className="mt-3">The deals attracting the most interest right now</p>
|
||||
</div>
|
||||
|
||||
{/* Block for all the deals */}
|
||||
<div className="mt-10 grid grid-cols-3 gap-4">
|
||||
{filteredData.map((item, index) => (
|
||||
<ExtendableCard
|
||||
key={index}
|
||||
name={item.name}
|
||||
description={item.description}
|
||||
joinDate={item.joinDate}
|
||||
imageUri={item.imageUri}
|
||||
location={item.location}
|
||||
minInvestment={item.minInvestment}
|
||||
totalInvestor={item.totalInvestor}
|
||||
totalRaised={item.totalRaised}
|
||||
tags={item.tags}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,85 +1,25 @@
|
||||
"use client";
|
||||
|
||||
import { useSearchParams } from "next/navigation";
|
||||
import { SupabaseClient } from "@supabase/supabase-js";
|
||||
import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
|
||||
import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
|
||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||
import { ExtendableCard } from "@/components/extendableCard";
|
||||
import { ProjectCard } from "@/components/projectCard";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { getBusinesses, getInvestmentCounts, getProjects, getTags } from "@/lib/data/query";
|
||||
import { Tables } from "@/types/database.types";
|
||||
|
||||
interface ProjectInvestmentDetail {
|
||||
minInvestment: number;
|
||||
totalInvestment: number;
|
||||
targetInvestment: number;
|
||||
}
|
||||
interface ProjectInvestmentDetail extends Tables<"ProjectInvestmentDetail"> {}
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
projectName: string;
|
||||
businessId: string;
|
||||
investmentCount: number;
|
||||
projectShortDescription: string;
|
||||
publishedTime: string;
|
||||
interface Project extends Tables<"Project"> {
|
||||
ProjectInvestmentDetail: ProjectInvestmentDetail[];
|
||||
tags: string[];
|
||||
}
|
||||
|
||||
interface Business {
|
||||
id: string;
|
||||
businessName: string;
|
||||
joinedDate: string;
|
||||
interface Business extends Tables<"Business"> {
|
||||
Projects: Project[];
|
||||
}
|
||||
|
||||
function getBusinesses(client: SupabaseClient, query: string | null) {
|
||||
return client
|
||||
.from("Business")
|
||||
.select("id, businessName, joinedDate")
|
||||
.ilike("businessName", `%${query}%`);
|
||||
}
|
||||
|
||||
function getProjects(client: SupabaseClient, businessIds: string[]) {
|
||||
return client
|
||||
.from("Project")
|
||||
.select(
|
||||
`
|
||||
id,
|
||||
projectName,
|
||||
businessId,
|
||||
publishedTime,
|
||||
projectShortDescription,
|
||||
ProjectInvestmentDetail (
|
||||
minInvestment,
|
||||
totalInvestment,
|
||||
targetInvestment
|
||||
)
|
||||
`
|
||||
)
|
||||
.in("businessId", businessIds);
|
||||
}
|
||||
|
||||
function getTags(client: SupabaseClient, projectIds: string[]) {
|
||||
return client
|
||||
.from("ItemTag")
|
||||
.select("itemId, Tag (value)")
|
||||
.in("itemId", projectIds);
|
||||
}
|
||||
|
||||
function getInvestmentCounts(client: SupabaseClient, projectIds: string[]) {
|
||||
return client
|
||||
.from("InvestmentDeal")
|
||||
.select("*", { count: "exact", head: true })
|
||||
.in("projectId", projectIds);
|
||||
}
|
||||
|
||||
export default function Find() {
|
||||
const searchParams = useSearchParams();
|
||||
const query = searchParams.get("query");
|
||||
@ -121,11 +61,7 @@ export default function Find() {
|
||||
|
||||
// -----
|
||||
|
||||
const isLoading =
|
||||
isLoadingBusinesses ||
|
||||
isLoadingProjects ||
|
||||
isLoadingTags ||
|
||||
isLoadingInvestments;
|
||||
const isLoading = isLoadingBusinesses || isLoadingProjects || isLoadingTags || isLoadingInvestments;
|
||||
const error = businessError || projectError || tagError || investmentError;
|
||||
|
||||
const results: Business[] =
|
||||
@ -136,13 +72,8 @@ export default function Find() {
|
||||
?.filter((project) => project.businessId === business.id)
|
||||
.map((project) => ({
|
||||
...project,
|
||||
tags:
|
||||
tags
|
||||
?.filter((tag) => tag.itemId === project.id)
|
||||
.map((tag) => tag.Tag.value) || [],
|
||||
investmentCount:
|
||||
investmentCounts?.find((ic) => ic.projectId === project.id)
|
||||
?.count || 0,
|
||||
tags: tags?.filter((tag) => tag.itemId === project.id).map((tag) => tag.Tag.value) || [],
|
||||
investmentCount: investmentCounts?.find((ic) => ic.projectId === project.id)?.count || 0,
|
||||
})) || [],
|
||||
})) || [];
|
||||
|
||||
@ -161,10 +92,14 @@ export default function Find() {
|
||||
<ul>
|
||||
{results.map((business) => (
|
||||
<li key={business.id}>
|
||||
{/* <h2>{business.businessName}</h2>
|
||||
<p>Joined Date: {new Date(business.joinedDate).toLocaleDateString()}</p>
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>{business.businessName}</CardTitle>
|
||||
<CardDescription>Joined Date: {new Date(business.joinedDate).toLocaleDateString()}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{business.Projects.map((project) => (
|
||||
<ExtendableCard
|
||||
<ProjectCard
|
||||
key={project.id}
|
||||
name={project.projectName}
|
||||
description={project.projectName}
|
||||
@ -173,35 +108,6 @@ export default function Find() {
|
||||
minInvestment={project.ProjectInvestmentDetail[0]?.minInvestment}
|
||||
totalInvestor={project.ProjectInvestmentDetail[0]?.totalInvestment}
|
||||
totalRaised={project.ProjectInvestmentDetail[0]?.targetInvestment}
|
||||
tags={null}
|
||||
/>
|
||||
))} */}
|
||||
|
||||
<Card className="w-full">
|
||||
<CardHeader>
|
||||
<CardTitle>{business.businessName}</CardTitle>
|
||||
<CardDescription>
|
||||
Joined Date:{" "}
|
||||
{new Date(business.joinedDate).toLocaleDateString()}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{business.Projects.map((project) => (
|
||||
<ExtendableCard
|
||||
key={project.id}
|
||||
name={project.projectName}
|
||||
description={project.projectName}
|
||||
joinDate={project.projectName}
|
||||
location={"Bangkok"}
|
||||
minInvestment={
|
||||
project.ProjectInvestmentDetail[0]?.minInvestment
|
||||
}
|
||||
totalInvestor={
|
||||
project.ProjectInvestmentDetail[0]?.totalInvestment
|
||||
}
|
||||
totalRaised={
|
||||
project.ProjectInvestmentDetail[0]?.targetInvestment
|
||||
}
|
||||
tags={[]}
|
||||
imageUri={null}
|
||||
/>
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
|
||||
export default function Page() {
|
||||
return <div>hello</div>;
|
||||
}
|
||||
103
src/app/page.tsx
103
src/app/page.tsx
@ -3,9 +3,53 @@ import { Button } from "@/components/ui/button";
|
||||
import Link from "next/link";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { ExtendableCard } from "@/components/extendableCard";
|
||||
import { ProjectCard } from "@/components/projectCard";
|
||||
import { getTopProjects } from "@/lib/data/projectQuery";
|
||||
import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
|
||||
import { Suspense } from "react";
|
||||
|
||||
export default function Home() {
|
||||
const TopProjects = async () => {
|
||||
const supabase = createSupabaseClient();
|
||||
const { data: topProjectsData, error: topProjectsError } = await getTopProjects(supabase);
|
||||
|
||||
if (topProjectsError) {
|
||||
return <div>Error loading top projects: {topProjectsError}</div>;
|
||||
}
|
||||
|
||||
if (!topProjectsData || topProjectsData.length === 0) {
|
||||
return <div>No top projects available.</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{topProjectsData.map((project) => (
|
||||
<Link href={`/deals/${project.id}`} key={project.id}>
|
||||
<ProjectCard
|
||||
name={project.projectName}
|
||||
description={project.projectShortDescription}
|
||||
imageUri={project.cardImage}
|
||||
joinDate={new Date(project.publishedTime).toLocaleDateString()}
|
||||
location={project.Business.location}
|
||||
tags={project.ItemTag.map((item) => item.Tag.value)}
|
||||
minInvestment={project.ProjectInvestmentDetail[0]?.minInvestment || 0}
|
||||
totalInvestor={0}
|
||||
totalRaised={project.ProjectInvestmentDetail[0]?.totalInvestment || 0}
|
||||
/>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ProjectsLoader = () => (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{[...Array(4)].map((_, index) => (
|
||||
<div key={index} className="h-64 bg-gray-200 animate-pulse rounded-lg"></div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default async function Home() {
|
||||
return (
|
||||
<main>
|
||||
<div className="relative mx-auto">
|
||||
@ -81,58 +125,9 @@ export default function Home() {
|
||||
<p className="text-xl md:text-2xl font-bold">Hottest Deals</p>
|
||||
<p className="text-md md:text-lg">The deals attracting the most interest right now</p>
|
||||
</span>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<Link href={"/overview"}>
|
||||
<ExtendableCard
|
||||
name={"NVDA"}
|
||||
description={"Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology"}
|
||||
joinDate={"December 2021"}
|
||||
location={"Bangkok, Thailand"}
|
||||
tags={[]}
|
||||
minInvestment={10000}
|
||||
totalInvestor={58400}
|
||||
totalRaised={9000000}
|
||||
imageUri={"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png"}
|
||||
/>
|
||||
</Link>
|
||||
<ExtendableCard
|
||||
name={"Apple Inc."}
|
||||
description={
|
||||
"Founded in 1976, Apple Inc. is a leading innovator in consumer electronics, software, and online services, known for products like the iPhone, MacBook, and the App Store."
|
||||
}
|
||||
joinDate={"February 2020"}
|
||||
location={"Cupertino, California, USA"}
|
||||
tags={[]}
|
||||
minInvestment={10000}
|
||||
totalInvestor={58400}
|
||||
totalRaised={9000000}
|
||||
imageUri={"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png"}
|
||||
/>
|
||||
<ExtendableCard
|
||||
name={"Google LLC"}
|
||||
description={
|
||||
"Founded in 1998, Google LLC specializes in internet-related services and products, including search engines, online advertising, cloud computing, and the Android operating system."
|
||||
}
|
||||
joinDate={"April 2019"}
|
||||
location={"Mountain View, California, USA"}
|
||||
tags={[]}
|
||||
minInvestment={10000}
|
||||
totalInvestor={5000}
|
||||
totalRaised={1500000000}
|
||||
imageUri={"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png"}
|
||||
/>
|
||||
<ExtendableCard
|
||||
name={"Microsoft Corporation"}
|
||||
description={"Microsoft Corporation is a multinational technology company."}
|
||||
joinDate={"January 2018"}
|
||||
location={"California, USA"}
|
||||
tags={[]}
|
||||
minInvestment={250}
|
||||
totalInvestor={5000}
|
||||
totalRaised={1500000}
|
||||
imageUri={"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png"}
|
||||
/>
|
||||
</div>
|
||||
<Suspense fallback={<ProjectsLoader />}>
|
||||
<TopProjects />
|
||||
</Suspense>
|
||||
<div className="self-center py-5 scale-75 md:scale-100">
|
||||
<Button>
|
||||
<Link href={"/deals"}>View all</Link>
|
||||
|
||||
@ -1,15 +1,23 @@
|
||||
"use client";
|
||||
|
||||
import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
export function LogoutButton() {
|
||||
const supabase = createSupabaseClient();
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
|
||||
const handleLogout = async () => {
|
||||
await supabase.auth.signOut();
|
||||
router.push("/");
|
||||
|
||||
if (pathname === "/") {
|
||||
window.location.reload();
|
||||
} else {
|
||||
await router.push("/");
|
||||
window.location.reload();
|
||||
}
|
||||
};
|
||||
|
||||
return <button onClick={handleLogout}>Logout</button>;
|
||||
|
||||
25
src/components/auth/signupButton.tsx
Normal file
25
src/components/auth/signupButton.tsx
Normal file
@ -0,0 +1,25 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export function SignupButton(props: { nextUrl?: string }) {
|
||||
const supabase = createSupabaseClient();
|
||||
|
||||
const handleSignup = async () => {
|
||||
await supabase.auth.signInWithOAuth({
|
||||
provider: "google",
|
||||
options: {
|
||||
redirectTo: `${location.origin}/auth/callback?next=${props.nextUrl || ""}`,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Button className="bg-foreground gap-2 rounded-xl" onClick={handleSignup}>
|
||||
<Image src={"/logo/google.svg"} width={30} height={30} alt={"Google"} />
|
||||
Sign Up with Google
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
60
src/components/auth/signupForm.tsx
Normal file
60
src/components/auth/signupForm.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
|
||||
import { useState } from "react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useRouter } from "next/navigation";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
export function SignupForm() {
|
||||
const router = useRouter();
|
||||
const supabase = createSupabaseClient();
|
||||
const [email, setEmail] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [confirmPassword, setConfirmPassword] = useState("");
|
||||
|
||||
const handleSignup = async (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (password !== confirmPassword) {
|
||||
alert("Passwords do not match!");
|
||||
return;
|
||||
}
|
||||
|
||||
const { error } = await supabase.auth.signUp({
|
||||
email,
|
||||
password,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
toast.error(error.message);
|
||||
} else {
|
||||
toast.success("Account created successfully!");
|
||||
router.push("/");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col space-y-2">
|
||||
<Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="Password"
|
||||
/>
|
||||
<Input
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
value={confirmPassword}
|
||||
onChange={(e) => setConfirmPassword(e.target.value)}
|
||||
placeholder="Confirm Password"
|
||||
/>
|
||||
<Button id="signup" onClick={handleSignup}>
|
||||
Sign Up
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,5 +1,3 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
@ -7,8 +5,6 @@ import Image from "next/image";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { ThemeToggle } from "@/components/theme-toggle";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useRouter } from "next/navigation";
|
||||
import {
|
||||
NavigationMenu,
|
||||
NavigationMenuContent,
|
||||
@ -16,36 +12,10 @@ import {
|
||||
NavigationMenuLink,
|
||||
NavigationMenuList,
|
||||
NavigationMenuTrigger,
|
||||
navigationMenuTriggerStyle,
|
||||
} from "@/components/ui/navigation-menu";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Search, Bell, Heart, Wallet } from "lucide-react";
|
||||
import { SearchBar } from "./serchBar";
|
||||
import { ProfileBar } from "./profileBar";
|
||||
|
||||
import { LogoutButton } from "@/components/auth/logoutButton";
|
||||
|
||||
import useSession from "@/lib/supabase/useSession";
|
||||
|
||||
const landings = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Landing 01",
|
||||
route: "/project-management",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Landing 02",
|
||||
route: "/crm-landing",
|
||||
},
|
||||
];
|
||||
const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
|
||||
({ className, title, children, ...props }, ref) => {
|
||||
return (
|
||||
@ -69,81 +39,7 @@ const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWit
|
||||
);
|
||||
ListItem.displayName = "ListItem";
|
||||
|
||||
const unAuthenticatedComponents = () => {
|
||||
return (
|
||||
<div className="flex gap-2 pl-2">
|
||||
<Link href="/auth">
|
||||
<Button variant="secondary" className="border-2 border-border">
|
||||
Login
|
||||
</Button>
|
||||
</Link>
|
||||
<Button>Sign up</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const authenticatedComponents = () => {
|
||||
let notifications = 100;
|
||||
const displayValue = notifications >= 100 ? "..." : notifications;
|
||||
return (
|
||||
<div className="flex gap-3 pl-2 items-center">
|
||||
<Link href={"/notification"}>
|
||||
{" "}
|
||||
<div className="relative inline-block">
|
||||
<Bell className="h-6 w-6" />
|
||||
<span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
|
||||
{displayValue}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
<Heart />
|
||||
<Wallet />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon" className="overflow-hidden rounded-full">
|
||||
<Avatar>
|
||||
<AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" />
|
||||
<AvatarFallback>1</AvatarFallback>
|
||||
</Avatar>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>Support</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
<LogoutButton />
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function NavigationBar() {
|
||||
const { session, loading } = useSession();
|
||||
const user = session?.user;
|
||||
const [sessionLoaded, setSessionLoaded] = React.useState(false);
|
||||
const [searchActive, setSearchActive] = React.useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!loading) {
|
||||
setSessionLoaded(true);
|
||||
}
|
||||
}, [loading]);
|
||||
|
||||
const handleKeyDown = async (k: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (k.key === "Enter") {
|
||||
const query = (k.target as HTMLInputElement).value.trim();
|
||||
if (query) {
|
||||
router.push(`/find?query=${encodeURIComponent(query)}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const businessComponents = [
|
||||
{
|
||||
title: "Business",
|
||||
@ -232,17 +128,7 @@ export function NavigationBar() {
|
||||
</NavigationMenuItem>
|
||||
|
||||
<NavigationMenuItem className="pl-5 flex">
|
||||
<Search onClick={() => setSearchActive(!searchActive)} className="cursor-pointer" />
|
||||
{/* search bar's input */}
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter business name..."
|
||||
className={cn(
|
||||
"ml-2 border rounded-md px-2 py-1 transition-all duration-300 ease-in-out ",
|
||||
searchActive ? "w-48 opacity-100" : "w-0 opacity-0"
|
||||
)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
<SearchBar />
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
@ -250,17 +136,7 @@ export function NavigationBar() {
|
||||
<div className="flex gap-2 pl-2">
|
||||
<ThemeToggle />
|
||||
<Separator orientation="vertical" className="mx-3" />
|
||||
{sessionLoaded ? (
|
||||
user ? (
|
||||
authenticatedComponents()
|
||||
) : (
|
||||
unAuthenticatedComponents()
|
||||
)
|
||||
) : (
|
||||
<div>
|
||||
<Skeleton className="rounded-lg h-full w-[160px]" />
|
||||
</div>
|
||||
)}
|
||||
<ProfileBar />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
102
src/components/navigationBar/profileBar.tsx
Normal file
102
src/components/navigationBar/profileBar.tsx
Normal file
@ -0,0 +1,102 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { Bell, Heart, Wallet } from "lucide-react";
|
||||
import { LogoutButton } from "@/components/auth/logoutButton";
|
||||
import useSession from "@/lib/supabase/useSession";
|
||||
|
||||
const UnAuthenticatedComponents = () => {
|
||||
return (
|
||||
<div className="flex gap-2 pl-2">
|
||||
<Link href="/auth">
|
||||
<Button variant="secondary" className="border-2 border-border">
|
||||
Login
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/auth/signup">
|
||||
<Button>Sign up</Button>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AuthenticatedComponents = () => {
|
||||
let notifications = 100;
|
||||
const displayValue = notifications >= 100 ? "..." : notifications;
|
||||
return (
|
||||
<div className="flex gap-3 pl-2 items-center">
|
||||
<Link href={"/notification"}>
|
||||
<div className="relative inline-block">
|
||||
<Bell className="h-6 w-6" />
|
||||
<span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
|
||||
{displayValue}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
<Heart />
|
||||
<Wallet />
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" size="icon" className="overflow-hidden rounded-full">
|
||||
<Avatar>
|
||||
<AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" />
|
||||
<AvatarFallback>1</AvatarFallback>
|
||||
</Avatar>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>
|
||||
<Link href="/profile">Profile</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>Support</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
<LogoutButton />
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export function ProfileBar() {
|
||||
const { session } = useSession();
|
||||
const user = session?.user;
|
||||
const [sessionLoaded, setSessionLoaded] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!session) {
|
||||
setSessionLoaded(true);
|
||||
}
|
||||
}, [session]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{sessionLoaded ? (
|
||||
user ? (
|
||||
<AuthenticatedComponents />
|
||||
) : (
|
||||
<UnAuthenticatedComponents />
|
||||
)
|
||||
) : (
|
||||
<div>
|
||||
<Skeleton className="rounded-lg h-full w-[160px]" />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
35
src/components/navigationBar/serchBar.tsx
Normal file
35
src/components/navigationBar/serchBar.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Search } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function SearchBar() {
|
||||
const [searchActive, setSearchActive] = React.useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === "Enter") {
|
||||
const query = (e.target as HTMLInputElement).value.trim();
|
||||
if (query) {
|
||||
router.push(`/find?query=${encodeURIComponent(query)}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center">
|
||||
<Search onClick={() => setSearchActive(!searchActive)} className="cursor-pointer" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Enter business name..."
|
||||
className={cn(
|
||||
"ml-2 border rounded-md px-2 py-1 transition-all duration-300 ease-in-out",
|
||||
searchActive ? "w-48 opacity-100" : "w-0 opacity-0"
|
||||
)}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -8,7 +8,7 @@ interface XMap {
|
||||
[tag: string]: string;
|
||||
}
|
||||
|
||||
interface ExtendableCardProps {
|
||||
interface ProjectCardProps {
|
||||
name: string;
|
||||
description: string;
|
||||
joinDate: string;
|
||||
@ -21,7 +21,7 @@ interface ExtendableCardProps {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function ExtendableCard(props: ExtendableCardProps) {
|
||||
export function ProjectCard(props: ProjectCardProps) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
@ -35,14 +35,14 @@ export function ExtendableCard(props: ExtendableCardProps) {
|
||||
<Image
|
||||
src={props.imageUri}
|
||||
alt="Card image"
|
||||
layout="fill"
|
||||
fill
|
||||
className="rounded-t-xl bg-background dark:bg-background h-full"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src="/money.png"
|
||||
alt="Card image"
|
||||
layout="fill"
|
||||
fill
|
||||
className="rounded-t-xl bg-background dark:bg-background h-full"
|
||||
/>
|
||||
)}
|
||||
@ -1,124 +1,108 @@
|
||||
"use client"
|
||||
"use client";
|
||||
|
||||
import * as React from "react"
|
||||
import useEmblaCarousel, {
|
||||
type UseEmblaCarouselType,
|
||||
} from "embla-carousel-react"
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react"
|
||||
import * as React from "react";
|
||||
import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
|
||||
import { ArrowLeft, ArrowRight } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
type CarouselApi = UseEmblaCarouselType[1]
|
||||
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
|
||||
type CarouselOptions = UseCarouselParameters[0]
|
||||
type CarouselPlugin = UseCarouselParameters[1]
|
||||
type CarouselApi = UseEmblaCarouselType[1];
|
||||
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
|
||||
type CarouselOptions = UseCarouselParameters[0];
|
||||
type CarouselPlugin = UseCarouselParameters[1];
|
||||
|
||||
type CarouselProps = {
|
||||
opts?: CarouselOptions
|
||||
plugins?: CarouselPlugin
|
||||
orientation?: "horizontal" | "vertical"
|
||||
setApi?: (api: CarouselApi) => void
|
||||
}
|
||||
opts?: CarouselOptions;
|
||||
plugins?: CarouselPlugin;
|
||||
orientation?: "horizontal" | "vertical";
|
||||
setApi?: (api: CarouselApi) => void;
|
||||
};
|
||||
|
||||
type CarouselContextProps = {
|
||||
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
|
||||
api: ReturnType<typeof useEmblaCarousel>[1]
|
||||
scrollPrev: () => void
|
||||
scrollNext: () => void
|
||||
canScrollPrev: boolean
|
||||
canScrollNext: boolean
|
||||
} & CarouselProps
|
||||
carouselRef: ReturnType<typeof useEmblaCarousel>[0];
|
||||
api: ReturnType<typeof useEmblaCarousel>[1];
|
||||
scrollPrev: () => void;
|
||||
scrollNext: () => void;
|
||||
canScrollPrev: boolean;
|
||||
canScrollNext: boolean;
|
||||
} & CarouselProps;
|
||||
|
||||
const CarouselContext = React.createContext<CarouselContextProps | null>(null)
|
||||
const CarouselContext = React.createContext<CarouselContextProps | null>(null);
|
||||
|
||||
function useCarousel() {
|
||||
const context = React.useContext(CarouselContext)
|
||||
const context = React.useContext(CarouselContext);
|
||||
|
||||
if (!context) {
|
||||
throw new Error("useCarousel must be used within a <Carousel />")
|
||||
throw new Error("useCarousel must be used within a <Carousel />");
|
||||
}
|
||||
|
||||
return context
|
||||
return context;
|
||||
}
|
||||
|
||||
const Carousel = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement> & CarouselProps
|
||||
>(
|
||||
(
|
||||
{
|
||||
orientation = "horizontal",
|
||||
opts,
|
||||
setApi,
|
||||
plugins,
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
|
||||
({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
|
||||
const [carouselRef, api] = useEmblaCarousel(
|
||||
{
|
||||
...opts,
|
||||
axis: orientation === "horizontal" ? "x" : "y",
|
||||
},
|
||||
plugins
|
||||
)
|
||||
const [canScrollPrev, setCanScrollPrev] = React.useState(false)
|
||||
const [canScrollNext, setCanScrollNext] = React.useState(false)
|
||||
);
|
||||
const [canScrollPrev, setCanScrollPrev] = React.useState(false);
|
||||
const [canScrollNext, setCanScrollNext] = React.useState(false);
|
||||
|
||||
const onSelect = React.useCallback((api: CarouselApi) => {
|
||||
if (!api) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
setCanScrollPrev(api.canScrollPrev())
|
||||
setCanScrollNext(api.canScrollNext())
|
||||
}, [])
|
||||
setCanScrollPrev(api.canScrollPrev());
|
||||
setCanScrollNext(api.canScrollNext());
|
||||
}, []);
|
||||
|
||||
const scrollPrev = React.useCallback(() => {
|
||||
api?.scrollPrev()
|
||||
}, [api])
|
||||
api?.scrollPrev();
|
||||
}, [api]);
|
||||
|
||||
const scrollNext = React.useCallback(() => {
|
||||
api?.scrollNext()
|
||||
}, [api])
|
||||
api?.scrollNext();
|
||||
}, [api]);
|
||||
|
||||
const handleKeyDown = React.useCallback(
|
||||
(event: React.KeyboardEvent<HTMLDivElement>) => {
|
||||
if (event.key === "ArrowLeft") {
|
||||
event.preventDefault()
|
||||
scrollPrev()
|
||||
event.preventDefault();
|
||||
scrollPrev();
|
||||
} else if (event.key === "ArrowRight") {
|
||||
event.preventDefault()
|
||||
scrollNext()
|
||||
event.preventDefault();
|
||||
scrollNext();
|
||||
}
|
||||
},
|
||||
[scrollPrev, scrollNext]
|
||||
)
|
||||
);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api || !setApi) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
setApi(api)
|
||||
}, [api, setApi])
|
||||
setApi(api);
|
||||
}, [api, setApi]);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (!api) {
|
||||
return
|
||||
return;
|
||||
}
|
||||
|
||||
onSelect(api)
|
||||
api.on("reInit", onSelect)
|
||||
api.on("select", onSelect)
|
||||
onSelect(api);
|
||||
api.on("reInit", onSelect);
|
||||
api.on("select", onSelect);
|
||||
|
||||
return () => {
|
||||
api?.off("select", onSelect)
|
||||
}
|
||||
}, [api, onSelect])
|
||||
api?.off("select", onSelect);
|
||||
};
|
||||
}, [api, onSelect]);
|
||||
|
||||
return (
|
||||
<CarouselContext.Provider
|
||||
@ -126,79 +110,64 @@ const Carousel = React.forwardRef<
|
||||
carouselRef,
|
||||
api: api,
|
||||
opts,
|
||||
orientation:
|
||||
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||
orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
|
||||
scrollPrev,
|
||||
scrollNext,
|
||||
canScrollPrev,
|
||||
canScrollNext,
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<div
|
||||
ref={ref}
|
||||
onKeyDownCapture={handleKeyDown}
|
||||
className={cn("relative", className)}
|
||||
role="region"
|
||||
aria-roledescription="carousel"
|
||||
{...props}
|
||||
>
|
||||
{...props}>
|
||||
{children}
|
||||
</div>
|
||||
</CarouselContext.Provider>
|
||||
)
|
||||
);
|
||||
}
|
||||
)
|
||||
Carousel.displayName = "Carousel"
|
||||
);
|
||||
Carousel.displayName = "Carousel";
|
||||
|
||||
const CarouselContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => {
|
||||
const { carouselRef, orientation } = useCarousel()
|
||||
const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => {
|
||||
const { carouselRef, orientation } = useCarousel();
|
||||
|
||||
return (
|
||||
<div ref={carouselRef} className="overflow-hidden">
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"flex",
|
||||
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
|
||||
className
|
||||
)}
|
||||
className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
|
||||
{...props}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
CarouselContent.displayName = "CarouselContent"
|
||||
);
|
||||
}
|
||||
);
|
||||
CarouselContent.displayName = "CarouselContent";
|
||||
|
||||
const CarouselItem = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => {
|
||||
const { orientation } = useCarousel()
|
||||
const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
||||
({ className, ...props }, ref) => {
|
||||
const { orientation } = useCarousel();
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
role="group"
|
||||
aria-roledescription="slide"
|
||||
className={cn(
|
||||
"min-w-0 shrink-0 grow-0 basis-full",
|
||||
orientation === "horizontal" ? "pl-4" : "pt-4",
|
||||
className
|
||||
)}
|
||||
className={cn("min-w-0 shrink-0 grow-0", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
})
|
||||
CarouselItem.displayName = "CarouselItem"
|
||||
);
|
||||
}
|
||||
);
|
||||
CarouselItem.displayName = "CarouselItem";
|
||||
|
||||
const CarouselPrevious = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<typeof Button>
|
||||
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
||||
const { orientation, scrollPrev, canScrollPrev } = useCarousel()
|
||||
const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
|
||||
({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
||||
const { orientation, scrollPrev, canScrollPrev } = useCarousel();
|
||||
|
||||
return (
|
||||
<Button
|
||||
@ -214,20 +183,18 @@ const CarouselPrevious = React.forwardRef<
|
||||
)}
|
||||
disabled={!canScrollPrev}
|
||||
onClick={scrollPrev}
|
||||
{...props}
|
||||
>
|
||||
{...props}>
|
||||
<ArrowLeft className="h-4 w-4" />
|
||||
<span className="sr-only">Previous slide</span>
|
||||
</Button>
|
||||
)
|
||||
})
|
||||
CarouselPrevious.displayName = "CarouselPrevious"
|
||||
);
|
||||
}
|
||||
);
|
||||
CarouselPrevious.displayName = "CarouselPrevious";
|
||||
|
||||
const CarouselNext = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
React.ComponentProps<typeof Button>
|
||||
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
||||
const { orientation, scrollNext, canScrollNext } = useCarousel()
|
||||
const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
|
||||
({ className, variant = "outline", size = "icon", ...props }, ref) => {
|
||||
const { orientation, scrollNext, canScrollNext } = useCarousel();
|
||||
|
||||
return (
|
||||
<Button
|
||||
@ -243,20 +210,13 @@ const CarouselNext = React.forwardRef<
|
||||
)}
|
||||
disabled={!canScrollNext}
|
||||
onClick={scrollNext}
|
||||
{...props}
|
||||
>
|
||||
{...props}>
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
<span className="sr-only">Next slide</span>
|
||||
</Button>
|
||||
)
|
||||
})
|
||||
CarouselNext.displayName = "CarouselNext"
|
||||
);
|
||||
}
|
||||
);
|
||||
CarouselNext.displayName = "CarouselNext";
|
||||
|
||||
export {
|
||||
type CarouselApi,
|
||||
Carousel,
|
||||
CarouselContent,
|
||||
CarouselItem,
|
||||
CarouselPrevious,
|
||||
CarouselNext,
|
||||
}
|
||||
export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
|
||||
|
||||
16
src/lib/data/dropdownQuery.ts
Normal file
16
src/lib/data/dropdownQuery.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { SupabaseClient } from "@supabase/supabase-js";
|
||||
|
||||
|
||||
function getAllTagsQuery(client: SupabaseClient) {
|
||||
return client.from("Tag").select("id, value");
|
||||
}
|
||||
|
||||
function getALlFundedStatusQuery(client: SupabaseClient) {
|
||||
return client.from("FundedStatus").select("id, value, description");
|
||||
}
|
||||
|
||||
function getAllBusinessTypeQuery(client: SupabaseClient) {
|
||||
return client.from("BusinessType").select("id, value, description");
|
||||
}
|
||||
|
||||
export { getAllTagsQuery, getALlFundedStatusQuery, getAllBusinessTypeQuery };
|
||||
157
src/lib/data/projectQuery.ts
Normal file
157
src/lib/data/projectQuery.ts
Normal file
@ -0,0 +1,157 @@
|
||||
import { SupabaseClient } from "@supabase/supabase-js";
|
||||
|
||||
async function getTopProjects(client: SupabaseClient, numberOfRecords: number = 4) {
|
||||
try {
|
||||
const { data, error } = await client
|
||||
.from("Project")
|
||||
.select(
|
||||
`
|
||||
id,
|
||||
projectName,
|
||||
businessId,
|
||||
publishedTime,
|
||||
projectShortDescription,
|
||||
cardImage,
|
||||
ProjectInvestmentDetail (
|
||||
minInvestment,
|
||||
totalInvestment,
|
||||
targetInvestment,
|
||||
investmentDeadline
|
||||
),
|
||||
ItemTag (
|
||||
Tag (
|
||||
id,
|
||||
value
|
||||
)
|
||||
),
|
||||
Business (
|
||||
location
|
||||
)
|
||||
`
|
||||
)
|
||||
.order("publishedTime", { ascending: false })
|
||||
.limit(numberOfRecords);
|
||||
|
||||
if (error) {
|
||||
console.error("Error fetching top projects:", error.message);
|
||||
return { data: null, error: error.message };
|
||||
}
|
||||
|
||||
return { data, error: null };
|
||||
} catch (err) {
|
||||
console.error("Unexpected error:", err);
|
||||
return { data: null, error: "An unexpected error occurred." };
|
||||
}
|
||||
}
|
||||
|
||||
async function getProjectData(client: SupabaseClient, projectId: number) {
|
||||
const query = client.from("Project").select(
|
||||
`
|
||||
project_name:projectName,
|
||||
project_short_description:projectShortDescription,
|
||||
project_description:projectDescription,
|
||||
published_time:publishedTime,
|
||||
...ProjectInvestmentDetail!inner (
|
||||
min_investment:minInvestment,
|
||||
total_investment:totalInvestment,
|
||||
target_investment:targetInvestment,
|
||||
investment_deadline:investmentDeadline
|
||||
),
|
||||
tags:ItemTag!inner (
|
||||
...Tag!inner (
|
||||
tag_name:value
|
||||
)
|
||||
)
|
||||
`
|
||||
).eq("id", projectId).single()
|
||||
|
||||
const {data, error} = await query;
|
||||
return { data, error }
|
||||
}
|
||||
|
||||
export interface FilterParams {
|
||||
searchTerm?: string;
|
||||
tagsFilter?: string[];
|
||||
projectStatus?: string;
|
||||
projectStatusFilter?: string;
|
||||
businessTypeFilter?: string;
|
||||
sortByTimeFilter?: string;
|
||||
}
|
||||
|
||||
export interface FilterProjectQueryParams extends FilterParams {
|
||||
page: number,
|
||||
pageSize: number
|
||||
}
|
||||
|
||||
function searchProjectsQuery(client: SupabaseClient, {searchTerm, tagsFilter, projectStatus, businessTypeFilter, sortByTimeFilter, page = 1, pageSize = 4}: FilterProjectQueryParams) {
|
||||
const start = (page - 1) * pageSize;
|
||||
const end = start + pageSize - 1;
|
||||
|
||||
let query = client.from("Project").select(
|
||||
`
|
||||
project_id:id,
|
||||
project_name:projectName,
|
||||
published_time:publishedTime,
|
||||
project_short_description:projectShortDescription,
|
||||
card_image_url:cardImage,
|
||||
...ProjectStatus!Project_projectStatusId_fkey!inner (
|
||||
project_status:value
|
||||
),
|
||||
...ProjectInvestmentDetail!inner (
|
||||
min_investment:minInvestment,
|
||||
total_investment:totalInvestment,
|
||||
target_investment:targetInvestment,
|
||||
investment_deadline:investmentDeadline
|
||||
),
|
||||
tags:ItemTag!inner (
|
||||
...Tag!inner (
|
||||
tag_name:value
|
||||
)
|
||||
),
|
||||
...Business!inner (
|
||||
...businessType!inner (
|
||||
business_type:value
|
||||
),
|
||||
business_location:location
|
||||
)
|
||||
`
|
||||
).order("publishedTime", { ascending: false }).range(start, end)
|
||||
|
||||
if (sortByTimeFilter === "all") {
|
||||
sortByTimeFilter = undefined;
|
||||
}
|
||||
|
||||
if (projectStatus === "all") {
|
||||
projectStatus = undefined;
|
||||
}
|
||||
|
||||
if (businessTypeFilter === "all") {
|
||||
businessTypeFilter = undefined;
|
||||
}
|
||||
|
||||
if (tagsFilter?.length === 0) {
|
||||
tagsFilter = undefined;
|
||||
}
|
||||
|
||||
if (searchTerm) {
|
||||
query = query.ilike('projectName', `%${searchTerm}%`)
|
||||
}
|
||||
|
||||
if (tagsFilter) {
|
||||
query = query.in('ItemTag.Tag.value', tagsFilter)
|
||||
}
|
||||
|
||||
if (projectStatus) {
|
||||
query = query.eq("ProjectStatus.value", projectStatus)
|
||||
}
|
||||
|
||||
if (businessTypeFilter) {
|
||||
query = query.eq("Business.businessType.value", businessTypeFilter)
|
||||
}
|
||||
|
||||
return query;
|
||||
}
|
||||
|
||||
|
||||
export { getTopProjects, getProjectData, searchProjectsQuery };
|
||||
|
||||
35
src/lib/data/query.ts
Normal file
35
src/lib/data/query.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import { SupabaseClient } from "@supabase/supabase-js";
|
||||
|
||||
function getBusinesses(client: SupabaseClient, query: string | null) {
|
||||
return client.from("Business").select("id, businessName, joinedDate").ilike("businessName", `%${query}%`);
|
||||
}
|
||||
|
||||
function getProjects(client: SupabaseClient, businessIds: string[]) {
|
||||
return client
|
||||
.from("Project")
|
||||
.select(
|
||||
`
|
||||
id,
|
||||
projectName,
|
||||
businessId,
|
||||
publishedTime,
|
||||
projectShortDescription,
|
||||
ProjectInvestmentDetail (
|
||||
minInvestment,
|
||||
totalInvestment,
|
||||
targetInvestment
|
||||
)
|
||||
`
|
||||
)
|
||||
.in("businessId", businessIds);
|
||||
}
|
||||
|
||||
function getTags(client: SupabaseClient, projectIds: string[]) {
|
||||
return client.from("ItemTag").select("itemId, Tag (value)").in("itemId", projectIds);
|
||||
}
|
||||
|
||||
function getInvestmentCounts(client: SupabaseClient, projectIds: string[]) {
|
||||
return client.from("InvestmentDeal").select("*", { count: "exact", head: true }).in("projectId", projectIds);
|
||||
}
|
||||
|
||||
export { getBusinesses, getProjects, getTags, getInvestmentCounts };
|
||||
23
src/lib/data/userQuery.ts
Normal file
23
src/lib/data/userQuery.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { SupabaseClient } from "@supabase/supabase-js";
|
||||
|
||||
async function getUserProfile(client: SupabaseClient, userId: string) {
|
||||
try {
|
||||
const { data, error } = await client
|
||||
.from("Profiles")
|
||||
.select("updated_at, username, full_name, avatar_url, website, bio")
|
||||
.eq("id", userId)
|
||||
.single();
|
||||
|
||||
if (error) {
|
||||
console.error("Error fetching user profile:", error.message);
|
||||
return { data: null, error: error.message };
|
||||
}
|
||||
|
||||
return { data, error: null };
|
||||
} catch (err) {
|
||||
console.error("Unexpected error:", err);
|
||||
return { data: null, error: "An unexpected error occurred." };
|
||||
}
|
||||
}
|
||||
|
||||
export { getUserProfile };
|
||||
BIN
src/types/database.types.ts
Normal file
BIN
src/types/database.types.ts
Normal file
Binary file not shown.
@ -74,7 +74,7 @@ const config = {
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("tailwindcss-animate")],
|
||||
plugins: [require("tailwindcss-animate"), require('@tailwindcss/typography'),],
|
||||
} satisfies Config
|
||||
|
||||
export default config
|
||||
Loading…
Reference in New Issue
Block a user