Skip to content

Commit 326e5b0

Browse files
tonytrinh3tonytrinh3
committed
started gov page
1 parent 8921631 commit 326e5b0

File tree

1 file changed

+173
-0
lines changed

1 file changed

+173
-0
lines changed

‎pages/government.tsx

+173
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
import { useContext } from "react";
2+
import { motion } from "framer-motion";
3+
import { Toaster } from "@/components/ui/toaster";
4+
import { useLDClient } from "launchdarkly-react-client-sdk";
5+
import NavBar from "@/components/ui/navbar";
6+
import { AnimatePresence } from "framer-motion";
7+
import LoginHomePage from "@/components/LoginHomePage";
8+
import { setCookie } from "cookies-next";
9+
import LoginContext from "@/utils/contexts/login";
10+
import InvestmentAccountHeader from "@/components/ui/investmentcomponents/InvestmentAccountHeader";
11+
12+
import NewsCard from "@/components/ui/investmentcomponents/NewsCard";
13+
import StockMoversCard from "@/components/ui/investmentcomponents/StockMoversCard";
14+
import BalanceCard from "@/components/ui/investmentcomponents/BalanceCard";
15+
import RetirementCard from "@/components/ui/investmentcomponents/RetirementCard";
16+
import TradingTrainingCard from "@/components/ui/investmentcomponents/TradingTrainingCard";
17+
import MarketCard from "@/components/ui/investmentcomponents/MarketCard";
18+
import StockRecommendationCard from "@/components/ui/investmentcomponents/StockRecommendationCard";
19+
import RecentTradesCard from "@/components/ui/investmentcomponents/RecentTradesCard";
20+
21+
export default function Investment() {
22+
const { isLoggedIn, logoutUser } = useContext(LoginContext);
23+
24+
const ldclient = useLDClient();
25+
26+
//TODO: either use this or the one in login.js
27+
//TODO: move this into navbar
28+
function handleLogout() {
29+
logoutUser();
30+
const context: any = ldclient?.getContext();
31+
context.user.tier = null;
32+
ldclient?.identify(context);
33+
setCookie("ldcontext", context);
34+
}
35+
36+
const cardStyle = "rounded-lg shadow-lg p-5 sm:p-5 bg-white";
37+
38+
return (
39+
<>
40+
<Toaster />
41+
<AnimatePresence mode="wait">
42+
{!isLoggedIn ? (
43+
<LoginHomePage variant="investment" name="Frontier Capital" />
44+
) : (
45+
<motion.main
46+
initial={{ opacity: 0 }}
47+
animate={{ opacity: 1 }}
48+
transition={{ duration: 0.5 }}
49+
className={`flex h-full flex-col bg-investmentbackgroundgrey`}
50+
>
51+
<NavBar variant={"investment"} handleLogout={handleLogout} />
52+
<InvestmentAccountHeader />
53+
<div className="my-8 " data-testid="salient-accounts-test-id">
54+
<div className="mx-auto max-w-7xl font-sohnelight ">
55+
<div
56+
className="main-investment-card-wrapper grid gap-3 grid-cols-1
57+
lg:grid-cols-[repeat(4,minmax(175px,1fr))]
58+
investmentXL:grid-cols-[repeat(6,minmax(180px,1fr))]
59+
lg:grid-rows-[repeat(12,10rem)]
60+
investmentXL:grid-rows-[repeat(9,10rem)]
61+
px-4 xl:px-0"
62+
>
63+
<div
64+
className={`card-1 ${cardStyle}
65+
lg:col-start-1 lg:col-end-3
66+
investmentXL:col-start-1 investmentXL:col-end-3
67+
lg:row-start-1 lg:row-end-5 flex flex-col justify-between `}
68+
data-testid="stock-balance-card-test-id"
69+
>
70+
<BalanceCard />
71+
</div>
72+
<div
73+
className={`card-2 ${cardStyle}
74+
lg:col-start-3 lg:col-end-5
75+
investmentXL:col-start-5 investmentXL:col-end-7
76+
lg:row-start-1 lg:row-end-3
77+
investmentXL:row-start-1 investmentXL:row-end-3
78+
lg:h-[19rem] flex flex-col justify-center `}
79+
data-testid="stock-trading-training-card-test-id"
80+
>
81+
<TradingTrainingCard />
82+
</div>
83+
<div
84+
className={`card-3 ${cardStyle}
85+
lg:col-start-3 lg:col-end-5
86+
investmentXL:col-start-3 investmentXL:col-end-5
87+
lg:row-start-3 lg:row-end-5
88+
investmentXL:row-start-1 investmentXL:row-end-3
89+
lg:mt-[-2rem]
90+
investmentXL:mt-[0rem]
91+
lg:h-[35.5rem] flex flex-col`}
92+
data-testid="recent-trades-card-test-id"
93+
>
94+
<RecentTradesCard />
95+
</div>
96+
97+
<div
98+
className={`card-4 ${cardStyle}
99+
lg:col-start-1 lg:col-end-3
100+
investmentXL:col-start-5 investmentXL:col-end-7
101+
lg:row-start-5 lg:row-end-7
102+
investmentXL:row-start-2 investmentXL:row-end-4
103+
lg:mt-[-.25rem]
104+
investmentXL:mt-[9rem]
105+
lg:h-[23rem] flex flex-col justify-between`}
106+
data-testid="stock-recommendation-card-test-id"
107+
>
108+
<StockRecommendationCard />
109+
</div>
110+
111+
<div
112+
className={`card-5 ${cardStyle}
113+
lg:col-start-3 lg:col-end-5
114+
investmentXL:col-start-1 investmentXL:col-end-3
115+
lg:row-start-6 lg:row-end-8
116+
investmentXL:row-start-5 investmentXL:row-end-7
117+
lg:mt-[2rem]
118+
investmentXL:mt-[0rem]
119+
lg:h-[35rem] flex flex-col justify-between`}
120+
data-testid="stock-movers-card-test-id"
121+
>
122+
<StockMoversCard />
123+
</div>
124+
<div
125+
className={`card-6 ${cardStyle}
126+
lg:col-start-1 lg:col-end-3
127+
investmentXL:col-start-3 investmentXL:col-end-5
128+
lg:row-start-7 lg:row-end-9
129+
investmentXL:row-start-4 investmentXL:row-end-7
130+
lg:mt-[2rem]
131+
investmentXL:mt-[4rem]
132+
lg:h-[31rem]
133+
investmentXL:h-[100%] flex flex-col justify-between
134+
`}
135+
data-testid="stock-news-card-test-id"
136+
>
137+
<NewsCard />
138+
</div>
139+
<div
140+
className={`card-7 ${cardStyle}
141+
lg:col-start-1 lg:col-end-3
142+
investmentXL:col-start-5 investmentXL:col-end-7
143+
lg:row-start-7 lg:row-end-9
144+
investmentXL:row-start-4 investmentXL:row-end-5
145+
lg:mt-[33.5rem]
146+
investmentXL:mt-[11.25rem]
147+
lg:h-[25rem] flex flex-col justify-between items-center`}
148+
data-testid="stock-retirement-card-test-id"
149+
>
150+
<RetirementCard />
151+
</div>
152+
<div
153+
className={`card-8 ${cardStyle}
154+
lg:col-start-3 lg:col-end-5
155+
investmentXL:col-start-3 investmentXL:col-end-5
156+
lg:row-start-7 lg:row-end-9
157+
investmentXL:row-start-7 investmentXL:row-end-8
158+
lg:mt-[27rem]
159+
investmentXL:mt-[4rem]
160+
lg:h-[15rem] flex flex-col justify-between`}
161+
data-testid="stock-market-card-test-id"
162+
>
163+
<MarketCard />
164+
</div>
165+
</div>
166+
</div>
167+
</div>
168+
</motion.main>
169+
)}
170+
</AnimatePresence>
171+
</>
172+
);
173+
}

0 commit comments

Comments
 (0)