Skip to content

Commit ef3cfeb

Browse files
rohit1901actions-user
rohit1901
and
actions-user
authored
feat: example (#11)
- udpated example - added dev deps for example application --------- Co-authored-by: GitHub Actions <[email protected]>
1 parent f9edc26 commit ef3cfeb

18 files changed

+4010
-178
lines changed

‎components.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "default",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.js",
8+
"css": "example/example.css",
9+
"baseColor": "slate",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils"
16+
}
17+
}

‎example/example.app.tsx

Lines changed: 164 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,172 @@
1-
import viteLogo from '/vite.svg'
2-
import {useTranslation} from "../src";
31
import {useTranslation as useTranslationT} from "./useAutocompleteT";
2+
import {Card, CardContent, CardDescription, CardHeader, CardTitle} from "@/components/ui/card";
3+
import {Table, TableBody, TableCell, TableHead, TableHeader, TableRow} from "@/components/ui/table";
4+
import {Earth, Languages} from "lucide-react";
45

6+
/**
7+
* TODO: Display available JSON files
8+
* TODO: Display available languages
9+
* TODO: Add functionality to change language
10+
* TODO: Add functionality to change JSON file
11+
*/
512
function ExampleApp() {
6-
const { locale, setLocale } = useTranslation();
713
const {T} = useTranslationT();
8-
914
return (
10-
<>
11-
<div>
12-
<a href="https://vitejs.dev" target="_blank">
13-
<img src={viteLogo} className="logo" alt="Vite logo"/>
14-
</a>
15-
</div>
16-
<h1>Selected Locale: {locale}</h1>
17-
<div className="flex-box">
18-
<button onClick={() => setLocale("en")} disabled={locale === "en"}>English</button>
19-
<button onClick={() => setLocale("de")} disabled={locale === "de"}>German</button>
20-
</div>
21-
<div>Simple translation: <code>T('hello')</code> results in <pre>{T('hello')}</pre></div>
22-
<div>Translation with parameters: <code>{`T('user.describe.simple', {name: "John"})`}</code> results
23-
in <pre>{T('user.describe.simple', {name: "John"})}</pre></div>
24-
<div>Pluralization: <code>
25-
{`T('message-count', {count: 5})`}
26-
</code> results in <pre>{T('message-count', {count: 5})}</pre></div>
27-
<div>Fallback: <code>
28-
{`T('fallback.valid')`}
29-
</code> results in <pre>{T('fallback.valid')}</pre></div>
30-
{/*Date and Time section*/}
31-
<div>Date: <code>
32-
{`T('date')`}
33-
</code> results in <pre>{T('date')}</pre></div>
34-
<div>Date UTC: <code>
35-
{`T('date-utc')`}
36-
</code> results in <pre>{T('date-utc')}</pre></div>
37-
<div>Nested Dates (Simple Format):
38-
<code>
39-
{`T('dates.simple')`}
40-
</code> results in <pre>{T('dates.simple')}</pre></div>
41-
<div>Nested Dates (Simple Format):
42-
<code>
43-
{`T('dates.nested.simple')`}
44-
</code> results in <pre>{T('dates.nested.simple')}</pre></div>
45-
<div>Nested Dates (Complex Format):
46-
<code>
47-
{`T('dates.nested.complex')`}
48-
</code> results in <pre>{T('dates.nested.complex')}</pre></div>
49-
<div>Parameters in Dates:
50-
<code>
51-
{`T('dates.parameter', {date: new Date()})`}
52-
</code> results in <pre>{T('dates.parameter', {date: Date.now()})}</pre></div>
53-
54-
{/*Missing Keys section*/}
55-
<div>Missing key: <code>
56-
{`T('missing.key')`}
57-
</code> results in <pre>{T('missing.key')}</pre></div>
58-
<div>Missing key with fallback: <code>
59-
{`T('fallback.valid')`}
60-
</code> results in <pre>{T('fallback.valid')}</pre></div>
61-
</>
15+
<div className="flex min-h-screen w-full flex-col">
16+
<header className="sticky top-0 flex h-16 items-center justify-between gap-4 border-b bg-background p-6 w-full">
17+
<div className="p-2 flex flex-row items-center">
18+
<Earth className="mr-4" />
19+
<Languages className="mr-4"/>
20+
<h1 className="text-2xl font-semibold">React Intl - Example</h1>
21+
</div>
22+
</header>
23+
<main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
24+
<div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
25+
<Card className="mx-auto max-w-sm">
26+
<CardHeader className="flex flex-col justify-between">
27+
<CardTitle>Translations</CardTitle>
28+
<CardDescription>
29+
Example of translations using the <code className="text-secondary-foreground">useTranslation</code> hook
30+
</CardDescription>
31+
</CardHeader>
32+
<CardContent>
33+
<Table>
34+
<TableHeader>
35+
<TableRow>
36+
<TableHead>Translation Type</TableHead>
37+
<TableHead>Code</TableHead>
38+
<TableHead>Output</TableHead>
39+
</TableRow>
40+
</TableHeader>
41+
<TableBody>
42+
<TableRow>
43+
<TableCell>
44+
Simple translation
45+
</TableCell>
46+
<TableCell>
47+
<code>T('hello')</code>
48+
</TableCell>
49+
<TableCell>
50+
{T('hello')}
51+
</TableCell>
52+
</TableRow>
53+
<TableRow>
54+
<TableCell>
55+
Translation with parameters
56+
</TableCell>
57+
<TableCell>
58+
<code>{`T('user.describe.simple', {name: "John"})`}</code>
59+
</TableCell>
60+
<TableCell>
61+
{T('user.describe.simple', {name: 'John'})}
62+
</TableCell>
63+
</TableRow>
64+
<TableRow>
65+
<TableCell>
66+
Pluralization
67+
</TableCell>
68+
<TableCell>
69+
<code>{`T('message-count', {count: 5})`}</code>
70+
</TableCell>
71+
<TableCell>
72+
{T('message-count', {count: 5})}
73+
</TableCell>
74+
</TableRow>
75+
<TableRow>
76+
<TableCell>
77+
Fallback
78+
</TableCell>
79+
<TableCell>
80+
<code>{`T('fallback.valid')`}</code>
81+
</TableCell>
82+
<TableCell>
83+
{T('fallback.valid')}
84+
</TableCell>
85+
</TableRow>
86+
<TableRow>
87+
<TableCell>
88+
Date
89+
</TableCell>
90+
<TableCell>
91+
<code>{`T('date')`}</code>
92+
</TableCell>
93+
<TableCell>
94+
{T('date')}
95+
</TableCell>
96+
</TableRow>
97+
<TableRow>
98+
<TableCell>
99+
Date UTC
100+
</TableCell>
101+
<TableCell>
102+
<code>{`T('date-utc')`}</code>
103+
</TableCell>
104+
<TableCell>
105+
{T('date-utc')}
106+
</TableCell>
107+
</TableRow>
108+
<TableRow>
109+
<TableCell>
110+
Nested Dates (Simple Format)
111+
</TableCell>
112+
<TableCell>
113+
<code>{`T('dates.simple')`}</code>
114+
</TableCell>
115+
<TableCell>
116+
{T('dates.simple')}
117+
</TableCell>
118+
</TableRow>
119+
<TableRow>
120+
<TableCell>
121+
Nested Dates (Complex Format)
122+
</TableCell>
123+
<TableCell>
124+
<code>{`T('dates.nested.complex')`}</code>
125+
</TableCell>
126+
<TableCell>
127+
{T('dates.nested.complex')}
128+
</TableCell>
129+
</TableRow>
130+
<TableRow>
131+
<TableCell>
132+
Parameters in Dates
133+
</TableCell>
134+
<TableCell>
135+
<code>{`T('dates.parameter', {date: new Date()})`}</code>
136+
</TableCell>
137+
<TableCell>
138+
{T('dates.parameter', {date: new Date().toDateString()})}
139+
</TableCell>
140+
</TableRow>
141+
<TableRow>
142+
<TableCell>
143+
Missing key
144+
</TableCell>
145+
<TableCell>
146+
<code>{`T('missing.key')`}</code>
147+
</TableCell>
148+
<TableCell>
149+
{T('missing.key')}
150+
</TableCell>
151+
</TableRow>
152+
<TableRow>
153+
<TableCell>
154+
Missing key with fallback
155+
</TableCell>
156+
<TableCell>
157+
<code>{`T('fallback.valid')`}</code>
158+
</TableCell>
159+
<TableCell>
160+
{T('fallback.valid')}
161+
</TableCell>
162+
</TableRow>
163+
</TableBody>
164+
</Table>
165+
</CardContent>
166+
</Card>
167+
</div>
168+
</main>
169+
</div>
62170
)
63171
}
64172

