Merge remote-tracking branch 'origin/main'
This commit is contained in:
marzban-dev
@@ -1,45 +1,42 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
// types
|
||||
type Props = {
|
||||
variant?: "solid" | "secondary" | "outlined" | "ghost"
|
||||
size?: "xl" | "lg" | "md",
|
||||
variant?: "solid" | "secondary" | "outlined" | "ghost";
|
||||
size?: "xl" | "lg" | "md";
|
||||
startIcon?: string;
|
||||
endIcon?: string;
|
||||
}
|
||||
};
|
||||
|
||||
// props
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
variant: "solid",
|
||||
size: "lg"
|
||||
size: "lg",
|
||||
});
|
||||
const { variant, size } = toRefs(props);
|
||||
|
||||
// computed
|
||||
const classes = computed(() => {
|
||||
return [
|
||||
"rounded-full flex items-center justify-center transition-all cursor-pointer",
|
||||
"flex items-center justify-center transition-all cursor-pointer",
|
||||
{
|
||||
"btn-solid": variant.value === "solid",
|
||||
"btn-secondary": variant.value === "secondary",
|
||||
"btn-outlined": variant.value === "outlined",
|
||||
"btn-ghost": variant.value === "ghost"
|
||||
"btn-ghost": variant.value === "ghost",
|
||||
},
|
||||
{
|
||||
"btn-xl": size.value === "xl",
|
||||
"btn-lg": size.value === "lg",
|
||||
"btn-md": size.value === "md"
|
||||
}
|
||||
"btn-md": size.value === "md",
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button :class="classes">
|
||||
<Icon v-if="startIcon" :name="startIcon" class="ms-0" />
|
||||
<Icon v-if="startIcon" :name="startIcon" />
|
||||
<slot />
|
||||
<Icon v-if="endIcon" :name="endIcon" class="me-0" />
|
||||
<Icon v-if="endIcon" :name="endIcon" />
|
||||
</button>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,21 +1,20 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
// types
|
||||
import Tooltip from "~/components/Tooltip.vue";
|
||||
|
||||
type Props = {
|
||||
variant?: "solid" | "outlined",
|
||||
variant?: "solid" | "outlined";
|
||||
startIcon?: string;
|
||||
endIcon?: string;
|
||||
disabled?: boolean;
|
||||
error?: boolean;
|
||||
message?: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
};
|
||||
|
||||
// props
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
variant: "solid"
|
||||
variant: "solid",
|
||||
});
|
||||
const { variant, message, error, disabled } = toRefs(props);
|
||||
|
||||
@@ -30,19 +29,24 @@ const classes = computed(() => {
|
||||
"input-solid": variant.value === "solid",
|
||||
"input-outlined": variant.value === "outlined",
|
||||
"input-effects": !error.value,
|
||||
[variant.value === "solid" ? "input-solid-error" : "input-outlined-error"]: error.value
|
||||
}
|
||||
[variant.value === "solid"
|
||||
? "input-solid-error"
|
||||
: "input-outlined-error"]: error.value,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Tooltip :title="message">
|
||||
<div v-bind="$attrs" :class="classes" @click="inputRef?.focus()">
|
||||
<Icon v-if="startIcon" :name="startIcon" class="ms-0" size="24px" />
|
||||
<input ref="inputRef" class="outline-none" :placeholder="placeholder" />
|
||||
<Icon v-if="endIcon" :name="endIcon" class="me-0" size="24px" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
</template>
|
||||
<div v-bind="$attrs" :class="classes" @click="inputRef?.focus()">
|
||||
<Icon v-if="startIcon" :name="startIcon" class="ms-0" size="24px" />
|
||||
<input
|
||||
ref="inputRef"
|
||||
class="outline-none w-max"
|
||||
:placeholder="placeholder"
|
||||
/>
|
||||
<Icon v-if="endIcon" :name="endIcon" class="me-0" size="24px" />
|
||||
</div>
|
||||
<!-- <Tooltip :title="message" class="w-full">
|
||||
</Tooltip> -->
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,110 @@
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<footer class="w-full bg-black flex-center">
|
||||
<div class="size-full grid grid-cols-2 items-stretch container">
|
||||
<div
|
||||
class="h-full flex flex-col items-start justify-between pe-[5rem] py-[5rem]"
|
||||
>
|
||||
<div class="flex flex-col items-start gap-[1.5rem] w-full">
|
||||
<span class="text-white typo-sub-h-xl"
|
||||
>Subscribe to our newsletter
|
||||
</span>
|
||||
<div class="flex flex-col items-start gap-[.75rem] w-full">
|
||||
<div
|
||||
class="flex items-center justify-start gap-[.5rem] w-full"
|
||||
>
|
||||
<Input
|
||||
placeholder="Enter your email"
|
||||
class="bg-slate-950 border-slate-800 hover:border-slate-800 w-8/12"
|
||||
/>
|
||||
<Button
|
||||
class="invert rounded-100 size-[3.5rem] !**:stroke-black"
|
||||
end-icon="ci:arrow-right"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-slate-400 typo-p-sm">
|
||||
By subscribing, you agree to our responsible data
|
||||
use
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="text-white typo-label-sm">
|
||||
© 2024 Nova - Tech Store. Powered by Capricorn Engineering
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex flex-col items-start ps-[5rem] py-[5rem] gap-[6.875rem]"
|
||||
>
|
||||
<div class="w-full flex items-start gap-[3rem]">
|
||||
<div class="flex flex-col gap-[.75rem] text-white w-full">
|
||||
<NuxtLink to="#" class="typo-h-5"> About </NuxtLink>
|
||||
<NuxtLink to="#" class="typo-h-5"> Journal </NuxtLink>
|
||||
<NuxtLink to="#" class="typo-h-5"> FAQs </NuxtLink>
|
||||
<NuxtLink to="#" class="typo-h-5">
|
||||
Contact us
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-col gap-[.75rem] text-slate-400 w-full"
|
||||
>
|
||||
<NuxtLink to="#" class="typo-label-md">
|
||||
Headphones
|
||||
</NuxtLink>
|
||||
<NuxtLink to="#" class="typo-label-md">
|
||||
Speakers
|
||||
</NuxtLink>
|
||||
<NuxtLink to="#" class="typo-label-md">
|
||||
Charging stations
|
||||
</NuxtLink>
|
||||
<NuxtLink to="#" class="typo-label-md">
|
||||
Lanterns
|
||||
</NuxtLink>
|
||||
<NuxtLink to="#" class="typo-label-md">
|
||||
Portable charger
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex items-center justify-between text-white w-full"
|
||||
>
|
||||
<span class="typo-label-sm">Privacy Policy</span>
|
||||
<div class="flex items-center gap-[1rem]">
|
||||
<NuxtLink to="#" class="flex-center size-[1.5rem]">
|
||||
<Icon
|
||||
name="ci:instagram"
|
||||
class="**:fill-white"
|
||||
size="24"
|
||||
/>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="#" class="flex-center size-[1.5rem]">
|
||||
<Icon
|
||||
name="ci:facebook"
|
||||
class="**:fill-white **:stroke-white"
|
||||
size="20"
|
||||
/>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="#" class="flex-center size-[1.5rem]">
|
||||
<Icon
|
||||
name="ci:tiktok"
|
||||
class="**:fill-white **:stroke-white"
|
||||
size="20"
|
||||
/>
|
||||
</NuxtLink>
|
||||
<NuxtLink to="#" class="flex-center size-[1.5rem]">
|
||||
<Icon
|
||||
name="ci:youtube"
|
||||
class="**:fill-white"
|
||||
size="24"
|
||||
/>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,11 +1,71 @@
|
||||
<script setup></script>
|
||||
<script setup lang="ts">
|
||||
// types
|
||||
|
||||
type NavLink = {
|
||||
title: string;
|
||||
path: string;
|
||||
};
|
||||
|
||||
// state
|
||||
|
||||
const nav_links = ref<NavLink[]>([
|
||||
{
|
||||
title: "Shop",
|
||||
path: "#",
|
||||
},
|
||||
{
|
||||
title: "Collections",
|
||||
path: "#",
|
||||
},
|
||||
{
|
||||
title: "Explore",
|
||||
path: "#",
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
path: "#",
|
||||
},
|
||||
{
|
||||
title: "Theme features",
|
||||
path: "#",
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full flex items-center justify-between bg-white">
|
||||
<div class="w-3/12 flex items-center justify-start">
|
||||
<span class="size-[2rem] bg-black rounded-full"></span>
|
||||
<header class="w-full bg-white flex-center">
|
||||
<div
|
||||
class="w-full flex items-center justify-between container py-[2.25rem]"
|
||||
>
|
||||
<div class="w-2/12 flex items-center justify-start">
|
||||
<span class="size-[2rem] bg-black rounded-full"></span>
|
||||
</div>
|
||||
|
||||
<nav
|
||||
class="flex-center gap-[2.5rem] w-8/12 typo-label-sm text-slate-500"
|
||||
>
|
||||
<NuxtLink
|
||||
v-for="(link, index) in nav_links"
|
||||
:key="index"
|
||||
:to="link.path"
|
||||
>
|
||||
{{ link.title }}
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
|
||||
<div class="w-2/12 flex items-center justify-end gap-[1.5rem]">
|
||||
<button class="size-[1.5rem] flex-center">
|
||||
<Icon name="ci:search" class="**:stroke-black" />
|
||||
</button>
|
||||
<button class="size-[1.5rem] flex-center">
|
||||
<Icon name="ci:profile" class="**:stroke-black" />
|
||||
</button>
|
||||
<button class="size-[1.5rem] flex-center">
|
||||
<Icon name="ci:cart" class="**:stroke-black" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
Reference in New Issue
Block a user