Skip to content

Commit

Permalink
Visual styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@glebovsky
glebovsky committed Jul 28, 2024
1 parent fb2bbd6 commit eb40e9f
Show file tree
Hide file tree
Showing 4 changed files with 180 additions and 134 deletions.
3 changes: 2 additions & 1 deletion src/common/components/atoms/button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const buttonVariants = cva(
size: {
default: "h-10 px-4 rounded-md py-2 text-md",
sm: "h-8 rounded-md px-3 text-xs",
md: "h-9 rounded-md px-5 text-sm",
lg: "h-10 rounded-md px-8",
icon: "h-10 w-10 rounded-md",
},
Expand Down Expand Up @@ -53,7 +54,7 @@ export interface ButtonProps
| "secondary"
| "ghost"
| "link";
size?: "default" | "sm" | "lg" | "icon";
size?: "default" | "sm" | "md" | "lg" | "icon";
width?: "auto" | "full";
withIcon?: boolean;
}
Expand Down
43 changes: 21 additions & 22 deletions src/fidgets/snapshot/SnapShot.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { defaultStyleFields } from "@/fidgets/helpers";
import ProposalItem from "./components/ProposalItem";
import { useSnapshotProposals } from "@/common/lib/hooks/useSnapshotProposals";
import { useSnapShotInfo } from "@/common/lib/hooks/useSnapshotInfo";
import { Button } from "@/common/components/atoms/button";
import { FaAngleLeft, FaAngleRight } from "react-icons/fa6";

