Skip to content

Instantly share code, notes, and snippets.

@kotsutsumi
kotsutsumi / context-menu.tsx
Last active October 28, 2024 09:32
context-menu.tsx
'use client'
/**
* ContextMenu Component
*/
import { css } from 'styled-system/css'
function ContextMenu({ children, pos, onClose }: { children: React.ReactNode; pos: { x: number; y: number }; onClose?: () => void }) {
return (
<div
className={css({
@kotsutsumi
kotsutsumi / tabs.tsx
Last active October 28, 2024 12:14
Scrollable tabs with drag-and-drop reordering using ParkUI
'use client'
/**
* Tabs Component
*
* Scrollable tabs with drag-and-drop reordering and close button.
*
* npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/modifiers @dnd-kit/utilities --force
*/
import { ComponentProps, useEffect, useRef, useState } from 'react'
import { log } from 'console'
@kotsutsumi
kotsutsumi / theme-toggle-button.tsx
Last active October 26, 2024 17:33
ThemeToggleButton Component with ParkUI
'use client'
/**
* ThemeToggleButton Component
*
* npm install next-themes react-icons --force
*/
import { useTheme } from 'next-themes'
import { MdOutlineDarkMode, MdOutlineLightMode } from 'react-icons/md'
import { Button } from '../button'
@kotsutsumi
kotsutsumi / setup-nextjs-parkui.sh
Last active October 26, 2024 05:17
Next.js PandaCSS ArkUI ParkUI 一括セットアップスクリプト
# Next.jsへのセットアップ
# 作成するプロジェクト名を設定("next-app-現在時刻")
CREATE_NEXT_APP_NAME=`date +next-app-%y%m%d%H%M%S`
# CREATE_NEXT_APP_NAME="my-app"
# プロジェクト生成
npx create-next-app@latest ${CREATE_NEXT_APP_NAME} --ts --eslint --no-tailwind --app --src-dir src/ --no-import-alias --no-turbopack
# ディレクトリ移動
#!/usr/bin/bash
# ------------------------------------------------------------------------------
# [INFO]
# If you are not registered as sudoers, you will be asked for your password.
# ------------------------------------------------------------------------------
echo "🚀 A setup scripts for Ubuntu Desktop 22.04 LTS."
# ------------------------------------------------------------------------------
@kotsutsumi
kotsutsumi / .bash
Created March 18, 2023 03:22
Next.js Setup with PrimeReact and Firebase Authentication
#!/bin/bash
# オプション設定
NO_AUTH=0
NO_MYSQL=0
function main() {
local appName=$1
if [ -d $1 ]; then