Skip to content

Commit 8d95693

Browse files
KocalKocal
committed
iterate
1 parent 95f7276 commit 8d95693

File tree

59 files changed

+1113
-229
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+1113
-229
lines changed

‎src/Toolkit/kits/shadcn/Alert/EXAMPLES.md‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Examples
2+
3+
## Default
4+
5+
```twig {"preview":true}
6+
<twig:Alert class="max-w-lg">
7+
<twig:ux:icon name="tabler:terminal" class="h-4 w-4" />
8+
<twig:Alert:Title>Heads up!</twig:Alert:Title>
9+
<twig:Alert:Description>
10+
You can add components to your app using the cli.
11+
</twig:Alert:Description>
12+
</twig:Alert>
13+
```
14+
15+
## Destructive
16+
17+
```twig {"preview":true}
18+
<twig:Alert variant="destructive" class="max-w-lg">
19+
<twig:ux:icon name="tabler:alert-circle" class="h-4 w-4" />
20+
<twig:Alert:Title>Error</twig:Alert:Title>
21+
<twig:Alert:Description>
22+
Your session has expired. Please log in again.
23+
</twig:Alert:Description>
24+
</twig:Alert>
25+
```

‎src/Toolkit/kits/shadcn/AspectRatio/EXAMPLES.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Examples
2+
3+
## Default
4+
5+
```twig {"preview":true,"height":"400px"}
6+
<twig:AspectRatio ratio="1 / 1" class="max-w-[300px]">
7+
<img
8+
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80"
9+
alt="Landscape photograph by Tobias Tullius"
10+
class="h-full w-full rounded-md object-cover"
11+
/>
12+
</twig:AspectRatio>
13+
```
14+
15+
## With a 1 / 1 aspect ratio
16+
17+
```twig {"preview":true,"height":"400px"}
18+
<twig:AspectRatio ratio="1 / 1" class="max-w-[350px]">
19+
<img
20+
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80"
21+
alt="Landscape photograph by Tobias Tullius"
22+
class="h-full w-full rounded-md object-cover"
23+
/>
24+
</twig:AspectRatio>
25+
```
26+
27+
## With a 16 / 9 aspect ratio
28+
29+
```twig {"preview":true,"height":"400px"}
30+
<twig:AspectRatio ratio="16 / 9" class="max-w-[350px]">
31+
<img
32+
src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&amp;dpr=2&amp;q=80"
33+
alt="Landscape photograph by Tobias Tullius"
34+
class="h-full w-full rounded-md object-cover"
35+
/>
36+
</twig:AspectRatio>
37+
```

‎src/Toolkit/kits/shadcn/Avatar/EXAMPLES.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Examples
2+
3+
## Avatar with Image
4+
5+
```twig {"preview":true}
6+
<twig:Avatar>
7+
<twig:Avatar:Image src="https://github.com/symfony.png" alt="@symfony" />
8+
</twig:Avatar>
9+
```
10+
11+
## Avatar with Text
12+
13+
```twig {"preview":true}
14+
<div class="flex gap-1">
15+
<twig:Avatar>
16+
<twig:Avatar:Text>FP</twig:Avatar:Text>
17+
</twig:Avatar>
18+
<twig:Avatar>
19+
<twig:Avatar:Text class="bg-red-500 text-red-50">FP</twig:Avatar:Text>
20+
</twig:Avatar>
21+
</div>
22+
```
23+
24+
## Avatar Group
25+
26+
```twig {"preview":true}
27+
<div class="flex -space-x-2">
28+
<twig:Avatar>
29+
<twig:Avatar:Image src="https://github.com/symfony.png" alt="@symfony" />
30+
</twig:Avatar>
31+
<twig:Avatar>
32+
<twig:Avatar:Text>FP</twig:Avatar:Text>
33+
</twig:Avatar>
34+
<twig:Avatar>
35+
<twig:Avatar:Text class="bg-red-500 text-red-50">FP</twig:Avatar:Text>
36+
</twig:Avatar>
37+
</div>
38+
```

