Skip to content

Commit 1454133

Browse files
committed
.
1 parent 4e477d0 commit 1454133

File tree

9 files changed

+1450
-0
lines changed

9 files changed

+1450
-0
lines changed
Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
"use client"
2+
3+
4+
5+
import { TrendingUp } from "lucide-react"
6+
import { Bar, BarChart, CartesianGrid, XAxis, LabelList, ErrorBar, YAxis, Label } from "recharts"
7+
8+
9+
10+
import {
11+
Card,
12+
CardContent,
13+
CardDescription,
14+
CardFooter,
15+
CardHeader,
16+
CardTitle,
17+
} from "@/components/ui/card"
18+
import {
19+
ChartContainer,
20+
ChartTooltip,
21+
ChartTooltipContent,
22+
ChartLegend,
23+
ChartLegendContent,
24+
type ChartConfig,
25+
} from "@/components/ui/chart"
26+
27+
28+
29+
const chartData = [
30+
{ month: "January", desktop: 186, desktopStd: [16.6, 20.6], mobile: 80, mobileStd: [16.6, 20.6], },
31+
{ month: "February", desktop: 186, desktopStd: [16.6, 20.6], mobile: 80, mobileStd: [16.6, 20.6], },
32+
{ month: "March", desktop: 186, desktopStd: [16.6, 20.6], mobile: 80, mobileStd: [16.6, 20.6], },
33+
{ month: "April", desktop: 186, desktopStd: [16.6, 20.6], mobile: 80, mobileStd: [16.6, 20.6], },
34+
{ month: "May", desktop: 186, desktopStd: [16.6, 20.6], mobile: 80, mobileStd: [16.6, 20.6], },
35+
{ month: "June", desktop: 186, desktopStd: [16.6, 20.6], mobile: 80, mobileStd: [16.6, 20.6], },
36+
]
37+
38+
39+
40+
const chartConfig = {
41+
desktop: {
42+
label: "Desktop",
43+
color: "#4286F3",
44+
},
45+
mobile: {
46+
label: "Mobile",
47+
color: "#ebb017",
48+
},
49+
} satisfies ChartConfig
50+
51+
52+
53+
export function ExampleBarChart() {
54+
return (
55+
<Card className="bg-transparent border-0 shadow-transparent p-0 m-0 gap-3 flex-1">
56+
57+
58+
59+
<CardHeader className="m-0 p-0 leading-relaxed font-normal text-sm">
60+
<CardDescription>January - June 2024 &#8593; &#8595;</CardDescription>
61+
</CardHeader>
62+
63+
64+
65+
<CardContent className="px-0">
66+
<ChartContainer config={chartConfig}>
67+
<BarChart accessibilityLayer data={chartData}>
68+
<CartesianGrid vertical={false} />
69+
<XAxis
70+
dataKey="month"
71+
tickLine={false}
72+
tickMargin={10}
73+
axisLine={false}
74+
tickFormatter={(value) => value.slice(0, 3)}
75+
/>
76+
<YAxis
77+
yAxisId="left"
78+
orientation="left"
79+
tickLine={false}
80+
axisLine={false}
81+
tickMargin={10}
82+
width={Math.max(...chartData.map((d) => String(d.desktop).length)) * 11}
83+
>
84+
{/* <Label
85+
value="Visitors"
86+
angle={-90}
87+
position="insideLeft"
88+
style={{ textAnchor: "middle" }}
89+
/> */}
90+
</YAxis>
91+
<ChartTooltip
92+
cursor={false}
93+
content={<ChartTooltipContent indicator="dashed" />}
94+
/>
95+
<ChartLegend content={<ChartLegendContent />} className="text-white"/>
96+
<Bar dataKey="desktop" fill="var(--color-desktop)" yAxisId="left" radius={4}>
97+
<LabelList
98+
position="top"
99+
offset={12}
100+
className="fill-foreground"
101+
fontSize={12}
102+
/>
103+
</Bar>
104+
<Bar dataKey="mobile" fill="var(--color-mobile)" yAxisId="left" radius={4}>
105+
<ErrorBar
106+
dataKey="desktopStd"
107+
direction="y"
108+
/>
109+
</Bar>
110+
</BarChart>
111+
</ChartContainer>
112+
</CardContent>
113+
114+
115+
116+
<CardFooter className="px-0 [.border-t]:pt-0">
117+
<div className="flex w-full items-start">
118+
<i className="leading-relaxed font-normal text-sm">
119+
Example Bar Chart
120+
</i>
121+
</div>
122+
</CardFooter>
123+
124+
125+
126+
</Card>
127+
)
128+
}
Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
'use client';
2+
3+
import { useRef, useState } from 'react';
4+
5+
export default function CitationBlock() {
6+
const blockRef = useRef<HTMLPreElement>(null);
7+
const [copied, setCopied] = useState(false);
8+
9+
const handleCopy = async () => {
10+
if (!blockRef.current) return;
11+
12+
try {
13+
await navigator.clipboard.writeText(blockRef.current.innerText);
14+
setCopied(true);
15+
setTimeout(() => setCopied(false), 2000);
16+
} catch (err) {
17+
console.error('复制失败:', err);
18+
}
19+
};
20+
21+
return (
22+
<div className="mt-6 flex flex-row gap-6 justify-center">
23+
<div />
24+
<div className="relative w-full max-w-4xl">
25+
{/* 右上角复制按钮 */}
26+
<button
27+
onClick={handleCopy}
28+
className="absolute top-2 right-2 p-2 rounded-sm bg-transparent hover:bg-black/10 transition"
29+
title="Copy"
30+
>
31+
{copied ? (
32+
<svg
33+
xmlns="http://www.w3.org/2000/svg"
34+
viewBox="0 0 24 24"
35+
fill="none"
36+
stroke="white"
37+
strokeWidth={2.5}
38+
strokeLinecap="round"
39+
strokeLinejoin="round"
40+
className="w-5 h-5"
41+
>
42+
<path d="M5 13l4 4L19 7" />
43+
</svg>
44+
) : (
45+
<svg
46+
xmlns="http://www.w3.org/2000/svg"
47+
fill="none"
48+
viewBox="0 0 24 24"
49+
strokeWidth={2.5}
50+
stroke="white"
51+
strokeLinecap="round"
52+
strokeLinejoin="round"
53+
className="w-5 h-5"
54+
>
55+
<path d="M8 16h8M8 12h8m-6 8h6a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2h2" />
56+
</svg>
57+
)}
58+
</button>
59+
60+
{/* Citation Code Block (wrap, no scroll) */}
61+
<pre
62+
ref={blockRef}
63+
className="
64+
w-full p-4 rounded-sm
65+
bg-black/10
66+
font-mono text-sm
67+
text-muted-foreground
68+
leading-relaxed
69+
70+
whitespace-pre-wrap
71+
break-words
72+
"
73+
>
74+
<code>{`@article{xx,
75+
title = {xxx},
76+
author = {xxx},
77+
journal = {xxx},
78+
year = {xxx},
79+
note = {xxx},
80+
}`}</code>
81+
</pre>
82+
</div>
83+
<div />
84+
</div>
85+
);
86+
}

0 commit comments

Comments
 (0)