Skip to content

Commit c096994

Browse files
stevethomasstevethomas
committed
extract Logo component
1 parent 4feb1ea commit c096994

File tree

9 files changed

+83
-25
lines changed

9 files changed

+83
-25
lines changed

‎app/App.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import { ScrollArea } from "@/components/scroll-area"
1717
import { SidebarNavigation } from "@app/components"
1818
import { navigation } from "@app/router/navigation"
1919
import MobileSidebar from "@app/components/MobileSidebar.vue"
20+
import Logo from "@app/components/Logo.vue"
2021
2122
const mode = useColorMode()
2223
const isDark = computed({
@@ -34,7 +35,7 @@ const sidebarOpen = ref(false)
3435
<Header>
3536
<RouterLink to="/" class="hidden lg:block">
3637
<div class="flex items-center space-x-2">
37-
<img src="/logo.svg" alt="Coding Labs UI" class="w-6" />
38+
<Logo alt="Coding Labs UI" class="w-6" />
3839

3940
<div class="text-xl font-semibold tracking-tight">GOOEY</div>
4041
</div>

‎app/components/Logo.vue‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<script setup lang="ts">
2+
import { useColorMode } from '@vueuse/core'
3+
4+
const mode = useColorMode()
5+
</script>
6+
7+
<template>
8+
<svg v-if="mode === 'dark'" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425.2 595.28">
9+
<path
10+
fill="#fff"
11+
d="M320,220.15l7.7-27-113.68-32.4-7.9,27.73C122.71,191.18,46.92,247,22.81,331.63c-29.88,104.82,30.87,214,135.69,243.89s214-30.87,243.89-135.69C426.74,354.41,390.89,266.09,320,220.15ZM212.6,528A141.51,141.51,0,1,1,354.11,386.45,141.51,141.51,0,0,1,212.6,528Z"
12+
/>
13+
14+
<circle fill="#f95e08" cx="325.01" cy="93.07" r="17.74" />
15+
16+
<circle fill="#f95e08" cx="271.17" cy="328.71" r="18.39" />
17+
18+
<circle fill="#f95e08" cx="237.07" cy="296.47" r="11.69" />
19+
20+
<path
21+
fill="#f95e08"
22+
d="M322,369.31a69.45,69.45,0,0,1-36.66,13.35c-23.68,1.48-46.8-7.2-68.2-17.44-21-10-42.38-22-65.64-21.48-16.59.4-31.92,7.17-46.41,15.69A110.7,110.7,0,1,0,322,369.31ZM138.63,391.61a15.69,15.69,0,1,1,15.69,15.69A15.69,15.69,0,0,1,138.63,391.61Zm30.58,45.62a8.45,8.45,0,1,1,8.45-8.45A8.45,8.45,0,0,1,169.21,437.23Z"
23+
/>
24+
25+
<rect
26+
fill="#fff"
27+
x="212.84"
28+
y="113.82"
29+
width="141.7"
30+
height="38.13"
31+
transform="translate(47.3 -72.68) rotate(15.91)"
32+
/>
33+
34+
<circle fill="#f95e08" cx="272.82" cy="65.03" r="10.3" />
35+
36+
<circle fill="#f95e08" cx="328.47" cy="18.44" r="10.3" />
37+
</svg>
38+
39+
<svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 425.2 595.3">
40+
<circle fill="#f95e08" cx="273.7" cy="333.9" r="24.5" />
41+
42+
<circle fill="#f95e08" cx="228.2" cy="290.9" r="15.6" />
43+
44+
<path
45+
fill="#f95e08"
46+
d="M342.4,364.4c-12.4,9.2-28,14.9-43.5,15.8c-28.1,1.8-55.5-8.5-80.9-20.7c-24.9-11.9-50.3-26.1-77.9-25.5c-19.7,0.5-37.9,8.5-55.1,18.6c-2.3,9.8-3.7,20-3.7,30.5c0,72.5,58.8,131.3,131.3,131.3c72.5,0,131.3-58.8,131.3-131.3C343.9,376.8,343.3,370.5,342.4,364.4z M128.5,395.9c0-9.9,8-17.8,17.8-17.8c9.9,0,17.8,8,17.8,17.8s-8,17.8-17.8,17.8C136.4,413.8,128.5,405.8,128.5,395.9z M163.2,447.8c-5.3,0-9.6-4.3-9.6-9.6c0-5.3,4.3-9.6,9.6-9.6s9.6,4.3,9.6,9.6C172.9,443.5,168.5,447.8,163.2,447.8z"
47+
/>
48+
49+
<path
50+
fill="#212121"
51+
d="M320.6,218.6l7.7-27.1l-114.3-32.6l-7.9,27.9c-83.9,2.7-160.1,58.9-184.3,143.9c-30,105.4,31,215.1,136.4,245.2c105.4,30,215.1-31,245.2-136.4C427.9,353.5,391.8,264.7,320.6,218.6z M212.6,537.4c-21.6,0-42.1-4.6-60.7-12.8c-3.8-1.7-7.5-3.4-11.1-5.4c-2.1-1.2-4.2-2.4-6.3-3.6c-3.5-2.2-7-4.5-10.3-6.9c-6.4-4.7-12.5-9.8-18.1-15.4c-1.9-1.9-3.8-3.9-5.6-6c-2.7-3-5.2-6-7.6-9.2c-0.7-1-1.5-1.9-2.2-2.9c-18-24.8-28.7-55.4-28.7-88.4c0-23.4,5.3-45.5,14.8-65.3c2.1-4.4,4.4-8.7,7-12.8c12.6-20.7,30-38.1,50.7-50.7c4.1-2.5,8.4-4.8,12.8-7c19.8-9.5,41.9-14.8,65.3-14.8c33,0,63.6,10.7,88.4,28.7c1,0.7,2,1.4,2.9,2.2c3.2,2.4,6.2,5,9.2,7.6c2,1.8,4,3.7,6,5.6c5.6,5.6,10.7,11.7,15.4,18.1c2.4,3.3,4.8,6.8,6.9,10.3c1.3,2.1,2.5,4.2,3.6,6.3c2,3.6,3.7,7.3,5.4,11.1c8.2,18.6,12.8,39.1,12.8,60.7C363.2,470,295.8,537.4,212.6,537.4z"
52+
/>
53+
54+
<rect
55+
fill="#212121"
56+
x="210.2"
57+
y="120.9"
58+
width="142.4"
59+
height="38.3"
60+
transform="matrix(0.9617 0.2741 -0.2741 0.9617 49.1726 -71.7866)"
61+
/>
62+
63+
<circle fill="#f95e08" cx="323.5" cy="93.9" r="17.8" />
64+
65+
<circle fill="#f95e08" cx="271.1" cy="65.8" r="10.4" />
66+
67+
<circle fill="#f95e08" cx="327" cy="20.4" r="10.4" />
68+
</svg>
69+
</template>

‎app/components/MobileSidebar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { VisuallyHidden } from "reka-ui"
33
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/sheet"
44
import { ScrollArea } from "@/components/scroll-area"
55
import { Separator } from "@/components/separator"
6-
import { SidebarNavigation } from "@app/components"
6+
import { Logo, SidebarNavigation } from "@app/components"
77
import { navigation } from "@app/router/navigation"
88
99
const open = defineModel<boolean>("open", { default: false })
@@ -18,7 +18,7 @@ function onNavigated() {
1818
<SheetContent side="left" class="w-72 p-0">
1919
<SheetHeader class="px-4 py-4">
2020
<SheetTitle class="flex items-center space-x-2">
21-
<img src="/logo.svg" alt="Coding Labs UI" class="w-6" />
21+
<Logo alt="Coding Labs UI" class="w-6" />
2222

2323
<div class="text-xl font-semibold tracking-tight">GOOEY</div>
2424
</SheetTitle>

‎app/components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,6 @@ export { default as ComponentEvents } from "./ComponentEvents.vue"
33
export { default as ComponentHeading } from "./ComponentHeading.vue"
44
export { default as ComponentProps } from "./ComponentProps.vue"
55
export { default as ComponentSummary } from "./ComponentSummary.vue"
6+
export { default as Logo } from "./Logo.vue"
67
export { default as ShadcnLogo } from "./ShadcnLogo.vue"
78
export { default as SidebarNavigation } from "./SidebarNavigation.vue"

‎app/pages/components/Tip.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { Tip } from "@/components/tooltip"
33
import { ref } from "vue"
44
import { Button } from "@"
5+
import { Logo } from "@app/components"
56
67
const openTooltip = ref(false)
78
</script>
@@ -31,7 +32,7 @@ const openTooltip = ref(false)
3132
<span class="border-b border-dotted border-primary">Tooltip with custom tooltip slot</span>
3233

3334
<template #tooltip>
34-
<img src="/logo.svg" alt="Coding Labs UI" class="w-32" />
35+
<Logo alt="Coding Labs UI" class="w-32" />
3536
</template>
3637
</Tip>
3738
</section>

‎app/pages/demo/CollapsibleTwoColumnLayoutDemo.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import {
2727
import { Switch } from "@/components/switch"
2828
import { Button } from "@/components/button"
2929
import MobileSidebar from "./MobileSidebar.vue"
30+
import { Logo } from "@app/components"
3031
3132
const mode = useColorMode()
3233
const isDark = computed({
@@ -60,7 +61,7 @@ const settingsItems = navItems.filter((item) => item.group === "Settings")
6061
<Header>
6162
<RouterLink to="/" class="hidden lg:block">
6263
<div class="flex items-center space-x-2">
63-
<img src="/logo.svg" alt="Coding Labs UI" class="w-6" />
64+
<Logo alt="Coding Labs UI" class="w-6" />
6465

6566
<div class="text-xl">Brand</div>
6667
</div>

‎app/pages/demo/MobileSidebar.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { Component } from "vue"
33
import { VisuallyHidden } from "reka-ui"
44
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/sheet"
55
import { useCollapsibleSidebar } from "@/components/layout"
6+
import { Logo } from "@app/components"
67
78
defineProps<{
89
activeRoute: string
@@ -31,7 +32,7 @@ function navigate(route: string) {
3132
<SheetContent side="left" class="w-72 p-0">
3233
<SheetHeader class="border-b p-4">
3334
<SheetTitle class="flex items-center space-x-2">
34-
<img src="/logo.svg" alt="Coding Labs UI" class="w-6" />
35+
<Logo alt="Coding Labs UI" class="w-6" />
3536

3637
<span class="text-xl">Brand</span>
3738
</SheetTitle>

‎app/pages/demo/TwoColumnLayoutDemo.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import {
3434
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "@/components/sheet"
3535
import { Switch } from "@/components/switch"
3636
import { Button } from "@/components/button"
37+
import { Logo } from "@app/components"
3738
3839
const mode = useColorMode()
3940
const isDark = computed({
@@ -66,7 +67,7 @@ function setActiveRoute(route: string) {
6667
<Header>
6768
<RouterLink to="/" class="hidden lg:block">
6869
<div class="flex items-center space-x-2">
69-
<img src="/logo.svg" alt="Coding Labs UI" class="w-6" />
70+
<Logo alt="Coding Labs UI" class="w-6" />
7071

7172
<div class="text-xl">Brand</div>
7273
</div>
@@ -97,7 +98,7 @@ function setActiveRoute(route: string) {
9798
<SheetContent side="left" class="w-72 p-0">
9899
<SheetHeader class="border-b p-4">
99100
<SheetTitle class="flex items-center space-x-2">
100-
<img src="/logo.svg" alt="Coding Labs UI" class="w-6" />
101+
<Logo alt="Coding Labs UI" class="w-6" />
101102

102103
<span class="text-xl">Brand</span>
103104
</SheetTitle>

‎public/logo.svg‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

0 commit comments

Comments
 (0)