first init
This commit is contained in:
ISMAIL MASSERAN
@@ -0,0 +1,15 @@
|
||||
import { clsx, type ClassValue } from 'clsx'
|
||||
import { extendTailwindMerge } from 'tailwind-merge'
|
||||
|
||||
const twMerge = extendTailwindMerge({
|
||||
extend: {
|
||||
classGroups: {
|
||||
'bg-color': ['bg-background', 'bg-foreground'],
|
||||
'bg-image': ['bg-gradient-to-b'],
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs))
|
||||
}
|
||||
@@ -0,0 +1,407 @@
|
||||
import _ from 'lodash'
|
||||
import dayjs from 'dayjs'
|
||||
|
||||
interface Users {
|
||||
name: string
|
||||
gender: string
|
||||
email: string
|
||||
}
|
||||
|
||||
interface Products {
|
||||
name: string
|
||||
category: string
|
||||
}
|
||||
|
||||
interface Categories {
|
||||
name: string
|
||||
tags: string
|
||||
slug: string
|
||||
}
|
||||
|
||||
interface News {
|
||||
title: string
|
||||
superShortContent: string
|
||||
shortContent: string
|
||||
content: string
|
||||
}
|
||||
|
||||
interface Files {
|
||||
fileName: string
|
||||
type: string
|
||||
size: string
|
||||
}
|
||||
|
||||
interface Foods {
|
||||
name: string
|
||||
image: string
|
||||
}
|
||||
|
||||
const imageAssets = import.meta.glob<{
|
||||
default: string
|
||||
}>('/src/assets/images/fakers/*.{jpg,jpeg,png,svg}', { eager: true })
|
||||
|
||||
const fakers = {
|
||||
fakeUsers() {
|
||||
const users: Array<Omit<Users, 'email'>> = [
|
||||
{ name: 'Johnny Depp', gender: 'male' },
|
||||
{ name: 'Al Pacino', gender: 'male' },
|
||||
{ name: 'Robert De Niro', gender: 'male' },
|
||||
{ name: 'Kevin Spacey', gender: 'male' },
|
||||
{ name: 'Denzel Washington', gender: 'male' },
|
||||
{ name: 'Russell Crowe', gender: 'male' },
|
||||
{ name: 'Brad Pitt', gender: 'male' },
|
||||
{ name: 'Angelina Jolie', gender: 'female' },
|
||||
{ name: 'Leonardo DiCaprio', gender: 'male' },
|
||||
{ name: 'Tom Cruise', gender: 'male' },
|
||||
{ name: 'John Travolta', gender: 'male' },
|
||||
{ name: 'Brendan Fraser', gender: 'male' },
|
||||
{ name: 'Sylvester Stallone', gender: 'male' },
|
||||
{ name: 'Kate Winslet', gender: 'female' },
|
||||
{ name: 'Christian Bale', gender: 'male' },
|
||||
{ name: 'Morgan Freeman', gender: 'male' },
|
||||
{ name: 'Keanu Reeves', gender: 'male' },
|
||||
{ name: 'Nicolas Cage', gender: 'male' },
|
||||
{ name: 'Hugh Jackman', gender: 'male' },
|
||||
{ name: 'Edward Norton', gender: 'male' },
|
||||
{ name: 'Bruce Willis', gender: 'male' },
|
||||
{ name: 'Tom Hanks', gender: 'male' },
|
||||
{ name: 'Charlize Theron', gender: 'female' },
|
||||
{ name: 'Will Smith', gender: 'male' },
|
||||
{ name: 'Sean Connery', gender: 'male' },
|
||||
{ name: 'Keira Knightley', gender: 'female' },
|
||||
{ name: 'Vin Diesel', gender: 'male' },
|
||||
{ name: 'Matt Damon', gender: 'male' },
|
||||
{ name: 'Richard Gere', gender: 'male' },
|
||||
{ name: 'Chris Evans', gender: 'female' },
|
||||
]
|
||||
|
||||
return _.sampleSize(users, 3).map((user) => {
|
||||
return {
|
||||
name: user.name,
|
||||
gender: user.gender,
|
||||
email: _.toLower(_.replace(user.name, / /g, '') + '@left4code.com'),
|
||||
}
|
||||
})
|
||||
},
|
||||
fakePhotos() {
|
||||
const photos = []
|
||||
for (let i = 0; i < 15; i++) {
|
||||
photos[photos.length] =
|
||||
imageAssets['/src/assets/images/fakers/profile-' + _.random(1, 15) + '.jpg']!.default
|
||||
}
|
||||
return _.sampleSize(photos, 10)
|
||||
},
|
||||
fakeImages() {
|
||||
const images = []
|
||||
for (let i = 0; i < 15; i++) {
|
||||
images[images.length] =
|
||||
imageAssets['/src/assets/images/fakers/preview-' + _.random(1, 15) + '.jpg']!.default
|
||||
}
|
||||
return _.sampleSize(images, 10)
|
||||
},
|
||||
fakeDates() {
|
||||
const dates = []
|
||||
for (let i = 0; i < 5; i++) {
|
||||
dates[dates.length] = dayjs
|
||||
.unix(_.random(1586584776897, 1672333200000) / 1000)
|
||||
.format('DD MMMM YYYY')
|
||||
}
|
||||
return _.sampleSize(dates, 3)
|
||||
},
|
||||
fakeTimes() {
|
||||
const times = ['01:10 PM', '05:09 AM', '06:05 AM', '03:20 PM', '04:50 AM', '07:00 PM']
|
||||
return _.sampleSize(times, 3)
|
||||
},
|
||||
fakeFormattedTimes() {
|
||||
const times = [
|
||||
_.random(10, 60) + ' seconds ago',
|
||||
_.random(10, 60) + ' minutes ago',
|
||||
_.random(10, 24) + ' hours ago',
|
||||
_.random(10, 20) + ' days ago',
|
||||
_.random(10, 12) + ' months ago',
|
||||
]
|
||||
return _.sampleSize(times, 3)
|
||||
},
|
||||
fakeTotals() {
|
||||
return _.shuffle([_.random(20, 220), _.random(20, 120), _.random(20, 50)])
|
||||
},
|
||||
fakeTrueFalse() {
|
||||
return _.sampleSize([false, true, true], 1)
|
||||
},
|
||||
fakeStocks() {
|
||||
return _.shuffle([_.random(50, 220), _.random(50, 120), _.random(50, 50)])
|
||||
},
|
||||
fakeProducts() {
|
||||
const products = [
|
||||
{ name: 'Dell XPS 13', category: 'PC & Laptop' },
|
||||
{ name: 'Apple MacBook Pro 13', category: 'PC & Laptop' },
|
||||
{ name: 'Oppo Find X2 Pro', category: 'Smartphone & Tablet' },
|
||||
{ name: 'Samsung Galaxy S20 Ultra', category: 'Smartphone & Tablet' },
|
||||
{ name: 'Sony Master Series A9G', category: 'Electronic' },
|
||||
{ name: 'Samsung Q90 QLED TV', category: 'Electronic' },
|
||||
{ name: 'Nike Air Max 270', category: 'Sport & Outdoor' },
|
||||
{ name: 'Nike Tanjun', category: 'Sport & Outdoor' },
|
||||
{ name: 'Nikon Z6', category: 'Photography' },
|
||||
{ name: 'Sony A7 III', category: 'Photography' },
|
||||
]
|
||||
return _.shuffle(products)
|
||||
},
|
||||
fakeCategories() {
|
||||
const categories = [
|
||||
{ name: 'PC & Laptop', tags: 'Apple, Asus, Lenovo, Dell, Acer' },
|
||||
{
|
||||
name: 'Smartphone & Tablet',
|
||||
tags: 'Samsung, Apple, Huawei, Nokia, Sony',
|
||||
},
|
||||
{ name: 'Electronic', tags: 'Sony, LG, Toshiba, Hisense, Vizio' },
|
||||
{
|
||||
name: 'Home Appliance',
|
||||
tags: 'Whirlpool, Amana, LG, Frigidaire, Samsung',
|
||||
},
|
||||
{ name: 'Photography', tags: 'Canon, Nikon, Sony, Fujifilm, Panasonic' },
|
||||
{ name: 'Fashion & Make Up', tags: 'Nike, Adidas, Zara, H&M, Levi’s' },
|
||||
{
|
||||
name: 'Kids & Baby',
|
||||
tags: 'Mothercare, Gini & Jony, H&M, Babyhug, Liliput',
|
||||
},
|
||||
{ name: 'Hobby', tags: 'Bandai, Atomik R/C, Atlantis Models, Carisma' },
|
||||
{
|
||||
name: 'Sport & Outdoor',
|
||||
tags: 'Nike, Adidas, Puma, Rebook, Under Armour',
|
||||
},
|
||||
]
|
||||
|
||||
return _.sampleSize(categories, 3).map((category) => {
|
||||
return {
|
||||
name: category.name,
|
||||
tags: category.tags,
|
||||
slug: _.replace(_.replace(_.toLower(category.name), / /g, '-'), '&', 'and'),
|
||||
}
|
||||
})
|
||||
},
|
||||
fakeNews() {
|
||||
const news = [
|
||||
{
|
||||
title: 'Desktop publishing software like Aldus PageMaker',
|
||||
superShortContent: _.truncate(
|
||||
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
|
||||
{
|
||||
length: 30,
|
||||
omission: '',
|
||||
},
|
||||
),
|
||||
shortContent: _.truncate(
|
||||
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
|
||||
{
|
||||
length: 150,
|
||||
omission: '',
|
||||
},
|
||||
),
|
||||
content:
|
||||
"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
|
||||
},
|
||||
{
|
||||
title: 'Dummy text of the printing and typesetting industry',
|
||||
superShortContent: _.truncate(
|
||||
"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
|
||||
{
|
||||
length: 30,
|
||||
omission: '',
|
||||
},
|
||||
),
|
||||
shortContent: _.truncate(
|
||||
"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
|
||||
{
|
||||
length: 150,
|
||||
omission: '',
|
||||
},
|
||||
),
|
||||
content:
|
||||
"It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).",
|
||||
},
|
||||
{
|
||||
title: 'Popularised in the 1960s with the release of Letraset',
|
||||
superShortContent: _.truncate(
|
||||
'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.',
|
||||
{
|
||||
length: 30,
|
||||
omission: '',
|
||||
},
|
||||
),
|
||||
shortContent: _.truncate(
|
||||
'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.',
|
||||
{
|
||||
length: 150,
|
||||
omission: '',
|
||||
},
|
||||
),
|
||||
content:
|
||||
'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32. The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.',
|
||||
},
|
||||
{
|
||||
title: '200 Latin words, combined with a handful of model sentences',
|
||||
superShortContent: _.truncate(
|
||||
"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.",
|
||||
{
|
||||
length: 50,
|
||||
omission: '',
|
||||
},
|
||||
),
|
||||
shortContent: _.truncate(
|
||||
"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.",
|
||||
{
|
||||
length: 150,
|
||||
omission: '',
|
||||
},
|
||||
),
|
||||
content:
|
||||
"There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.",
|
||||
},
|
||||
]
|
||||
return _.shuffle(news)
|
||||
},
|
||||
fakeFiles() {
|
||||
const files = [
|
||||
{ fileName: 'Celine Dion - Ashes.mp4', type: 'MP4', size: '20 MB' },
|
||||
{ fileName: 'Laravel 7', type: 'Empty Folder', size: '120 MB' },
|
||||
{ fileName: fakers.fakeImages()[0]!, type: 'Image', size: '1.2 MB' },
|
||||
{ fileName: 'Repository', type: 'Folder', size: '20 KB' },
|
||||
{ fileName: 'Resources.txt', type: 'TXT', size: '2.2 MB' },
|
||||
{ fileName: 'Routes.php', type: 'PHP', size: '1 KB' },
|
||||
{ fileName: 'Dota 2', type: 'Folder', size: '112 GB' },
|
||||
{ fileName: 'Documentation', type: 'Empty Folder', size: '4 MB' },
|
||||
{ fileName: fakers.fakeImages()[0]!, type: 'Image', size: '1.4 MB' },
|
||||
{ fileName: fakers.fakeImages()[0]!, type: 'Image', size: '1 MB' },
|
||||
]
|
||||
return _.shuffle(files)
|
||||
},
|
||||
fakeJobs() {
|
||||
const jobs = ['Frontend Engineer', 'Software Engineer', 'Backend Engineer', 'DevOps Engineer']
|
||||
return _.shuffle(jobs)
|
||||
},
|
||||
fakeNotificationCount() {
|
||||
return _.random(1, 7)
|
||||
},
|
||||
fakeFoods() {
|
||||
const foods = [
|
||||
{
|
||||
name: 'Vanilla Latte',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-1.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Milkshake',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-2.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Soft Drink',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-3.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Root Beer',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-4.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Pocari',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-5.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Ultimate Burger',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-6.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Hotdog',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-7.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Avocado Burger',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-8.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Spaghetti Fettucine Aglio with Beef Bacon',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-9.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Spaghetti Fettucine Aglio with Smoked Salmon',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-10.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Curry Penne and Cheese',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-11.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'French Fries',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-12.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Virginia Cheese Fries',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-13.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Virginia Cheese Wedges',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-14.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Fried/Grilled Banana',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-15.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Crispy Mushroom',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-16.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Fried Calamari',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-17.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Chicken Wings',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-18.jpg']!.default,
|
||||
},
|
||||
{
|
||||
name: 'Snack Platter',
|
||||
image: imageAssets['/src/assets/images/fakers/food-beverage-19.jpg']!.default,
|
||||
},
|
||||
]
|
||||
return _.shuffle(foods)
|
||||
},
|
||||
}
|
||||
|
||||
const fakerData: Array<{
|
||||
users: Users[]
|
||||
photos: string[]
|
||||
images: string[]
|
||||
dates: string[]
|
||||
times: string[]
|
||||
formattedTimes: string[]
|
||||
totals: number[]
|
||||
trueFalse: boolean[]
|
||||
stocks: number[]
|
||||
products: Products[]
|
||||
categories: Categories[]
|
||||
news: News[]
|
||||
files: Files[]
|
||||
jobs: string[]
|
||||
notificationCount: number
|
||||
foods: Foods[]
|
||||
}> = []
|
||||
for (let i = 0; i < 20; i++) {
|
||||
fakerData[fakerData.length] = {
|
||||
users: fakers.fakeUsers(),
|
||||
photos: fakers.fakePhotos(),
|
||||
images: fakers.fakeImages(),
|
||||
dates: fakers.fakeDates(),
|
||||
times: fakers.fakeTimes(),
|
||||
formattedTimes: fakers.fakeFormattedTimes(),
|
||||
totals: fakers.fakeTotals(),
|
||||
trueFalse: fakers.fakeTrueFalse(),
|
||||
stocks: fakers.fakeStocks(),
|
||||
products: fakers.fakeProducts(),
|
||||
categories: fakers.fakeCategories(),
|
||||
news: fakers.fakeNews(),
|
||||
files: fakers.fakeFiles(),
|
||||
jobs: fakers.fakeJobs(),
|
||||
notificationCount: fakers.fakeNotificationCount(),
|
||||
foods: fakers.fakeFoods(),
|
||||
}
|
||||
}
|
||||
|
||||
export default fakerData
|
||||
@@ -0,0 +1,325 @@
|
||||
export type Paths = {
|
||||
name?: string;
|
||||
show?: boolean;
|
||||
style: {
|
||||
strokeWidth: string;
|
||||
stroke: string;
|
||||
fill: string;
|
||||
};
|
||||
path: (["M", string, string] | ["L", string, string])[];
|
||||
}[];
|
||||
|
||||
/**
|
||||
* Evaluates a string expression containing percentages or calculations.
|
||||
*
|
||||
* @param expr - The string expression to evaluate.
|
||||
* @returns The numeric result of the evaluated expression, or 0 if invalid.
|
||||
*/
|
||||
function evalExpression({
|
||||
expr,
|
||||
width,
|
||||
height,
|
||||
}: {
|
||||
expr: string;
|
||||
width: number;
|
||||
height: number;
|
||||
}) {
|
||||
const replaced = expr
|
||||
.replace(/([\d.]+)%/g, (_, num) => {
|
||||
const val = parseFloat(num);
|
||||
return `(${val} / 100)`;
|
||||
})
|
||||
.replace(/width/g, width.toString())
|
||||
.replace(/height/g, height.toString())
|
||||
.replace(/100/g, "100");
|
||||
|
||||
try {
|
||||
return Function(`"use strict"; return (${replaced});`)();
|
||||
} catch {
|
||||
return 0;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates SVG path data based on provided Paths definitions and dimensions.
|
||||
*
|
||||
* @param params - Object containing paths array, width, and height.
|
||||
* @returns An array of updated Paths with parsed coordinates.
|
||||
*/
|
||||
function createSvgPaths({
|
||||
paths,
|
||||
width,
|
||||
height,
|
||||
}: {
|
||||
paths: Paths;
|
||||
width: number;
|
||||
height: number;
|
||||
}) {
|
||||
return paths.map((path) => {
|
||||
return {
|
||||
...path,
|
||||
path: path.path
|
||||
.map(([cmd, x, y]) => {
|
||||
const parsedX =
|
||||
x.includes("%") || x.match(/[+\-*/]/)
|
||||
? evalExpression({
|
||||
expr: x.replace(/%/g, "* width / 100"),
|
||||
width,
|
||||
height,
|
||||
})
|
||||
: x;
|
||||
const parsedY =
|
||||
y.includes("%") || y.match(/[+\-*/]/)
|
||||
? evalExpression({
|
||||
expr: y.replace(/%/g, "* height / 100"),
|
||||
width,
|
||||
height,
|
||||
})
|
||||
: y;
|
||||
|
||||
const numX =
|
||||
typeof parsedX === "string" ? parseFloat(parsedX) : parsedX;
|
||||
const numY =
|
||||
typeof parsedY === "string" ? parseFloat(parsedY) : parsedY;
|
||||
|
||||
return `${cmd} ${parseInt(numX)},${parseInt(numY)}`;
|
||||
})
|
||||
.join(" "),
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Recursively finds the closest parent element with `position: relative`.
|
||||
*
|
||||
* @param element - The starting HTMLElement.
|
||||
* @returns The found parent HTMLElement or null if not found.
|
||||
*/
|
||||
function findRelativeParent(
|
||||
element: HTMLElement | SVGSVGElement | null
|
||||
): HTMLElement | null {
|
||||
if (!element || !element.parentElement) return null;
|
||||
|
||||
const parent = element.parentElement;
|
||||
const animationName = window.getComputedStyle(parent).animationName;
|
||||
const transitionProperty = window.getComputedStyle(parent).transitionProperty;
|
||||
|
||||
if (
|
||||
animationName !== "none" ||
|
||||
(transitionProperty !== "all" && transitionProperty !== "none")
|
||||
) {
|
||||
return parent;
|
||||
}
|
||||
|
||||
return findRelativeParent(parent);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates and appends SVG <path> elements to the provided SVG element based on Paths data.
|
||||
*
|
||||
* @param params - Object containing target SVG element, Paths data, width, and height.
|
||||
*/
|
||||
function createSvgElement({
|
||||
el,
|
||||
paths,
|
||||
width,
|
||||
height,
|
||||
enableBackdropBlur,
|
||||
enableViewBox,
|
||||
}: {
|
||||
el: SVGSVGElement;
|
||||
paths: Paths;
|
||||
width: number;
|
||||
height: number;
|
||||
enableBackdropBlur: boolean;
|
||||
enableViewBox: boolean;
|
||||
}) {
|
||||
const prevWidth = el.getAttribute("data-width");
|
||||
const prevHeight = el.getAttribute("data-height");
|
||||
|
||||
if (prevWidth != width.toString() || prevHeight != height.toString()) {
|
||||
el.setAttribute("data-width", width.toString());
|
||||
el.setAttribute("data-height", height.toString());
|
||||
|
||||
// Clear previous paths
|
||||
el.querySelectorAll("path").forEach((path) => path.remove());
|
||||
|
||||
// Enable viewbox
|
||||
if (enableViewBox) {
|
||||
el.setAttribute("viewBox", `0 0 ${width} ${height}`);
|
||||
}
|
||||
|
||||
// Create new paths
|
||||
createSvgPaths({
|
||||
paths,
|
||||
width,
|
||||
height,
|
||||
}).map((p) => {
|
||||
const pathElement = document.createElementNS(
|
||||
"http://www.w3.org/2000/svg",
|
||||
"path"
|
||||
);
|
||||
|
||||
pathElement.setAttribute("d", p.path);
|
||||
pathElement.style.fill = p.style.fill;
|
||||
pathElement.style.stroke = p.style.stroke;
|
||||
pathElement.style.strokeWidth = p.style.strokeWidth;
|
||||
pathElement.style.vectorEffect = "non-scaling-stroke";
|
||||
pathElement.style.shapeRendering = "geometricPrecision";
|
||||
|
||||
el && el.appendChild(pathElement);
|
||||
});
|
||||
|
||||
// Backdrop blur masking
|
||||
if (enableBackdropBlur) {
|
||||
const serializer = new XMLSerializer();
|
||||
const svgString = serializer.serializeToString(el);
|
||||
const encoded = encodeURIComponent(svgString);
|
||||
const dataUri = `data:image/svg+xml,${encoded}`;
|
||||
|
||||
let divMask = document.createElement("div");
|
||||
|
||||
if (
|
||||
el.nextElementSibling?.hasAttribute("data-backdrop") &&
|
||||
el.nextElementSibling instanceof HTMLDivElement
|
||||
) {
|
||||
divMask = el.nextElementSibling;
|
||||
} else {
|
||||
divMask.style.opacity = "0";
|
||||
}
|
||||
|
||||
divMask.style.willChange = "backdrop-blur";
|
||||
divMask.style.transition = "opacity 0.8s ease";
|
||||
divMask.style.maskImage = `url("${dataUri}")`;
|
||||
divMask.style.maskRepeat = "no-repeat";
|
||||
divMask.style.maskSize = "contain";
|
||||
divMask.style.zIndex = "-1";
|
||||
divMask.style.backdropFilter = "blur(10px)";
|
||||
divMask.setAttribute("data-backdrop", "true");
|
||||
divMask.setAttribute("class", el.getAttribute("class") ?? "");
|
||||
el.parentNode?.insertBefore(divMask, el.nextSibling);
|
||||
|
||||
setTimeout(() => {
|
||||
divMask.style.opacity = "1";
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets up the SVG renderer: initializes ResizeObserver, transition & animation listeners,
|
||||
* and renders SVG paths based on parent size changes.
|
||||
*
|
||||
* @param params - Object containing the target SVG element and Paths data.
|
||||
* @returns An object with `destroy` function to clean up observers.
|
||||
*/
|
||||
function setupSvgRenderer({
|
||||
el,
|
||||
paths,
|
||||
enableBackdropBlur = false,
|
||||
enableViewBox = false,
|
||||
}: {
|
||||
el: SVGSVGElement & {
|
||||
render?: () => void;
|
||||
};
|
||||
paths: Paths;
|
||||
enableBackdropBlur?: boolean;
|
||||
enableViewBox?: boolean;
|
||||
}) {
|
||||
const parentElement = findRelativeParent(el) ?? el;
|
||||
const parentWidth = () =>
|
||||
parentElement?.getBoundingClientRect().width.toString();
|
||||
const parentHeight = () =>
|
||||
parentElement?.getBoundingClientRect().height.toString();
|
||||
|
||||
const render = () => {
|
||||
const width = el.getBoundingClientRect().width;
|
||||
const height = el.getBoundingClientRect().height;
|
||||
|
||||
createSvgElement({
|
||||
el,
|
||||
paths,
|
||||
width,
|
||||
height,
|
||||
enableBackdropBlur,
|
||||
enableViewBox,
|
||||
});
|
||||
};
|
||||
|
||||
el.render = render;
|
||||
|
||||
// Initialize ResizeObserver to re-render on size changes
|
||||
const observer = new ResizeObserver((entries) => {
|
||||
for (let entry of entries) {
|
||||
entry;
|
||||
render();
|
||||
}
|
||||
});
|
||||
|
||||
observer.observe(el);
|
||||
|
||||
// Handle transitionstart → re-render until transition ends
|
||||
parentElement.addEventListener("transitionstart", () => {
|
||||
console.log("run");
|
||||
let running = true;
|
||||
|
||||
function loop() {
|
||||
if (!running) return;
|
||||
render();
|
||||
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
loop();
|
||||
|
||||
parentElement.addEventListener(
|
||||
"transitionend",
|
||||
() => {
|
||||
if (
|
||||
parentWidth().toString() == el.getAttribute("data-width") &&
|
||||
parentHeight().toString() == el.getAttribute("data-height")
|
||||
) {
|
||||
running = false;
|
||||
console.log("stop");
|
||||
}
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
});
|
||||
|
||||
// Handle animationstart → re-render until animation ends
|
||||
parentElement.addEventListener("animationstart", () => {
|
||||
let running = true;
|
||||
|
||||
function loop() {
|
||||
if (!running) return;
|
||||
render();
|
||||
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
|
||||
loop();
|
||||
|
||||
parentElement.addEventListener(
|
||||
"animationend",
|
||||
() => {
|
||||
if (
|
||||
parentWidth().toString() == el.getAttribute("data-width") &&
|
||||
parentHeight().toString() == el.getAttribute("data-height")
|
||||
) {
|
||||
running = false;
|
||||
}
|
||||
},
|
||||
{ once: true }
|
||||
);
|
||||
});
|
||||
|
||||
return {
|
||||
/**
|
||||
* Disconnects the ResizeObserver and cleans up listeners.
|
||||
*/
|
||||
destroy: () => observer.disconnect(),
|
||||
};
|
||||
}
|
||||
|
||||
export { setupSvgRenderer };
|
||||
@@ -0,0 +1,201 @@
|
||||
import dayjs from 'dayjs'
|
||||
import duration from 'dayjs/plugin/duration'
|
||||
|
||||
dayjs.extend(duration)
|
||||
|
||||
const cutText = (text: string, length: number) => {
|
||||
if (text.split(' ').length > 1) {
|
||||
const string = text.substring(0, length)
|
||||
const splitText = string.split(' ')
|
||||
splitText.pop()
|
||||
return splitText.join(' ') + '...'
|
||||
} else {
|
||||
return text
|
||||
}
|
||||
}
|
||||
|
||||
const formatDate = (date: string, format: string) => {
|
||||
return dayjs(date).format(format)
|
||||
}
|
||||
|
||||
const capitalizeFirstLetter = (string: string) => {
|
||||
if (string) {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1)
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const onlyNumber = (string: string) => {
|
||||
if (string) {
|
||||
return string.replace(/\D/g, '')
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const formatCurrency = (number: number) => {
|
||||
if (number) {
|
||||
const formattedNumber = number.toString().replace(/\D/g, '')
|
||||
const rest = formattedNumber.length % 3
|
||||
let currency = formattedNumber.substr(0, rest)
|
||||
const thousand = formattedNumber.substr(rest).match(/\d{3}/g)
|
||||
let separator
|
||||
|
||||
if (thousand) {
|
||||
separator = rest ? '.' : ''
|
||||
currency += separator + thousand.join('.')
|
||||
}
|
||||
|
||||
return currency
|
||||
} else {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const timeAgo = (time: string) => {
|
||||
const date = new Date((time || '').replace(/-/g, '/').replace(/[TZ]/g, ' '))
|
||||
const diff = (new Date().getTime() - date.getTime()) / 1000
|
||||
const dayDiff = Math.floor(diff / 86400)
|
||||
|
||||
if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 31) {
|
||||
return dayjs(time).format('MMMM DD, YYYY')
|
||||
}
|
||||
|
||||
return (
|
||||
(dayDiff === 0 &&
|
||||
((diff < 60 && 'just now') ||
|
||||
(diff < 120 && '1 minute ago') ||
|
||||
(diff < 3600 && Math.floor(diff / 60) + ' minutes ago') ||
|
||||
(diff < 7200 && '1 hour ago') ||
|
||||
(diff < 86400 && Math.floor(diff / 3600) + ' hours ago'))) ||
|
||||
(dayDiff === 1 && 'Yesterday') ||
|
||||
(dayDiff < 7 && dayDiff + ' days ago') ||
|
||||
(dayDiff < 31 && Math.ceil(dayDiff / 7) + ' weeks ago')
|
||||
)
|
||||
}
|
||||
|
||||
const diffTimeByNow = (time: string) => {
|
||||
const startDate = dayjs(dayjs().format('YYYY-MM-DD HH:mm:ss').toString())
|
||||
const endDate = dayjs(dayjs(time).format('YYYY-MM-DD HH:mm:ss').toString())
|
||||
|
||||
const duration = dayjs.duration(endDate.diff(startDate))
|
||||
const milliseconds = Math.floor(duration.asMilliseconds())
|
||||
|
||||
const days = Math.round(milliseconds / 86400000)
|
||||
const hours = Math.round((milliseconds % 86400000) / 3600000)
|
||||
let minutes = Math.round(((milliseconds % 86400000) % 3600000) / 60000)
|
||||
const seconds = Math.round((((milliseconds % 86400000) % 3600000) % 60000) / 1000)
|
||||
|
||||
if (seconds < 30 && seconds >= 0) {
|
||||
minutes += 1
|
||||
}
|
||||
|
||||
return {
|
||||
days: days.toString().length < 2 ? '0' + days : days,
|
||||
hours: hours.toString().length < 2 ? '0' + hours : hours,
|
||||
minutes: minutes.toString().length < 2 ? '0' + minutes : minutes,
|
||||
seconds: seconds.toString().length < 2 ? '0' + seconds : seconds,
|
||||
}
|
||||
}
|
||||
|
||||
const isset = (obj: object | string) => {
|
||||
if (obj !== null && obj !== undefined) {
|
||||
if (typeof obj === 'object' || Array.isArray(obj)) {
|
||||
return Object.keys(obj).length
|
||||
} else {
|
||||
return obj.toString().length
|
||||
}
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const toRaw = (obj: object) => {
|
||||
return JSON.parse(JSON.stringify(obj))
|
||||
}
|
||||
|
||||
const randomNumbers = (from: number, to: number, length: number) => {
|
||||
const numbers = [0]
|
||||
for (let i = 1; i < length; i++) {
|
||||
numbers.push(Math.ceil(Math.random() * (from - to) + to))
|
||||
}
|
||||
|
||||
return numbers
|
||||
}
|
||||
|
||||
const stringToHTML = (arg: string) => {
|
||||
const parser = new DOMParser(),
|
||||
DOM = parser.parseFromString(arg, 'text/html')
|
||||
return DOM.body.childNodes[0] as HTMLElement
|
||||
}
|
||||
|
||||
const slideUp = (el: HTMLElement, duration = 300, callback = (el: HTMLElement) => {}) => {
|
||||
el.style.transitionProperty = 'height, margin, padding'
|
||||
el.style.transitionDuration = duration + 'ms'
|
||||
el.style.height = el.offsetHeight + 'px'
|
||||
el.offsetHeight
|
||||
el.style.overflow = 'hidden'
|
||||
el.style.height = '0'
|
||||
el.style.paddingTop = '0'
|
||||
el.style.paddingBottom = '0'
|
||||
el.style.marginTop = '0'
|
||||
el.style.marginBottom = '0'
|
||||
window.setTimeout(() => {
|
||||
el.style.display = 'none'
|
||||
el.style.removeProperty('height')
|
||||
el.style.removeProperty('padding-top')
|
||||
el.style.removeProperty('padding-bottom')
|
||||
el.style.removeProperty('margin-top')
|
||||
el.style.removeProperty('margin-bottom')
|
||||
el.style.removeProperty('overflow')
|
||||
el.style.removeProperty('transition-duration')
|
||||
el.style.removeProperty('transition-property')
|
||||
callback(el)
|
||||
}, duration)
|
||||
}
|
||||
|
||||
const slideDown = (el: HTMLElement, duration = 300, callback = (el: HTMLElement) => {}) => {
|
||||
el.style.removeProperty('display')
|
||||
let display = window.getComputedStyle(el).display
|
||||
if (display === 'none') display = 'block'
|
||||
el.style.display = display
|
||||
let height = el.offsetHeight
|
||||
el.style.overflow = 'hidden'
|
||||
el.style.height = '0'
|
||||
el.style.paddingTop = '0'
|
||||
el.style.paddingBottom = '0'
|
||||
el.style.marginTop = '0'
|
||||
el.style.marginBottom = '0'
|
||||
el.offsetHeight
|
||||
el.style.transitionProperty = 'height, margin, padding'
|
||||
el.style.transitionDuration = duration + 'ms'
|
||||
el.style.height = height + 'px'
|
||||
el.style.removeProperty('padding-top')
|
||||
el.style.removeProperty('padding-bottom')
|
||||
el.style.removeProperty('margin-top')
|
||||
el.style.removeProperty('margin-bottom')
|
||||
window.setTimeout(() => {
|
||||
el.style.removeProperty('height')
|
||||
el.style.removeProperty('overflow')
|
||||
el.style.removeProperty('transition-duration')
|
||||
el.style.removeProperty('transition-property')
|
||||
callback(el)
|
||||
}, duration)
|
||||
}
|
||||
|
||||
export {
|
||||
cutText,
|
||||
formatDate,
|
||||
capitalizeFirstLetter,
|
||||
onlyNumber,
|
||||
formatCurrency,
|
||||
timeAgo,
|
||||
diffTimeByNow,
|
||||
isset,
|
||||
toRaw,
|
||||
randomNumbers,
|
||||
stringToHTML,
|
||||
slideUp,
|
||||
slideDown,
|
||||
}
|
||||
Reference in New Issue
Block a user