‎example/example.css

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;
4+
5+
@layer base {
6+
:root {
7+
--background: 0 0% 100%;
8+
--foreground: 222.2 84% 4.9%;
9+
--card: 0 0% 100%;
10+
--card-foreground: 222.2 84% 4.9%;
11+
--popover: 0 0% 100%;
12+
--popover-foreground: 222.2 84% 4.9%;
13+
--primary: 222.2 47.4% 11.2%;
14+
--primary-foreground: 210 40% 98%;
15+
--secondary: 210 40% 96.1%;
16+
--secondary-foreground: 222.2 47.4% 11.2%;
17+
--muted: 210 40% 96.1%;
18+
--muted-foreground: 215.4 16.3% 46.9%;
19+
--accent: 210 40% 96.1%;
20+
--accent-foreground: 222.2 47.4% 11.2%;
21+
--destructive: 0 84.2% 60.2%;
22+
--destructive-foreground: 210 40% 98%;
23+
--border: 214.3 31.8% 91.4%;
24+
--input: 214.3 31.8% 91.4%;
25+
--ring: 222.2 84% 4.9%;
26+
--radius: 0.5rem;
27+
--chart-1: 12 76% 61%;
28+
--chart-2: 173 58% 39%;
29+
--chart-3: 197 37% 24%;
30+
--chart-4: 43 74% 66%;
31+
--chart-5: 27 87% 67%;
32+
}
33+
34+
.dark {
35+
--background: 222.2 84% 4.9%;
36+
--foreground: 210 40% 98%;
37+
--card: 222.2 84% 4.9%;
38+
--card-foreground: 210 40% 98%;
39+
--popover: 222.2 84% 4.9%;
40+
--popover-foreground: 210 40% 98%;
41+
--primary: 210 40% 98%;
42+
--primary-foreground: 222.2 47.4% 11.2%;
43+
--secondary: 217.2 32.6% 17.5%;
44+
--secondary-foreground: 210 40% 98%;
45+
--muted: 217.2 32.6% 17.5%;
46+
--muted-foreground: 215 20.2% 65.1%;
47+
--accent: 217.2 32.6% 17.5%;
48+
--accent-foreground: 210 40% 98%;
49+
--destructive: 0 62.8% 30.6%;
50+
--destructive-foreground: 210 40% 98%;
51+
--border: 217.2 32.6% 17.5%;
52+
--input: 217.2 32.6% 17.5%;
53+
--ring: 212.7 26.8% 83.9%;
54+
--chart-1: 220 70% 50%;
55+
--chart-2: 160 60% 45%;
56+
--chart-3: 30 80% 55%;
57+
--chart-4: 280 65% 60%;
58+
--chart-5: 340 75% 55%;
59+
}
60+
}
61+
62+
@layer base {
63+
* {
64+
@apply border-border;
65+
}
66+
body {
67+
@apply bg-background text-foreground;
68+
}
69+
}
70+
.justify-end {
71+
justify-content: end;
72+
}
73+
.mr-4 {
74+
margin-right: 1rem;
75+
}

0 commit comments

Comments
 (0)