‎src/Toolkit/kits/shadcn/Badge/EXAMPLES.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Examples
2+
3+
## Default
4+
5+
```twig {"preview":true}
6+
<twig:Badge>Badge</twig:Badge>
7+
```
8+
9+
## Secondary
10+
11+
```twig {"preview":true}
12+
<twig:Badge variant="secondary">
13+
Badge
14+
</twig:Badge>
15+
```
16+
17+
## Outline
18+
19+
```twig {"preview":true}
20+
<twig:Badge variant="outline">
21+
Badge
22+
</twig:Badge>
23+
```
24+
25+
## Destructive
26+
27+
```twig {"preview":true}
28+
<twig:Badge variant="destructive">
29+
Badge
30+
</twig:Badge>
31+
```
32+
33+
## With Icon
34+
35+
```twig {"preview":true}
36+
<twig:Badge>
37+
<twig:ux:icon name="lucide:check" class="mr-1 h-3 w-3" />
38+
Verified
39+
</twig:Badge>
40+
```

‎src/Toolkit/kits/shadcn/Breadcrumb/EXAMPLES.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
# Examples
2+
3+
## Default
4+
5+
```twig {"preview":true}
6+
<twig:Breadcrumb>
7+
<twig:Breadcrumb:List>
8+
<twig:Breadcrumb:Item>
9+
<twig:Breadcrumb:Link href=".">Home</twig:Breadcrumb:Link>
10+
</twig:Breadcrumb:Item>
11+
<twig:Breadcrumb:Separator />
12+
<twig:Breadcrumb:Item>
13+
<twig:Breadcrumb:Link href=".">Docs</twig:Breadcrumb:Link>
14+
</twig:Breadcrumb:Item>
15+
<twig:Breadcrumb:Separator />
16+
<twig:Breadcrumb:Item>
17+
<twig:Breadcrumb:Link href=".">Components</twig:Breadcrumb:Link>
18+
</twig:Breadcrumb:Item>
19+
<twig:Breadcrumb:Separator />
20+
<twig:Breadcrumb:Item>
21+
<twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
22+
</twig:Breadcrumb:Item>
23+
</twig:Breadcrumb:List>
24+
</twig:Breadcrumb>
25+
```
26+
27+
## Custom Separator
28+
29+
```twig {"preview":true}
30+
<twig:Breadcrumb>
31+
<twig:Breadcrumb:List>
32+
<twig:Breadcrumb:Item>
33+
<twig:Breadcrumb:Link href=".">Home</twig:Breadcrumb:Link>
34+
</twig:Breadcrumb:Item>
35+
<twig:Breadcrumb:Separator>
36+
<twig:ux:icon name="lucide:slash" />
37+
</twig:Breadcrumb:Separator>
38+
<twig:Breadcrumb:Item>
39+
<twig:Breadcrumb:Link href=".">Docs</twig:Breadcrumb:Link>
40+
</twig:Breadcrumb:Item>
41+
<twig:Breadcrumb:Separator>
42+
<twig:ux:icon name="lucide:slash" />
43+
</twig:Breadcrumb:Separator>
44+
<twig:Breadcrumb:Item>
45+
<twig:Breadcrumb:Link href=".">Components</twig:Breadcrumb:Link>
46+
</twig:Breadcrumb:Item>
47+
<twig:Breadcrumb:Separator>
48+
<twig:ux:icon name="lucide:slash" />
49+
</twig:Breadcrumb:Separator>
50+
<twig:Breadcrumb:Item>
51+
<twig:Breadcrumb:Page>Breadcrumb</twig:Breadcrumb:Page>
52+
</twig:Breadcrumb:Item>
53+
</twig:Breadcrumb:List>
54+
</twig:Breadcrumb>
55+
```

‎src/Toolkit/kits/shadcn/Button/EXAMPLES.md‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
# Examples
2+
3+
## Default
4+
5+
```twig {"preview":true}
6+
<twig:Button>
7+
Click me
8+
</twig:Button>
9+
```
10+
11+
## Primary
12+
13+
```twig {"preview":true}
14+
<twig:Button>Button</twig:Button>
15+
```
16+
17+
## Secondary
18+
19+
```twig {"preview":true}
20+
<twig:Button variant="outline">Outline</twig:Button>
21+
```
22+
23+
## Destructive
24+
25+
```twig {"preview":true}
26+
<twig:Button variant="destructive">Destructive</twig:Button>
27+
```
28+
29+
## Outline
30+
31+
```twig {"preview":true}
32+
<twig:Button variant="outline">Outline</twig:Button>
33+
```
34+
35+
## Ghost
36+
37+
```twig {"preview":true}
38+
<twig:Button variant="ghost">Ghost</twig:Button>
39+
```
40+
41+
## Link
42+
43+
```twig {"preview":true}
44+
<twig:Button variant="link">Link</twig:Button>
45+
```
46+
47+
## Icon
48+
49+
```twig {"preview":true}
50+
<twig:Button variant="outline" size="icon">
51+
<twig:ux:icon name="lucide:chevron-right" />
52+
</twig:Button>
53+
```
54+
55+
## With Icon
56+
57+
```twig {"preview":true}
58+
<twig:Button>
59+
<twig:ux:icon name="lucide:mail" /> Login with Email
60+
</twig:Button>
61+
```
62+
63+
## Loading
64+
65+
```twig {"preview":true}
66+
<twig:Button disabled>
67+
<twig:ux:icon name="lucide:loader-2" class="animate-spin" /> Please wait
68+
</twig:Button>
69+
```

