Skip to content

Commit 5e72c35

Browse files
MrWangJustToDoMrWangJustToDo
committed
format
1 parent d2ae8c2 commit 5e72c35

3 files changed

Lines changed: 35 additions & 32 deletions

File tree

‎ui/react-example/index.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,19 @@
99
name="description"
1010
content="A feature-rich, high-performance diff view component for React, Vue, Solid, and Svelte. GitHub-style UI with syntax highlighting, split/unified views, and SSR support."
1111
/>
12-
<meta name="keywords" content="git diff, file diff, react diff component, vue diff component, solid diff component, svelte diff component, code review, syntax highlighting" />
12+
<meta
13+
name="keywords"
14+
content="git diff, file diff, react diff component, vue diff component, solid diff component, svelte diff component, code review, syntax highlighting"
15+
/>
1316
<meta name="author" content="MrWangJustToDo" />
1417

1518
<!-- Open Graph / Facebook -->
1619
<meta property="og:type" content="website" />
1720
<meta property="og:title" content="Git Diff View - High-Performance Diff Component" />
18-
<meta property="og:description" content="Feature-rich diff view component for React, Vue, Solid & Svelte with GitHub-style UI" />
21+
<meta
22+
property="og:description"
23+
content="Feature-rich diff view component for React, Vue, Solid & Svelte with GitHub-style UI"
24+
/>
1925

2026
<!-- Twitter -->
2127
<meta name="twitter:card" content="summary_large_image" />

‎ui/react-example/src/index.css‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
/* Import Inter font for better readability */
2-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
3-
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
2+
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");
3+
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap");
44

55
@tailwind base;
66
@tailwind components;
77
@tailwind utilities;
88

99
@layer base {
1010
:root {
11-
--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
12-
--font-mono: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', 'Courier New', monospace;
11+
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
12+
--font-mono: "JetBrains Mono", "Fira Code", "Monaco", "Consolas", "Courier New", monospace;
1313
}
1414

1515
body {
@@ -19,7 +19,9 @@
1919
text-rendering: optimizeLegibility;
2020
}
2121

22-
code, pre, .font-mono {
22+
code,
23+
pre,
24+
.font-mono {
2325
font-family: var(--font-mono);
2426
}
2527
}
@@ -64,7 +66,8 @@
6466
}
6567

6668
@keyframes float {
67-
0%, 100% {
69+
0%,
70+
100% {
6871
transform: translateY(0px);
6972
}
7073
50% {
@@ -90,7 +93,8 @@
9093

9194
/* Gradient animation */
9295
@keyframes gradientShift {
93-
0%, 100% {
96+
0%,
97+
100% {
9498
background-position: 0% 50%;
9599
}
96100
50% {
@@ -105,7 +109,8 @@
105109

106110
/* Pulse glow */
107111
@keyframes pulseGlow {
108-
0%, 100% {
112+
0%,
113+
100% {
109114
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
110115
}
111116
50% {

‎ui/react-example/src/views/Main/StartContent.tsx‎

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,16 @@ export const StartContent = () => {
88
const { colorScheme } = useMantineColorScheme();
99

1010
return (
11-
<Container className="mt-16 mb-12" size="xl">
11+
<Container className="mb-12 mt-16" size="xl">
1212
{/* Section Header */}
13-
<Box className="text-center mb-12">
13+
<Box className="mb-12 text-center">
1414
<Badge size="lg" variant="light" color="blue" mb="md">
1515
Quick Start
1616
</Badge>
17-
<Title order={2} className="text-3xl font-bold mb-4">
17+
<Title order={2} className="mb-4 text-3xl font-bold">
1818
Get Started in Seconds
1919
</Title>
20-
<Text size="lg" c="dimmed" className="max-w-2xl mx-auto">
20+
<Text size="lg" c="dimmed" className="mx-auto max-w-2xl">
2121
Install the package and start using Git Diff View in your project right away
2222
</Text>
2323
</Box>
@@ -26,25 +26,17 @@ export const StartContent = () => {
2626
<Box
2727
className="rounded-xl border border-solid shadow-sm"
2828
style={{
29-
borderColor: colorScheme === 'light' ? '#e9ecef' : 'var(--mantine-color-dark-4)',
30-
backgroundColor: colorScheme === 'light' ? '#ffffff' : 'var(--mantine-color-dark-7)',
29+
borderColor: colorScheme === "light" ? "#e9ecef" : "var(--mantine-color-dark-4)",
30+
backgroundColor: colorScheme === "light" ? "#ffffff" : "var(--mantine-color-dark-7)",
3131
}}
3232
>
3333
<Box className="p-6">
3434
<Tabs defaultValue="react" variant="pills">
3535
<Tabs.List className="mb-6">
36-
<Tabs.Tab
37-
value="react"
38-
leftSection={<IconBrandReact style={iconStyle} />}
39-
className="text-base"
40-
>
36+
<Tabs.Tab value="react" leftSection={<IconBrandReact style={iconStyle} />} className="text-base">
4137
React
4238
</Tabs.Tab>
43-
<Tabs.Tab
44-
value="vue"
45-
leftSection={<IconBrandVue style={iconStyle} />}
46-
className="text-base"
47-
>
39+
<Tabs.Tab value="vue" leftSection={<IconBrandVue style={iconStyle} />} className="text-base">
4840
Vue
4941
</Tabs.Tab>
5042
</Tabs.List>
@@ -53,11 +45,11 @@ export const StartContent = () => {
5345
<Box
5446
className="rounded-xl border border-solid p-6"
5547
style={{
56-
borderColor: colorScheme === 'light' ? '#f1f3f5' : 'var(--mantine-color-dark-5)',
57-
backgroundColor: colorScheme === 'light' ? '#f8f9fa' : 'var(--mantine-color-dark-6)',
48+
borderColor: colorScheme === "light" ? "#f1f3f5" : "var(--mantine-color-dark-5)",
49+
backgroundColor: colorScheme === "light" ? "#f8f9fa" : "var(--mantine-color-dark-6)",
5850
}}
5951
>
60-
<Box className="flex items-center gap-3 mb-4">
52+
<Box className="mb-4 flex items-center gap-3">
6153
<IconCode size={24} className="text-blue-500" />
6254
<Title order={3} size="h4">
6355
React Example
@@ -74,11 +66,11 @@ export const StartContent = () => {
7466
<Box
7567
className="rounded-xl border border-solid p-6"
7668
style={{
77-
borderColor: colorScheme === 'light' ? '#f1f3f5' : 'var(--mantine-color-dark-5)',
78-
backgroundColor: colorScheme === 'light' ? '#f8f9fa' : 'var(--mantine-color-dark-6)',
69+
borderColor: colorScheme === "light" ? "#f1f3f5" : "var(--mantine-color-dark-5)",
70+
backgroundColor: colorScheme === "light" ? "#f8f9fa" : "var(--mantine-color-dark-6)",
7971
}}
8072
>
81-
<Box className="flex items-center gap-3 mb-4">
73+
<Box className="mb-4 flex items-center gap-3">
8274
<IconCode size={24} className="text-green-500" />
8375
<Title order={3} size="h4">
8476
Vue Example

0 commit comments

Comments
 (0)