export type snapShotSettings = {
subgraphUrl: string;
Expand Down Expand Up @@ -41,9 +43,9 @@ export const snapshotConfig: FidgetProperties = {
export const SnapShot: React.FC<FidgetArgs<snapShotSettings>> = ({
settings,
}) => {
const [expandedProposalId, setExpandedProposalId] = useState<string | null>(
null,
);
// const [expandedProposalId, setExpandedProposalId] = useState<string | null>(
// null,
// );
const [skip, setSkip] = useState<number>(0);
const first = 5;

Expand All @@ -56,11 +58,11 @@ export const SnapShot: React.FC<FidgetArgs<snapShotSettings>> = ({
ens: settings["snapshot ens"],
});

const handleToggleExpand = (proposalId: string) => {
setExpandedProposalId((prevId) =>
prevId === proposalId ? null : proposalId,
);
};
// const handleToggleExpand = (proposalId: string) => {
// setExpandedProposalId((prevId) =>
// prevId === proposalId ? null : proposalId,
// );
// };

const handlePrevious = () => {
setSkip((prevSkip) => Math.max(prevSkip - first, 0));
Expand All @@ -76,35 +78,32 @@ export const SnapShot: React.FC<FidgetArgs<snapShotSettings>> = ({
{settings["snapshot ens"]} proposals
</h1>
{error && <p className="text-red-500">{error}</p>}
<div
className="flex-grow overflow-scroll"
style={{ scrollbarWidth: "none" }}
>
<div className="grid gap-2 overflow-auto">
{proposals.map((proposal) => (
<ProposalItem
key={proposal.id}
proposal={proposal}
isExpanded={expandedProposalId === proposal.id}
onToggleExpand={handleToggleExpand}
// isExpanded={expandedProposalId === proposal.id}
// onToggleExpand={handleToggleExpand}
space={settings["snapshot ens"]}
/>
))}
</div>
<div className="flex justify-between mt-4">
<button
className="bg-blue-500 text-white py-2 px-4 rounded"
<Button
variant="primary"
onClick={handlePrevious}
disabled={skip === 0}
>
Previous
</button>
<button
className="bg-blue-500 text-white py-2 px-4 rounded"
<FaAngleLeft /> Previous
</Button>
<Button
variant="primary"
onClick={handleNext}
disabled={proposals.length < first}
>
Next
</button>
Next <FaAngleRight />
</Button>
</div>
</CardContent>
);
Expand Down
185 changes: 111 additions & 74 deletions src/fidgets/snapshot/components/ProposalItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import {
renderWeightedVotingUI,
} from "../utils/renderVotingUI";
import { initialState, reducer, State, Action } from "../utils/stateManagement";
import { Button } from "@/common/components/atoms/button";
import { FaAngleDown } from "react-icons/fa6";

interface ProposalItemProps {
proposal: any;
Expand All @@ -21,8 +23,8 @@ interface ProposalItemProps {

const ProposalItem: React.FC<ProposalItemProps> = ({
proposal,
isExpanded,
onToggleExpand,
// isExpanded,
// onToggleExpand,
space,
}) => {
const extractImageUrl = (markdown: string): string | null => {
Expand Down Expand Up @@ -147,101 +149,136 @@ const ProposalItem: React.FC<ProposalItemProps> = ({
const totalScores = proposal.scores.reduce((acc, score) => acc + score, 0);

return (
<div className="mt-4">
{proposal.choices.map((choice: string, index: number) => {
const score = proposal.scores[index];
const percentage = (score / totalScores) * 100;

return (
<div key={index} className="flex items-center mb-2">
<div className="flex-grow">
<>
<div className="grid grid-cols-[auto_1fr_auto] items-center gap-2">
{proposal.choices.map((choice: string, index: number) => {
const score = proposal.scores[index];
const percentage = (score / totalScores) * 100;

return (
<>
<div className="text-xs font-medium">{choice}</div>
<div className="h-2 w-full bg-gray-300 rounded">
<div
className="h-full bg-green-500 rounded"
style={{ width: `${percentage}%` }}
/>
</div>
</div>
<div className="ml-2 text-xs font-medium">
{score.toFixed(2)} GNAR
</div>
</div>
);
})}
<div className="mt-2">
{proposal.scores[0] > proposal.scores[1] ? (
<span className="text-green-500 font-bold">Passed</span>
) : (
<span className="text-red-500 font-bold">Failed</span>
)}
<div className="text-xs font-medium">
{score.toFixed(2)} GNAR
</div>
</>
);
})}
</div>
</div>
<div className="mt-2 text-center">
<Badge
color={
proposal.scores[0] > proposal.scores[1]
? "bg-green-500"
: "bg-red-500"
}
status={
proposal.scores[0] > proposal.scores[1] ? "Passed" : "Failed"
}
/>
</div>
</>
);
};

const [visibleSection, setVisibleSection] = useState<string>("preview");
const [visibleSection, setVisibleSection] = useState<string | undefined>();

const handleSectionChange = (section: string) => {
onToggleExpand(proposal.id);
setVisibleSection(section);
// onToggleExpand(proposal.id);
setVisibleSection((prevSection) =>
prevSection === section ? undefined : section,
);
};
console.log(proposal.space.id);
return (
<div className="flex flex-row p-4 border border-gray-200 rounded-lg mb-1 relative">
<span
className={`absolute top-2 right-2 text-white py-1 px-2 rounded text-xs ${getStatusBadgeColor()}`}
style={{ width: "60px", textAlign: "center" }}
>
{status}
</span>
<img
src={avatarUrl}
alt="Avatar"
className="w-16 h-16 rounded-md mr-4 object-cover"
onError={handleError}
/>
<div className="flex flex-col flex-grow">
<h4 className="font-bold cursor-pointer">{proposal.title}</h4>

<>
<div className="flex space-x-4 mt-2">
<button
className={`px-2 py-1 ${visibleSection === "preview" ? "bg-blue-500 text-white rounded-md border border-black" : "bg-gray-200 rounded-md border border-black"}`}
return (
<div className="p-4 border border-gray-200 bg-white rounded-lg">
<div className="grid grid-cols-[4rem_1fr] gap-4">
<img
src={avatarUrl}
alt="Avatar"
className="w-16 h-16 rounded-md mr-4 object-cover"
onError={handleError}
/>
<div className="flex flex-col flex-grow">
<h4 className="font-bold grid grid-cols-[1fr_auto] gap-4 items-start">
{proposal.title}
<Badge color={getStatusBadgeColor()} status={status} />
</h4>
<div className="flex gap-2 mt-4">
<CardButton
label="Preview"
onClick={() => handleSectionChange("preview")}
>
Preview
</button>
<button
className={`px-2 py-1 ${visibleSection === "results" ? "bg-blue-500 text-white rounded-md border border-black" : "bg-gray-200 rounded-md border border-black"}`}
isActive={visibleSection === "preview"}
/>
<CardButton
label="Results"
onClick={() => handleSectionChange("results")}
>
Results
</button>
<button
className={`px-2 py-1 ${visibleSection === "voting" ? "bg-blue-500 text-white rounded-md border border-black" : "bg-gray-200 rounded-md border border-black"}`}
isActive={visibleSection === "results"}
/>
<CardButton
label="Voting"
onClick={() => handleSectionChange("voting")}
>
Voting
</button>
isActive={visibleSection === "voting"}
/>
</div>
{isExpanded && visibleSection === "preview" && (
<ReactMarkdown
rehypePlugins={[rehypeRaw]}
remarkPlugins={[remarkGfm]}
components={MarkdownRenderers}
>
{proposal.body}
</ReactMarkdown>
)}
{visibleSection === "results" && renderVotingResults()}
{visibleSection === "voting" && (
<div className="mt-4">{renderVotingButtons()}</div>
)}
</>
</div>
</div>
<div className={visibleSection !== undefined ? `border-t mt-4 pt-4` : ``}>
{visibleSection === "preview" && (
<ReactMarkdown
rehypePlugins={[rehypeRaw]}
remarkPlugins={[remarkGfm]}
components={MarkdownRenderers}
>
{proposal.body}
</ReactMarkdown>
)}
{visibleSection === "results" && renderVotingResults()}
{visibleSection === "voting" && renderVotingButtons()}
</div>
</div>
);
};

const Badge: React.FC<{ color: string; status: string }> = ({
color,
status,
}) => {
return (
<div
className={`inline-block text-white py-1 px-3 rounded-full text-xs ${color}`}
>
{status}
</div>
);
};

const CardButton: React.FC<{
label: string;
onClick: () => void;
isActive: boolean;
}> = ({ label, onClick, isActive }) => {
return (
<Button
variant="outline"
size="md"
onClick={onClick}
className={`rounded-full text-slate-600 ${isActive ? "bg-slate-100 text-slate-700 border-slate-300" : ""}`}
withIcon
>
{label}{" "}
<FaAngleDown
className={`fill-slate-400 transition-all ease-in ${isActive ? "rotate-180" : ""}`}
/>
</Button>
);
};

export default ProposalItem;
Loading

0 comments on commit eb40e9f

Please sign in to comment.