‎src/Toolkit/kits/shadcn/Card/EXAMPLES.md‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
# Examples
2+
3+
## Default
4+
5+
```twig {"preview":true,"height":"300px"}
6+
<twig:Card class="w-[350px]">
7+
<twig:Card:Header>
8+
<twig:Card:Title>Card Title</twig:Card:Title>
9+
<twig:Card:Description>Card Description</twig:Card:Description>
10+
</twig:Card:Header>
11+
<twig:Card:Content>
12+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</p>
13+
</twig:Card:Content>
14+
<twig:Card:Footer class="justify-between">
15+
<twig:Button variant="outline">Cancel</twig:Button>
16+
<twig:Button>Action</twig:Button>
17+
</twig:Card:Footer>
18+
</twig:Card>
19+
```
20+
21+
## With Notifications
22+
23+
```twig {"preview":true,"height":"400px"}
24+
{% set notifications = [
25+
{ title: "Your call has been confirmed.", description: "1 hour ago"},
26+
{ title: "You have a new message!", description: "1 hour ago"},
27+
{ title: "Your subscription is expiring soon!", description: "2 hours ago" },
28+
] %}
29+
<twig:Card class="w-[350px]">
30+
<twig:Card:Header>
31+
<twig:Card:Title>Notifications</twig:Card:Title>
32+
<twig:Card:Description>You have 3 unread messages.</twig:Card:Description>
33+
</twig:Card:Header>
34+
<twig:Card:Content>
35+
{%- for notification in notifications -%}
36+
<div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
37+
<span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
38+
<div class="space-y-1">
39+
<p class="text-sm font-medium leading-none">
40+
{{ notification.title }}
41+
</p>
42+
<p class="text-sm text-muted-foreground">
43+
{{ notification.description }}
44+
</p>
45+
</div>
46+
</div>
47+
{%- endfor -%}
48+
</twig:Card:Content>
49+
<twig:Card:Footer>
50+
<twig:Button class="w-full">
51+
<twig:ux:icon name="lucide:check" />
52+
Mark all as read
53+
</twig:Button>
54+
</twig:Card:Footer>
55+
</twig:Card>
56+
```

‎src/Toolkit/kits/shadcn/Checkbox/EXAMPLES.md‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
# Examples
2+
3+
## Default
4+
5+
```twig {"preview":true}
6+
<div class="flex items-center space-x-2">
7+
<twig:Checkbox id="terms" />
8+
<label for="terms" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
9+
Accept terms and conditions
10+
</label>
11+
</div>
12+
```
13+
14+
## With Label Component
15+
16+
```twig {"preview":true}
17+
<div class="flex items-center space-x-2">
18+
<twig:Checkbox id="terms" />
19+
<twig:Label for="terms">Accept terms and conditions</twig:Label>
20+
</div>
21+
```
22+
23+
## Disabled
24+
25+
```twig {"preview":true}
26+
<div class="flex items-center space-x-2">
27+
<twig:Checkbox id="terms" disabled />
28+
<twig:Label for="terms">Accept terms and conditions</twig:Label>
29+
</div>
30+
```

‎src/Toolkit/kits/shadcn/INSTALL.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@ This kit provides ready-to-use and fully-customizable UI Twig components based o
44

55
Please note that not every Shadcn UI component is available in this kit, but we are working on it!
66

7-
## Requirements
7+
# Requirements
88

99
This kit requires TailwindCSS to work:
1010
- If you use Symfony AssetMapper, you can install TailwindCSS with the [TailwindBundle](https://symfony.com/bundles/TailwindBundle/current/index.html),
1111
- If you use Webpack Encore, you can follow the [TailwindCSS installation guide for Symfony](https://tailwindcss.com/docs/installation/framework-guides/symfony)
1212

13-
## Installation
13+
# Installation
1414

1515
In your `assets/styles/app.css`, after the TailwindCSS imports, add the following code:
1616

0 commit comments

Comments
 (0)